/* 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; /* Background: #000000 url(/images/common/col-bg.jpg) repeat; */
  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; }

.Red { Color: #ff0000; }
.Black { Color: #000000; }

.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;
	Float: none !important; }

.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, a:visited { Color: #66aaff; 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; }

img.smallPic { Width: 180px; }
img.medPic { Width: 320px; }
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; }

.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; } 

.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 { /* Background: #ffffff url(/images/common/column_woodstrip.jpg) repeat-y;
  Background: #ffffff; */
/*  Background: #ffffff url(/images/common/L.jpg) center no-repeat; 
  Border: 1px solid #118833;
  Border-Width: 0 1px;*/
/*  Border: 2px solid #118833; */

/*  Border: 2px solid #4b2e0f; */


/*  Position: fixed;
  Margin-Top: 225px; */
  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; 
  Background-Image: url(/images/common/ludwigwam2.png); 
  Overflow: hidden;
  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; /* Width: 96%; Border: 2px outset #55bbff; */ }
#img-nav a { Background-Color: transparent; }
#img-nav img { Float: left; }
#img-nav a > img.nav-but, #img-nav a:link > img.nav-but, #img-nav a:visited > img.nav-but { Display: block; Border: 1px solid transparent; Margin: 0 3px; }
#img-nav a > img.nav-but-sel, #img-nav a:link > img.nav-but-sel, #img-nav a:visited > img.nav-but-sel { Display: none; Border: 1px solid transparent; Margin: 0 3px; }

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


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

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

#dropdown-nav ul, #ff1hacking-nav ul { Display: block;
  Position: absolute; 
  List-Style: none; 
  Margin-Left: 15px;
/*  Padding-Top: 8px; */
  Margin-Top: -2.75em; 
  Z-Index: 10; }
#ff1hacking-nav ul { Margin-Top: -3.25em; Z-Index: 5; }
#dropdown-nav ul li, #ff1hacking-nav ul li { Float: left;
  Margin: 0 4px; 
  Width: 170px; 
  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; }
#dropdown-nav ul li:hover > ul, #ff1hacking-nav ul li:hover > ul { Display: block; Position: absolute; Margin-Top: 0; Background-Color: #081820; Border: 2px outset #114488; }
#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 li { Width: 125px; }
#dropdown-nav ul li ul.info li, #ff1hacking-nav ul li ul.home li, #ff1hacking-nav ul li ul.info li { Width: 170px; }
#dropdown-nav ul li ul.download li, #ff1hacking-nav ul li ul.download li { Width: 250px; }
#dropdown-nav ul li ul.docs li, #ff1hacking-nav ul li ul.docs li { Width: 250px; }
#dropdown-nav ul li ul.more li, #ff1hacking-nav ul li ul.more li { Width: 150px; }
#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;
/* Background-Color: #4b2e0f; */
  /* Background: url(/images/common/cabin-left.jpg) top left no-repeat; */
  Width: 100%;
  
/*  Overflow: auto; */ }

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

#page #content { Clear: both; 
  Color: #ffee99;
  Padding-Left: 18px;
  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 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 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 img { Margin: 2px 5px; Padding: 4px; }
#content a:link > img, #content a:visited > img { Border: 1px solid #66aaff; }
#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: 20em;
  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 { Position: absolute; Left: 45em; 
  Width: 44px; Height: 30px; 
  Padding: 0 18px; 
  Text-Decoration: none; 
  Font-Size: 80%; }
#page #content #chooseGame a:link, #page #content #chooseGame a: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: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: 250px; 
  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: 44%;
  Min-Width: 470px;
  Height: 250px; }

#page #content .feature .win-bg img { Position: absolute;
  Width: 21%;
  Min-Width: 225px;
  Height: 250px; }
  
#page #content .featureWide h3, #page #content .feature h3 { Font-Size: 100%;
  Margin: 0.6em 12px 0.2em 12px; 
  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; }



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

#footer, #footer-short { Left: 0px;
  Height: 3.25em; 
  Width: 100%;
  Margin: 0; 
  Border-Top: 1px inset #ffff99; 
/* Background: transparent url(/images/bg/bg-footer-stretchable.jpg) bottom center repeat-x;  */

  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; }