/*############ adeeserrao.com CSS ###########*/		
/* Document is authored by John Serrao and covered by this CC license: http://creativecommons.org/licenses/by/3.0/us/ */
/* Use the code as the base of any project you have and go nuts - pass it on friend! */

/*############ THOSE properties you just have to set ###########*/
		* { margin:0; padding:0; } /*...so we are all on the same page (yes Im talking to you IE5) */

		body {
			background: #FFFFFF;
			color: rgb(240,240,240); /*reduce eye strain over black on white*/
			font-family: Verdana, Arial, Helvetica, sans-serif;
			height: 100%;
			line-height: 130%; /*text readability enhancement*/
			width: 100%;
		}

		img {
			border: 0px;
			display: block; /*forces IE to stop creating a 1px wide phantom padding around all images by turning all images into block elements instead of in-line elements*/
		}
		
		h1 {
			font-size: 18px;
		}
		
		h2 {
			font-size: 14px;
		}
		
		h3 {
			font-size: 12px;
		}
		
		h4 {
			font-size: 10px;
		}

/*############ Structural DIVs ###########*/
/*meta-structure of the site is just a gigantic horizontally and vertically centered box with a spliced image*/

	/*Absolutely positioned box with 1/2 negative margins centers the box horizontally and verically - NEATO!*/
		#site_container {
			height: 545px;
			left: 50%;
			margin-left: -485px; /* half of width of image */
			margin-top: -272px;  /* half of height */
			position: absolute;
			top: 50%;
			width: 970px;
		}

		#header_box {
			height: 66px; /* logo image height + menubar */
			/* margin: 10px 692px 10px 10px;  Right Margin = 970 - (logo width + )  */
			width: 258px;
		}

	/*FYI - Menubar is actually INSIDE of header_box*/
		#titlebar {
			clear: both;
			height: 18px;
			width: 970px;
		}

		#main_column_container {
			display: inline; /*makes floated box respect margin property in IE5*/
			float: left;
			height: 445px;
			width: 811px;
		}
		
	/*Doesnt follow the flow of everything else*/	
		#main_column_container_index {
			display: inline; /*makes floated box respect margin property in IE5*/
			float: left;
			height: 445px;
			width: 970px;			
		}

		/*Whitespacer*/
		#right_column1_container {
			background: rgb(255,255,255);
			display: inline;
			float: right;
			height: 445px;
			width: 19px;
		}

		/*Does trippy colored column design*/
		#right_column2_container {
			background: rgb(255,255,255);
			display: inline;
			float: right;
			height: 445px;
			width: 100px;
		}

		/*Content Idenification Bar*/
		#right_column3_container {
			background: rgb(255,255,255);
			display: inline;
			float: right;
			height: 445px;
			width: 22px;
		}

		/*Holds cc license infomation and link*/
		#right_column4_container {
			background: rgb(255,255,255);
			display: inline;
			float: right;
			height: 445px;
			width: 18px;
		}

		#footer {
			bottom: 0;
			clear: both;
			height: 34px;
			width: 100%; /*970px to us laymen*/
		}

		#clear {
			clear:both;
		}

/*############ Header DIVs ###########*/
	/*The logo and search boxes stay in a line and below is the menubar box - all inside header_box div*/
		#logo_box {
			float: left;
			height: 28px;
			width: 258px;
		}
		
		#logo_bar_box {
			float: left;
			height: 20px;
			width: 258px;
		}
		
		#logo_bar_box ul{
			padding: 0;
			margin: 0;
		}

		#logo_bar_box li{
			float: left;
			list-style: none;
			position: relative;
		}
		
		/*Why 3 logo bars?  Well, scriptaculous completely fades an image away - so we must house each image in a non-collapsing space*/
		/*Basically we are making CSS boxes the same size as the buttons so when they fade away, the remain clickable and still look slick*/
		#logo_bar1 {
			float: left;
			height: 20px;
			width: 121px;
		}

		#logo_bar2 {
			float: left;
			height: 20px;
			width: 77px;
		}

		#logo_bar3 {
			float: left;
			height: 20px;
			width: 60px;
		}

/*############ Main DIVs ###########*/
/*The main part of the site is contained in the same box as the header - which requires a clearing to 'float' below the picturebox*/
		#main_column {
			background: rgb(255,255,255);
			border: 1px solid rgb(224,225,227);
			clear: both;
			height: 439px; /*main_column_container_height - (border + margin)*2 */
			margin: 2px;
			width: 805px; /*main_column_container_width - (border + margin)*2 */
		}
		
		#main_content {
			background: rgb(35,31,32);
			height: 430px; /*Matches picture sizes*/		
			padding: 4px 3px 5px 2px; /*Weird numbers come from standard image gallery size of 800x430 vs the box of 805x439, necessary to maintain existing design*/			
			width: 800px; /*Matches picture sizes*/
		}

		/*Only big difference between these two main_content divs is the bg color*/
		#main_content_landingpages {
			background: rgb(35,31,32);
			height: 430px; /*Matches picture sizes*/
			margin: 4px 3px 5px 2px; /*Weird numbers come from standard image gallery size of 800x430 vs the box of 805x439, necessary to maintain existing design*/			
			width: 800px; /*Matches picture sizes*/
		}
		
		/*Hides the UL dots*/
		#main_content_landingpages ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}

		/*SUPERCEDES MAIN_COLUMN_CONTAINER NO FRONT PAGE!!!!!*/
		/*This baby takes up the whole page - purdy!*/
		#main_column_index {
			background: rgb(255,255,255);
			border: 1px solid rgb(224,225,227);
			clear: both;
			height: 439px; /*main_column_container_height - (border + margin)*2 */
			margin: 2px;
			width: 964px; /*main_column_container_width - (border + margin)*2 */			
		}	

		#main_content_index {
			background: url('/images/index/index_bg_960x430px.jpg') no-repeat;
			height: 430px; /*Matches picture sizes*/		
			padding: 4px 2px 5px 2px; /*Weird numbers come from standard image gallery size of 800x430 vs the box of 805x439, necessary to maintain existing design*/			
			width: 960px; /*Matches picture sizes*/
		}	

/* CSS for crossfader in main box - adapted from http://millstream.com.au/view/code/cross-fade-anything */
		#content {
			 /*metaclass*/
		}

		ul.crossfade {
			padding: 0;
			margin: 0;
			list-style: none;
			position: relative;
		}

		/*image switcher*/
		#fade-example-1, #fade-example-2, #fade-example-3 {
			position: absolute;
			top: 0;
			left: 0;
			visibility: hidden;
		}

		#fade-example-1 li, #fade-example-2 li, #fade-example-3 li {
			position: relative;
			float: right;
			padding: 4px 3px 5px 2px; /*Weird numbers come from standard image gallery size of 800x430 vs the box of 805x439, necessary to maintain existing design*/
			margin-top: -18px;
			width: 800px; /*Matches picture sizes*/
			height: 430px; /*Matches picture sizes*/
		}
		
		/*safari/chrome hack*/
		@media screen and (-webkit-min-device-pixel-ratio:0) {
			#fade-example-1 li, #fade-example-2 li, #fade-example-3 li {
				margin-top: 0px;
			}
			
			.caption {
				margin-top: -18px;
			}
			
		}

		.caption {
			float: right;
			position: relative;
			top: -7px;
			z-index: 100; /*making sure it is on top of the image 'stack' */
		}

		.example {
			position: relative;
			width: 805px;
			height: 439px;
		}

		.control {
			cursor: pointer;
			float: right;
			position: relative;
			top: 448px;
			z-index: 100;
		}

		#fade-example-1-next, #fade-example-2-next, #fade-example-3-next {
			left: 10px; /*yeah so the whole box is floated right, so left means really means right beyond the outside of the box */
		}

		#fade-example-1-previous, #fade-example-2-previous, #fade-example-3-previous {
			right: 25px;		
		}

/*############ Main Column - Client List Page DIVs #############*/
		#client_list_pic {
			float: left;
			position: relative;
			width: 243px; /*width of image being used - bg creates whitespace for this image */
		}
		
		#client_list_left {
			float: left;
			height: 252px;
			left: 87px; /*Creates an 87 wide left pad between left image and content*/
			position: relative;
			width: 218px; /*width=button width+left padding*/
			top: 75px;
		}
		
		#client_list_right {
			float: left;
			height: 252px;
			left: 90px;
			position: relative;
			width: 202px;
			top: 115px;
		}


/*############ Main Column - Index Page DIVs #############*/
	/*Used solely for the news page*/
		#index_page_blackbg {
			background: rgb(35,31,32);
			height: 430px;
			width: 775px; /* Needs to match the width of the news banner found in both main_entry_back.inc.php AND main_news_back.inc.php!!! */
		}
		
	/*Used solely for the news page*/
		#index_page_header {
			background: rgb(35,31,32);
			width: 775px; /* Needs to match the width of the news banner found in both main_entry_back.inc.php AND main_news_back.inc.php!!! */
		}

		#index_page_1 {			
			float: left;
			height: 136px;
			left: 76px;
			position: relative;
			top: 143px;
			width: 136px;
		}

		#index_page_2 {
			float: left;
			height: 136px;
			left: 165px;
			position: relative;
			top: 143px;
			width: 136px;
		}

		#index_page_3 {
			float: left;
			height: 136px;
			left: 253px;
			position: relative;
			top: 143px;
			width: 136px;
		}

		#index_page_4 {
			float: left;
			height: 136px;
			left: 341px;
			position: relative;
			top: 143px;
			width: 136px;
		}


/*############ Right Column DIVs ###########*/
	/*This sets up rows of 5 19x19px boxes each with left and bottom margins going gray*/
	/*We are achieving a full column (440px high, minus 5px for margin+border) by creating repeating 22 rows of 5 boxes, deliniated as horizontal lists*/
	/*The following code sets up the horizonal lists, which will even work in IE5*/
	/*Right Columns 1 and 4 are setup in the metadivs, no need to further mess with them here */

		#right_column2 {
			border-top: 1px solid rgb(224,225,227); /*to make the top row of the boxes look complete*/
			margin: 2px 0px 2px 0px; /*No left mrg because its visually covered by right_column1.  No right mrg because right_column2 seamlessly lines up with right_column3*/
		}

		#right_column2 ul{
			padding: 0;
			margin: 0;
			list-style: none;
		}

	/*Setting the left and bottom borders will make a grid when applied to the entire column*/
	/*Right margin is covered by right_column3 and top margin is covered by right_column2 border*/
		#right_column2 li{
			border-bottom: 1px solid rgb(224,225,227);
			border-left: 1px solid rgb(224,225,227);
			float: left;
			height: 19px;
			position: relative;
			width: 19px;
		}

		#right_column2 li ul {
			display: none;
			position: absolute;
			top: 1em;
			left: 0;
		}

	/*For little screwy IE*/
		#right_column2 li > ul {
			top: auto;
			left: auto;
			}

		#right_column2 li:hover ul, li.over ul { /* lists nested under hovered list items */
			display: block;
		}


/*############ Right Column3 DIVs ###########*/
	/*This sets the weird background and border for the gray box on the far right of the site*/
		#right_column3 {
			background: url('/images/adee_site_pics/rightcol_bars/graybg_rightcol3_18x1px.jpg') repeat-y;
			border: 1px solid rgb(224,225,227);
			clear: both;
			height: 439px; /*main_column_container_height - (border + margin)*2 */
			margin: 2px 2px 2px 0px; /*no left margin because box rows seamlessly join with this column */
			width: 18px; /*main_column_container_width - (border*2 + margin) NOTE: this width addition is different than all other columns because there is NO LEFT MARGIN!!!*/
			z-index: -5; /*keeps the background image in the background, know what Im saying? */
		}

/*############ Right Column4 DIVs ###########*/
	/*Pushes CC license button down to the footer where it belongs*/
		#right_column4 {
			position: relative;
			top: 363px;
		}

/*############ Footer DIVs ###########*/
	/*Houses major navigational structure of the site - YAY*/
	/*Menubar Lists go sideways to accomodate navigation*/
		#menubar ul{
			padding: 0;
			margin: 0;
			list-style: none;
		}

		#menubar li{
			float: left;
			position: relative;
			top: 12px;
			left: 3px;
		}

		#menubar li ul {
			display: none;
			position: absolute;
			top: 1em;
			left: 0;
		}

		/*For little screwy IE*/
		#menubar li > ul {
			top: auto;
			left: auto;
			}

		#menubar li:hover ul, li.over ul { /* lists nested under hovered list items */
			display: block;
		}
		
	/* Show me some pseudo classes - make them link purdy */
		a{
			color: rgb(240,240,240);
			line-height: 130%;
			text-decoration: none;
		}

		a:link{
			color: rgb(240,240,240);
			line-height: 130%;
			text-decoration: none;
		}

		a:visited{
			color: rgb(240,240,240);
			line-height: 130%;
			text-decoration: none;
		}

		a:hover{
			color: rgb(240,240,240);
			line-height: 130%;
			text-decoration: underline;
		}
		
		#main_index_pad {
			padding: 0px 50px 50px 50px;
		}