/*
  Freex IRL

  CSS (c) 2005 Felix Reidl
  ...

*/

body
{
  background: url(gui/pattern_orange.png) top left;
  padding: 0;
  margin: 0;
  font-size: 16px;
}

#site, #border_left, #border_right
{
  width: 630px;
  margin: 0px auto 0px auto;
  background: url(gui/pattern_blue.png);
}

#border_left
{
  background: url(gui/border_left.png) repeat-y top left;
}

#border_right
{
  background: url(gui/border_right.png) repeat-y  top right;
}

#content
{
  width: 610px;
  margin: 0px 10px 0px 10px;
}

#head
{
  background: url(gui/top.png) no-repeat top left;
  width: 610px;
  height: 194px;
  overflow: hidden;
}

#comic, #comic img
{
  width: 610px;
  background-color: #fff;
}

#browse
{
  width: 610px;
  height: 100px;
  overflow: hidden;
  background: url(gui/mid.png) no-repeat bottom left #fff;
  clear: both;
}

#news
{
  padding: 15px 0;
  background: url(gui/pattern_blue.png) bottom left;
  clear: both;
  width: 610px;
}

#news #left
{
  width: 400px !important;
  width: 397px;
}

#news #right
{
  width: 210px;
  float: right;
}

#footer
{
  background: url(gui/bottom.png) top left;
  clear: both;
  width: 610px;
  height: 77px;
}

/*

  Vertical Menus

*/

#head ul, #head li,
#browse ul, #browse li
{
  list-style-type: none;
  float: left;
  padding: 0;
  margin: 0;
}

#head ul
{
  width: 610px;
  margin: 115px 0;
  padding: 0px 0px 0px 312px;
}

#head li
{
  margin: 0px 2px 0px 2px;
  border: 1px solid #305785;
}

#head li a
{
  background: url(gui/pattern_blue.png);
  color: #305785;

  font: bold 13px Arial;
  padding: 4px 9px 4px 9px;
  text-decoration: none;
  display: block;
} 

#head li a:hover
{  
  background: url(gui/pattern_blue_stripes.png);
  color: #fff;
} 

#browse ul
{
  width: 610px;
  padding: 10px 0px 0px 170px; 
}

#browse li
{
  height: 14px;
  margin: 0px 4px 0px 4px;
}

#browse li#first { width: 62px; }
#browse li#previous { width: 72px; }
#browse li#next { width: 47px; }
#browse li#last { width: 59px; }

#browse li a
{
  text-decoration: none;
  height: 100%;
  width: 100%;
  display: block;
  font-size: 1px;
  text-indent: -100px;
  overflow: hidden;
}

/*

  Comic-Browse buttons

*/

#browse li#first a { background: url(gui/buttons.png) 0px 0px; }
#browse li#previous a { background: url(gui/buttons.png) -62px 0px; }
#browse li#next a { background: url(gui/buttons.png) -134px 0px; }
#browse li#last a { background: url(gui/buttons.png) -180px 0px; }

#browse li#first a:hover { background: url(gui/buttons.png) 0px 14px; }
#browse li#previous a:hover { background: url(gui/buttons.png) -62px 14px; }
#browse li#next a:hover { background: url(gui/buttons.png) -134px 14px; }
#browse li#last a:hover { background: url(gui/buttons.png) -180px 14px; }

/*

  White-Black transition for comic

*/

#comic
{
  float: left;
  padding-top: 46px;
  background: url(gui/trans_top.png) top left no-repeat #000;
}

#comic img, #browse
{
  float: left;
  clear: both;
}

#comic div.extra
{
  float: left;
  width: 100%;
  height: 41px; 
  background: url(gui/trans_bottom.png) top left no-repeat;
}

/*

  Other Content (not on main page)

*/

#other
{
  background: url(gui/mid.png) no-repeat bottom left #fff;
  padding: 10px 0px 80px 0px;
}

/*

  Archives

*/

#archives h1
{
  height: 75px;
  text-indent: -999px;
  overflow: hidden;
  padding: 0;
}

#archives h1#freex_irl
{
  margin: 10px 0px 0px 0px;
  background: url(gui/arch_irl.png) top left no-repeat #fff;
}

#archives h1#freex_classic
{
  margin: 40px 0px 0px 0px;
  background: url(gui/arch_classic.png) top left no-repeat #fff;
}

#archives ol, #archives li
{
  list-style-type: decimal-leading-zero;
  margin: 0;
  padding: 0;
  color: #666;
}

#archives ol
{
  padding: 10px 0px 10px 0px;
}

#archives li
{
  margin: 2px 0px 4px 50px;
  padding: 0px 0px 0px 10px;
  clear: both;
}

#archives li a 
{ 
  color: #666; 
  font: 14px Verdana, Arial, Helvetica;
}
#archives li a:visited,
#archives li a:active { color: #333; }
#archives li a { color: #666; }

#archives li .date, #archives li .act, #archives li .title
{
  position: relative;
}

#archives li .title
{  
  float: left;
}

#archives li .act
{
  float: right;
  left: -70px;
}

#archives li .date
{
  float: right;
  left: -20px;
}

#archives li .IEfix
{ 
  width: 550px;
  float: right;
}


/*

  Right column of #news
  
*/

#news #right h2
{
  width: 155px;
  height: 50px;

  margin: 4px auto 4px auto;

  /* Hide headlines */
  font-size: 1px;
  text-indent: -250px;
  overflow: hidden;
}

#news #right h2#links 
{ 
  background-image: url(gui/h1_links.png) !important;
 
  /*

    Dirty, dirty IE-Fix for transparents PNGs.
    See http://www.alistapart.com/articles/pngopacity/ for details

  */
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gui/h1_links.png',sizingMethod='crop');
}

#news #right h2#vote
{ 
  background-image: url(gui/h1_vote.png) !important;
  margin-top: 20px;
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gui/h1_vote.png',sizingMethod='crop');
}

#news #right h2#feed 
{ 
  background-image: url(gui/h1_feed.png) !important;
  margin-top: 20px;
  background-image: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gui/h1_feed.png',sizingMethod='crop');
}

#news #right p
{
  color: #305785;
  margin: 4px auto 4px auto;
  text-align: justify;
  width: 180px;
}

#news #right ul, #news #right li
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#news #right li
{
  text-align: center;
  margin: 4px 0px;
}

#news #right li a img
{
  border: 0;
  vertical-align: top;
}

/*
 
  Left Column of #news

*/

#news #left
{

}

#news #left h1
{
  padding: 0;
  margin: 4px 10px 10px 20px;
  color: #2f5684;
  font: 25px Georgia, "Times New Roman", Serif;
}

#news #left p, #news #left div.sub
{
  padding: 0;
  margin: 4px 10px 10px 20px;
  font: 12px Verdana, Arial, Helvetica;
  color: #1b3c63;
  line-height: 18px;
  text-align: justify;
}

#news #left div.sub
{
  text-align: right;
  font-style: italic;
}

/*

  Gallery

*/

ul#gallerypage, ul#gallerypage li
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  float: left;
}

ul#gallerypage li
{
  width : 100px;
  height: 140px;

  margin: 4px;
}

ul#gallerypage li div.title
{
  color: #305785;
  text-align: center;
  height: 40px;
  font: 12px Verdana, Arial, Helvetica;
}

ul#gallerypage li a img
{
  border: 0px;
  height: 100px;
  width: 100px;
}

ul#gallerypage li.thumbnail a img
{
  border: 1px solid #305785;
}

div#gallerynav
{
  color : #222;
  font: bold 16px Arial;
  margin: 4px 0px 4px 10px;
}

div#gallerynav a
{
  font: bold 16px Arial;
  color : #777;
} 

ul#galleryfolders, ul#galleryfolders li
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul#galleryfolders li
{
  font: bold 16px Arial;
  margin : 0px 0px 0px 10px;
  padding : 0px 0px 0px 60px;
  height : 50px;
  background: url(images/other/ico_folder.png) no-repeat;
}

ul#galleryfolders li a
{
  position: relative;
  color : #777;
  top: 10px;
}

#gallery div.hr
{
  height: 52px;
  background: url(gui/divider.png) no-repeat #fff;
  border: 0px;
}

#gallery div.hr hr
{
  display: none;
}

/*

  Projects
    . projects.hr: see gallery hr

*/

#projects {}

#projects dl, #projects dd, #projects dt,
#projects dd ul, #projects dd li
{
  margin: 0px;
  padding: 0px;
  list-style-type: none; 	
}

#projects dt
{
  display: block;
  text-align: center;
  font: bold 20px Arial;
  color : #777;
  line-height: 114px;

  height: 70px;
  background: url(gui/divider.png) no-repeat #fff;
}

#projects dd li
{
  margin: 2px 0px 2px 20px;
  clear: both;
}

#projects dd li h3 a
{
  font: bold 16px Arial;
  color : #777;
}

#projects dd li p
{
  font: 10pt Arial;
  color : #222;
}

#projects dd li img
{
  height: 100px;
  width: 100px;
  float: right;
  border: 1px solid #777;
  margin: 0px 40px 0px 10px;
}


/*

  Footer

*/

#footer
{
  clear: both;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#footer p
{
  color: #305785;
  font: 10px Verdana, Arial, Helvetica;
  margin: 0;
  padding: 52px 20px 4px 20px;
  text-align: justify;
}

/*

  Extra

*/


.clear
{
  clear: both;
}