/* Main CSS Document for jeffludwig.com 
   Author: Jeff Ludwig 
   Feel free to glean inspiration, as much inspiration as this document shows
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Global style declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	
* { Border: 0; Padding: 0; Margin: 0; }

body { Background-Color: #000000; 
  Font-Family: Georgia, "Times New Roman", Times, serif; 
  Font-Size: 18px;
  Color: #ffff99;
  Width: 100%;
  Margin: 0; 
  Min-Width: 1000px;
  }

.italicized { Font-Style: italic; }
.makeBold { Font-Weight: bold; }
.strikethru { Text-Decoration: line-through; }

.Red { Color: #ff0000 !important; }
.Bluish { Color: #66aaff !important; }
.Gold { Color: #e9d78f !important; }
.Green { Color: #33ff33 !important; }
.Black { Color: #000000 !important; }
.White { Color: #ffffff !important;  }
.Blue { Color: #99ccff !important;  }

.quote { Padding: 0 4em; }

acronym { Background: url(/images/acronym.png) repeat-x bottom; }
acronym:hover { Cursor: help; }


.Centered { 
	Margin-Left: auto !important;
	Margin-Right: auto !important;
	Text-Align: center;
	Float: none !important; }

.moveUp { Position: absolute; Right: 25px; }
.Right { Margin: 5px 10px 5px 15px; Float: right; }
.Left { Margin: 5px 15px 5px 10px; Float: left; }

.largerFont { Font-Size: 150%; }	
hr { Width: 85%; }
	
a:link { Color: #66aaff; Text-Decoration: underline; }
a:visited { Color: #3377ff; Text-Decoration: underline; }
a:hover { Background-Color: #aaddff; Color: #000000; Text-Decoration: underline; }
a:link img, a:visited img, a:hover img { Border: 0px none; }

a.noHighlight:hover { Background-Color: black; }

img.smallPic { Width: 180px; Clear: right; }
img.medPic { Width: 30%; Max-Width: 320px; Border: 1px inset #082140; }
img.smallicon { Width: 20px; Height: 20px; Margin: 0 10px 0 4px; }
#page #content img.emoticon, img.emoticon { Margin: -2px 4px -2px 10px; Padding: 0; Width: 20px; Height: 20px; Border: none; }

.centeredImage { Margin-Left: auto; Margin-Right: auto; Text-Align: center; }


.compCommand { Font-Family: "Courier New", Courier, mono; 
  Font-Size: 115%; } 

.hex { Font-Family: "Courier New", Courier, monospace; Font-Size: 100%; Color: #66ccff; }
.decimal { Font-Family: Geneva, Arial, Helvetica, sans-serif; Font-Size: 100%; Color: #66ffcc; }

.clearALL { Clear: both; }
.indent { Margin-Left: 25px; } 
.blueSection { Background-Color: #001122; Border: 1px dashed #003399; Border-Width: 1px 0px; Padding-Bottom: 0.5em; }
.acclaim { Margin: 1em 0 2em 0; Font-Size: 90%; Line-Height: 1.8; }
#content div.acclaim ul { Margin-Left: 60px; }

.pagebreak { Display: none; }

#vista  { Width: 100%; Height: 225px; }

#vista img#masthead { Position: fixed;
  Top: 0;
  Left: 0;
  Width: 100%;
  Min-Width: 984px;
  Height: auto;
  Z-Index: -2;
  Background: #000000; }

#the-geek #face { Position: absolute;
  Top: 0;
  Left: 0;
  Width: 305px;
  Height: auto;
  Z-Index: 0; }

#the-geek #geek-info { Position: absolute; Left: 716px; Top: 80px; Right: 0px; }

#the-geek #geek-info #name, #the-geek #geek-info #name-sig { Position: absolute; Right: 0;
  Z-Index: 0; }

#main { Min-Width: 984px;
  Margin: 0 2%;
  Width: 96%;
  }

.fontXsmall { Font-Size: 70%; }
.fontSmall { Font-Size: 85%; }
.fontNormal { Font-Size: 100%; }
.fontLarge { Font-Size: 120%; }



/* Masthead declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#masthead { Color: #066611;
  Height: 210px;
  
  Z-Index: 1; 
  Padding: 0; }
#masthead a:hover { Background: none; }
/*
#masthead img { Height: 275px; }

#ludwigwam { Margin-Top: -64px;
  Z-Index: 2;
  Position: absolute;
  Height: 60px; }
*/
/*
#ludwigwam .Logo { Height: 60px;
  Width: 450px; 
  Top: 0px;
  Left: 0px; }
*/
  
	
#masthead h1 { Left: 35%; 
  Font-Size: 200%; }
#masthead h2 { 
  Left: 40%; 
  Font-Size: 160%; }

#fontContainer { Position: absolute;
  Margin-Top: -27px; 
  Margin-Left: 643px; 
  Height: 20px; 
  Width: 148px; 
  Z-Index: 999; }
#fontContainer ul { Display: block; 
  List-Style: none; }
#fontContainer ul li { Display: inline; 
  List-Style: none; 
  Float: left; } 
#fontContainer ul li p { Width: 25px; 
  Height: 20px; 
  Margin: 0 5px; 
  Border: 1px outset #ffffcc; 
  Text-Align: center; }
#fontContainer ul li p a { Color: #ffffcc; }


/* Nav declarations (for link bar across top for multiple pages)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


#nav ul { Display: block; 
  List-Style: none; 
  Margin-Left: 25px;
  Padding-Top: 8px;
  Z-Index: 10; }
#nav ul li { Float: left;
  Margin: 0 4px; 
  List-Style: none;
  Background-Image: none; }
#nav ul li p { Display: block;
  Width: 108px;
  Line-Height: 1.5;
  Text-Align: center;
  Border: 1px outset #118833; }
#nav ul li p a { Color: #63360b; 
  Font-Variant: small-caps;
  Font-Size: 92%; }
#nav ul li p a:hover { Background-Color: #63360b; Color: #ffffcc; }

#page #nav #img-nav { Display: block; Float: right;  }
#page #nav #img-nav a { Background-Color: transparent; }
#page #nav #img-nav img { Float: left; }
#page #nav #img-nav a > img.nav-but, #page #nav #img-nav a:link > img.nav-but, #page #nav #img-nav a:visited > img.nav-but { Display: block; Border: 1px solid transparent; Margin: 0px 3px; }
#page #nav #img-nav a > img.nav-but-sel, #page #nav #img-nav a:link > img.nav-but-sel, #page #nav #img-nav a:visited > img.nav-but-sel { Display: none; Border: 1px solid transparent; Margin: 0 3px; }

#page #nav #img-nav a:hover > img.nav-but { Display: none; Border: 1px solid transparent; Margin: 0 3px; }
#page #nav #img-nav a:hover > img.nav-but-sel { Display: block; Border: 1px solid #fff0a0; Margin: 2px 5px 0 5px; }


/* Main Nav declarations (for drop down menus at top)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#GOG-button { Position: absolute; Top: 270px; Right: 0; }
#GOG-button img { Margin: 0; Padding: 4px; }
#GOG-button a:link > img, #GOG-button a:visited > img { Border: 1px solid #66aaff; }
#GOG-button a:hover > img { Border: 3px solid #66aaff; Padding: 2px; }


#dropdown-nav, #ff1hacking-nav, #like-nav { Font-Size: 90%; Font-Variant: small-caps; }
img#hack-bar { Margin-Left: -20px; Width: 560px; Height: 40px; }
img#like-bar { Margin-Left: -20px; Width: 750px; Height: 40px; }

ul#like-nav li.delicious p { Margin-Left: -25px; Margin-Top: 2px; }

#dropdown-nav ul, #ff1hacking-nav ul { Display: block;
  Position: absolute; 
  List-Style: none; 
  Margin-Left: 15px;
  Width: 960px; 
/*  Padding-Top: 8px; */
  Margin-Top: -2.75em; 
  Z-Index: 10; }
#ff1hacking-nav ul { Margin-Top: -2.75em; Padding-Left: 1.25em; Z-Index: 5; }
#dropdown-nav ul li, #ff1hacking-nav ul li { Float: left;
  Margin: 0 4px; 
  Width: 175px; 
  Line-Height: 2.5;
  List-Style: none;
  Background-Image: none; }
#dropdown-nav ul li p, #ff1hacking-nav ul li p { Display: block;
  Width: 200px;
  Line-Height: 1.5;
  Text-Align: center;
  Border: 1px outset #118833; }
#dropdown-nav ul li p a, #ff1hacking-nav ul li p a { Color: #63360b; 
  Font-Variant: small-caps;
  Font-Size: 92%; }
#dropdown-nav ul li p a:hover, #ff1hacking-nav ul li p a:hover { Background-Color: #63360b; Color: #ffffcc; }

#dropdown-nav ul li:hover, #ff1hacking-nav ul li:hover { Cursor: default; }
#dropdown-nav ul li ul, #ff1hacking-nav ul li ul { Display: none; Padding-Top: 0; Font-Size: 80%; Font-Family: Verdana, Arial, Helvetica, sans-serif; Font-Variant: normal; }
#ff1hacking-nav ul li:hover > ul { Display: block; Position: absolute; Margin-Top: 0; Background-Color: #081820; Border: 2px outset #114488; Z-Index: 20; }
#dropdown-nav ul li:hover > ul { Display: block; Position: absolute; Margin-Top: 0; Background-Color: #081820; Border: 2px outset #114488; Z-Index: 100; }
#dropdown-nav ul li ul li, #ff1hacking-nav ul li ul li { Float: none; Width: 250px; Line-Height: 2; Text-Align: center; }
#dropdown-nav ul li ul li.withSeparator, #ff1hacking-nav ul li ul li.withSeparator { Float: none; Width: 250px; Line-Height: 2; Padding-Top: 3px; Border-Top: 1px dashed #2288cc; Text-Align: center; }
#dropdown-nav ul li ul.home, #dropdown-nav ul li ul.home li { Width: 160px; }
#dropdown-nav ul li ul.info, #dropdown-nav ul li ul.info li, #ff1hacking-nav ul li ul.home, #ff1hacking-nav ul li ul.home li, #ff1hacking-nav ul li ul.info, #ff1hacking-nav ul li ul.info li { Width: 320px; }
#dropdown-nav ul li ul.download, #dropdown-nav ul li ul.download li, #ff1hacking-nav ul li ul.download, #ff1hacking-nav ul li ul.download li { Width: 320px; }
#dropdown-nav ul li ul.docs, #dropdown-nav ul li ul.docs li, #ff1hacking-nav ul li ul.docs, #ff1hacking-nav ul li ul.docs li { Width: 275px; }
#dropdown-nav ul li ul.more, #dropdown-nav ul li ul.more li, #ff1hacking-nav ul li ul.more, #ff1hacking-nav ul li ul.more li { Width: 180px; }
#dropdown-nav ul li ul li.first, #ff1hacking-nav ul li ul li.first { Border-Top: 0; }



/* Main page declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#page { Clear: left; 
  Color: #ffee99;
  Width: 100%;
  
/*  Overflow: auto; */ }


#page #like-box { Position: absolute; Left: 0; Clear: Left; Float: Left; Width: 800px; Padding: 3px; }

#page #like-box #like-nav { Display: block; 
  Position: absolute; 
  
  List-Style: none; 
  Margin-Left: 40px;
  Margin-Top: -2.25em; 
  Z-Index: 3; }

#page #like-box #like-nav li { Float: left;
  Margin: 0 4px; 
  Margin-Right: 25px;
  Font-Family: Verdana, Arial, Helvetica, sans-serif;
  Font-Size: 75%;
  List-Style: none;
  Background-Image: none; }

#page #like-box #like-nav p { Width: 180px; Height: 34px; Overflow: hidden; }

/*
#nav ul li p { Display: block;
  Width: 108px;
  Line-Height: 1.5;
  Text-Align: center;
  Border: 1px outset #118833; }
#nav ul li p a { Color: #63360b; 
  Font-Variant: small-caps;
  Font-Size: 92%; }
#nav ul li p a:hover { Background-Color: #63360b; Color: #ffffcc; }
*/

/* Content declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#page #content { Clear: both; 
  Color: #ffee99;
  Padding-Left: 18px;
  Padding-Top: 2.8em;
  Padding-Bottom: 1em;  
  Overflow: hidden; }
  
#page #content .win-bg { Z-Index: 1; }
#page #content .winContent { Z-Index: 5; 
  Position: absolute; 
  Margin-Top: -0.5em; }

#content h1 { Font-Size: 160%;
  Font-Variant: small-caps; 
  Margin: 1.5em 15px 0 15px; 
  Line-Height: 1.25; }
#content hr { Clear: both; }
#content h1#first { Margin: 0.5em 15px; }  

#content h2 { Font-Size: 120%; 
  Margin: 1.5em 25px 0 25px; 
  Line-Height: 1.25; 
  Color: #88ff44; 
  Border-Bottom: 2px solid #88ff44; }
#content h3 { Font-Size: 100%;
  Margin: 0.8em 32px 0 32px; 
  Line-Height: 1.5;
  Color: #88ff44; 
  Text-Decoration: underline; }
#content h4 { Font-Size: 95%;
  Margin: 0.8em 40px 0 40px; 
  Line-Height: 1.6;
  Color: #eedd33; 
  Text-Decoration: underline; }
#content h5, #content h6 { Font-Size: 92%; 
  Margin: 0.5em 40px 0 40px; 
  Line-Height: 1.5; 
  Font-Weight: bold; }

#content h6.invis { Display: none;
}

#content p, #content ul { Font-Size: 92%; 
  Margin: 0.8em 40px 0 40px;
  Line-Height: 1.8; } 

#content p.end { Clear: both; 
  Font-Size: 1px; }
#content li { Margin-Left: 12px; Padding-Bottom: 0.5em; }
#content li.whitespace { Padding-Top: 0.75em; }

#content ul.changelog { Font-Size: 80%; }

#content img { Margin: 2px 5px; Padding: 4px; }
#content a:link > img, #content a:visited > img { Border: 1px solid #66aaff; }
#content img.bordered { Border: 1px solid #88ff44; }

#content a:hover > img { Border: 3px solid #66aaff; Padding: 2px; }

#content img.thisGame { Margin: 5px 5px 10px 20px; Padding: 4px; Border: 1px solid #ffee99; }
#content img.mapImg { Margin: 5px auto; Padding: 4px; Border: 1px solid #ffee99; }

#main #page #content p.centeredImage > a:hover { Background-Color: transparent !important; }


#main #page #content input#paypal { Margin: 2px 5px; Padding: 4px; Border: 1px solid #66aaff; }
#main #page #content input#paypal:hover { Border: 3px solid #66aaff; Padding: 2px; }
/* #main #page #content form.centeredImage img:hover { Background-Color: transparent !important; } */


/* Styles specifically for the home page (Featured boxes and game select)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#page #content #chooseGame select { Position: absolute; Left: 32em;
  Padding: 3px;
  Border: 1px inset #888888;
  Background: #111111;
  Color: #99ccff;
  Font-Family: Georgia, "Times New Roman", Times, serif;
  Font-Size: 90%; }


#page #content #chooseGame a.titleButton { Position: absolute; Left: 68em; 
  Width: 44px; Height: 30px; 
  Padding: 0 18px; 
  Text-Decoration: none; 
  Font-Size: 80%; }
#page #content #chooseGame a.titleButton:link, #page #content #chooseGame a.titleButton:visited { Background: url('/images/nav-buttons/button-go-up.gif') top left no-repeat; 
  Color: #bbddff; 
  Padding-Top: 0px; Padding-Left: 18px;
  Font-Style: normal; }

#page #content #chooseGame a.titleButton:hover { Background: url('/images/nav-buttons/button-go-down.gif') top left no-repeat;
  Color: #ddeeff;
  Padding-Top: 3px; Padding-Left: 20px;
  Font-Style: italic; }


#page #content #chooseWiz8 select { /* Position: absolute; Left: 24em; */ Margin-Left: 25px;
  Padding: 3px;
  Border: 1px inset #888888;
  Background: #111111;
  Color: #99ccff;
  Font-Family: Georgia, "Times New Roman", Times, serif;
  Font-Size: 90%; }

#page #content #chooseWiz8 input { /*Position: absolute; Left: 42em; */ Margin-Left: 20px;
  Background: url('/images/nav-buttons/button-go-up2.gif') 0px 0px no-repeat; 
  Color: #bbddff; 
  Text-Align: center;
  Font-Style: normal; 
  Font-Size: 75%;
  Height: 35px;
  Width: 80px; 
  Border: none; }

#page #content #chooseWiz8 input:hover { 
  Background: url('/images/nav-buttons/button-go-down2.gif') 0px 0px no-repeat;
  Color: #ddeeff;
/*  Padding-Top: 3px; Padding-Left: 20px; */
  Font-Style: italic; 
  Height: 35px;
  Width: 80px; 
  Border: none; }


#page #content .feature, #page #content .feature .winContent { Width: 22%;
  Min-Width: 220px; 
  Height: 255px; 
  Overflow: hidden;
  Float: left; }

#page #content .featureWide, #page #content .featureWide .winContent { Width: 46%;
  Min-Width: 460px; 
  Height: 250px; 
  Overflow: hidden;
  Float: left; }

#page #content .feature, #page #content .featureWide { Margin: 0.75em 1%; }


#page #content .feature .winContent { Width: 21%; Min-Width: 210px; Font-Size: 70%; Line-Height: 1.3; Margin-Top: 0.4em; }
#page #content .featureWide .winContent { Width: 44%; Min-Width: 445px; Font-Size: 80%; Margin-Top: 0.4em; }


#page #content .featureWide .win-bg img { Position: absolute;
  Width: 45%;
  Min-Width: 450px;
  Height: 250px; }

#page #content .feature .win-bg img { Position: absolute;
  Width: 20%;
  Min-Width: 200px;
  Height: 250px; }
  
#page #content .featureWide h2, #page #content .feature h2 { Font-Size: 110%;
  Margin: 20px 16px 0.2em 16px; 
  Line-Height: 1.4; }
#page #content .featureWide p, #page #content .feature p { Font-Size: 90%;
  Margin: 0.6em 20px 0 20px;
  Line-Height: 1.8; } 

#page #content table.textHex { Margin: 0.75em auto; }
#page #content table.textHex td { Padding: 3px 5px; Text-Align: center; Vertical-Align: middle; Color: #99eeff; }
#page #content table.textHex td.prompt { Text-Align: right; }
#page #content table.textHex td.hex { Padding-Right: 25px; Color: #66ccff; }
#page #content table.textHex td.hexCompare { Padding: 3px 15px; Font-Family: "Courier New", Courier, monospace; Font-Size: 100%; Color: #66ccff; }


div.comments-wrapper input#importantfield{
  Display:block;
  Overflow: hidden;
  Border: none;
  Margin: 0;
  Padding: 0;
  Height: 0;
  Width: 0;
}


/* Footer declarations
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#footer, #footer-short { Left: 0px;
  Height: 4.75em; 
  Width: 100%;
  Margin: 0; 
  Border-Top: 1px inset #ffff99; 
  
  Color: #ffffff; }
  
#footer p, #footer-short p { Font-Size: 92%; 
  Text-Align: center;
  Line-Height: 1.5; } 
#footer p a, #footer-short p a { Color: #ffff66; }
#footer p a:hover, #footer-short p a:hover { Background-Color: #ffff66; Color: #066611; }

#footer img, #footer-short img { Position: fixed;
  Bottom: 0;
  Left: 0;
  Width: 100%;
  Min-Width: 984px;
  Height: 200px;
  Z-Index: -3;
  Background: #000000; }
  
#footer-short { Bottom: 0em; Position: absolute; }