/*
*CSS Document for Games, Gadgets, and Gizmos Site 
*Creates the master layout for the base template.
*All templates and pages are children of the base template.
*Created by Rich Peck
*Version 1.0 - 02/16/07*/

/*
*Formats the body of the page.
*/
html{
background-image:url(../images/sitewide/gif/background.gif);
}
body{
    margin: 0px;
    text-align:center;/*Setting text align to center will center the page in the browser window.*/
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:.96em;
	 color:#114F88;

}

/*
*Formats the main div of the site. 
*The main div acts as a container for the page.
*/
div#main_div{
    width:779px;
	margin-right: auto;
	margin-left: auto;
	height:auto;
	background-repeat:repeat-y;
	background-image:url(../images/sitewide/gif/pageBackground.gif);
	text-align:left;
	border-bottom:2px  solid #8ca8c2;
    border-right:1px  solid #8ca8c2;
    border-left:1px  solid #8ca8c2;
    border-top:1px  solid #8ca8c2;
}

/*
*Formats the top menu of the site. 
*The top menu contains the following buttons:
     -Games and Simulations
	 -Interviews
	 -Articles and whitepapers
	 -Related Resources
*/
div#top_menu{
     width:779px;
	 margin-bottom:10px;
	 text-align:center; 
}

/*
*Specific formatting styles for the top menu items.
*/
div#top_menu div{
    /* margin-right:45px;*/
	padding:0px 25px;
}

/*
*Formats the main left column.
*After the top menu, we divide the page up into two logiclal columns.
*The left column will contain submenu, page title, left ads, and main content.
*/
div#main_left_column{
    /* background-color:#990066;Comment out in final*/
	 width:539px;
	 float:left;
	 margin:0px;
	 padding:0px;
}

/*
*Formats the main rightcolumn.
*After the top menu, we divide the page up into two logiclal columns.
*The right column will contain book image, buy the book, and right ads.
*/
div#main_right_column{
    /* background-color:#0000CC;Comment out in final*/
	 float:left;
	 width:220px;
	 text-align:center;
	 margin-left:8px;
}

/*
*Formats the Games, Gadgets, and Gizmos title graphic.
*/
img#book_title{
     margin-left:39px;
}

/*
*Formats the button that the user will click to purchase the book.
*/
img#buy_book_btn{
     margin-top:12px;
}

/*
*Class for creating a blue divider line.
*To specifically format a divider line, create a style using a id and this class.
*/
div.divider{
     background-color:#E2E9F0;
	 height:2px;
	 font-size:1px;
}

/*
*Format the divider line below the book title.
*/
div#book_title_divider,div#middle_menu_divider{
     margin-top:6px;
	 margin-left:30px;
	 width:509px;
}

/*
*Formats the middle menu.
*The middle menu contains the following links:
* -About the book
* -Reviews
* -Wiki Glossary
*- About the Author
*/
div#middle_menu{
	 margin-left:32px;
	 margin-bottom:3px;
	 width:499px;
	 margin-top:6px;
	 padding-left:8px;
	 text-align:center;
}
/*
*Specific formatting styles for the middle menu items.
*/
div#middle_menu div{
	 margin-right:28px;
}

/*
*Format the menu links.
*/
a.menuLink:link,a.menuLink:visited{
 font-size:12px;
	 font-variant:small-caps;
	 color:#114F88;
	 font-weight:bold;
	 text-decoration:none;
	 border:none;
}


/*
*These styles are used to format the top and middle menu items.
*/
div#middle_menu div,div#top_menu div{
     width:auto;
	 display:inline;
}
/*
*By default, do not allow div, p, or img tags to have a margin or padding.
*/
div,img,p{
     margin:0px;
     padding:0px;
}

/*
*Div tags that can be used to clear floats
*We set the tag to the smallest font, width, and height.
*Generalized settings for both left and right clears
*/
div.clearLeft,div.clearRight{
     margin:0px;
     padding:0px;
     width:0px;
     height:0px;
     font-size:1px;
}
/*
*Sets the clear to the left.
*/
div.clearLeft{
   clear:left;
}
/*
*Sets the clear to the right
*/
div.clearRight{
   clear:right;
}

/*
*Formats the right sub column.
*The right sub column contains the icons for the karl kapp website, blog, etc.
*/
div#right_subcolumn{
    margin:10px 0px;
	text-align:left;
	padding: 0px 10px;
}
/*
*Set any divs that are direct childred of div#right_submcolumn to have
*a top and bottom margin of 20px;
*/
div#right_subcolumn div{
     margin:20px 0px;
}
/*
*Align the icons with the link and provide a slight right buffer.
*/
div#right_subcolumn div img{
     vertical-align:middle;
	 margin-right:3px;
}

/*
*Define the look of an a tag anywhere in the site
*/
a:link,a:visited{
     color:#114F88;
	 text-decoration:none;
	 border-bottom:1px #114F88 dotted;
	 font-weight:bold;
}
a:hover,a.menuLink:hover,a:active{
    color:#0099FF;
}

/*
*Define the markup of an h1, h2 tags.
*/
h1,h2,h3,h4{
 padding:0px;
	 margin:0px;
}
h1,h2{
     color:#A0CC3B;
	 
}
h1{
     font-size:12px;
	 font-variant:small-caps; 
}
h2{
	font-size:11px;
     font-style:italic;
}
h3{
font-size:1.1em;
}
h4{
font-size:1.2em;

}

/*
*Floats an img to the left.
*/
img.floatLeft,img.floatLeftBorder{
     float:left;
	 margin:0px 8px 0px 0px;
}
img.floatRight,img.floatRightBorder{
margin:0px 0px 0px 5px;
float:right;
}


img.floatLeftBorder,img.floatRightBorder{
     border:1px #A0CC3B solid;
	 padding:3px;
}


/*
*Formats the footer area of the page
*/
div#footer{
     text-align:center;
     margin-top:25px;
	 padding:5px;
}
/*
*Formats the divider that separates the footer from the page content.
*/
div#footer_divider{
     margin:auto;
     width:75%;
     margin-bottom:5px;
}

/*
*By default, any a tag has a dotted line under it.
*This style removes the dotted line for a tags in the main right column.
*If you do not do this, there is a dottem
*/
div#main_right_column a{
border:none;
}

/*
*Formats the area which will hold the content of the page. 
*/
div#pageContent{
padding-left:22px;
}

/*
*Aligns the timeline icon to the center of the column
*/
div#timeline_div{
text-align:center;
}

div#title_div{
margin:10px 0px 10px 6px;
}

div#content_div{
font-size:.8em;
margin-left:10px;
}


/*
*Format the paragraphs that are inside of the left ads.
*/
div#left_ads  p,div#author_msg  p,div.newsItem,div#footer{
     font-size:12px;
	
}