@charset "UTF-8";
/* CSS Document */
/*
Theme Name: magicBackground
Theme URI: http://wordpress.gordonfrench.com
Description: magicBackground has a unique backround that allows images to change color as you scroll through your wordpress posts. Something you just have to see for yourself. This wordpress theme also has a top block for adsense. You can set your code in the admin pannel..
Version: 1.1
Author: Gordon French
Author URI: http://gordonfrench.com/
Tags:tan,brown,right-sidebar,fixed-width,two-columns,orange 

	French v1.1
	 http://gordonfrench.com/

	This theme was designed by Gordon French,
	whose portfolio can be found at http://gordonfrench.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

body {background:url(images/top.png) #4d3c06 repeat-x; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif}
#container { width: 952px; height:100%; margin: 0 auto; position:relative; z-index:5;  }

#bgTop  {background: url(images/top.png) repeat-x; height:366px; width:100%}
#bgBottom  { position:relative; bottom:-50px; background: url(images/bottom.png) repeat-x; height:412px; width:100%; margin-top:-412px;  }
#topLeft { position:fixed; top:0px; left:0px; background:url(images/topLeftGlow.png); width:418px; height:239px; z-index:5}
#topRight { position:fixed; top:0px; right:0px; background:url(images/topRightGlow.png); width:418px; height:239px; z-index:5}

#bottomLeft { position:fixed; bottom:0px; left:0px; background:url(images/bottomLeftGlow.png); width:449px; height:224px; z-index:5}
#bottomRight { position:fixed; bottom:0px; right:0px; background:url(images/bottomRightGlow.png); width:434px; height:224px; z-index:5}
#bottomCenter { position:fixed; bottom:-150px; background:url(images/bottomCenter.png) center no-repeat; width:100%; height:536px; z-index:5}

/* basics */
a { text-decoration:none}
.aligncenter { display:block; margin-left:auto; margin-right:auto}
.alignleft { float: left; width:100%}
.alignright {float: right;  width:100%}
#recent-posts-3 { font-size:80%;}

#clearfloat { position:relative; clear:both; height:0; font-size: 1px; line-height: 0px;}
.clear {clear: both;}



/* header */
#header { position:relative; background: url(images/header.png) no-repeat; height:230px; margin-left:10px; margin-top:80px; margin-bottom:-75px; z-index:3} 
	/* h1 header text */
	#header h1 { position: relative; margin-bottom:-50px; z-index:20; left:20px; top:-60px; font-size:250%; font:"Arial Black", Gadget, sans-serif  }
	#header h1 a {color:#f3f0e0}
	#header h1 a:hover {color:#bc7c30}
	/* Blog Description */
	#description { position:relative; z-index:15; margin-bottom:-20px; top:-15px; left:20px; color:#cea65c }
	
	/* RSS Logo */
	#rss { position:relative; top:-220px; left:700px; z-index:20;}
	
	/* logo */
	#logo { position:relative; height:155px; top:-50px; left:-30px; width:500px; }
	/* Search box in header */
	#search { position:relative; background:url(images/searchBox.png) no-repeat;  width:300px; height:59px; top:2px; left:590px; padding:0px 0px 0px 0px;}
		#searchForm{ position:relative; top:-15px; left:20px}
		#searchBTN{ position:relative; top:-50px; left:210px}
	/* adsense in header */
	#topAds { position:relative;  width:728px; height:90px; margin:-210px 0 -10px 90px; }
	


	
	/* Navigation */
	#nav { position:relative; width:902px; left:-22px; top:-5px; z-index:1;}
	#nav li { float:left; padding:4px 10px 0px 10px; font-size:11px; list-style-type:none;}/* pages GREEN */
	.pagenav { position:relative; top:-40px; left:10px; color:#decd9e}
	
	
	#nav li ul li { display:block; position:relative; left:-38px; top:5px; padding-left:10px; height:15px; margin:0;  }/*level 1 */ 
	#nav li ul li li {position:relative; top:0px; background:#e4d5ac; left:0px; margin:0; padding:0; display:none; padding:0px 0px 0px 10px; margin-left:-50px}/*level 2 */ 
	#nav li ul li li li  {position:relative; background:#e4d5ac; margin:0; padding:0px 10px 0px 10px; margin-left:-50px;}/*level 3 YELLOW*/ 
	
	#nav li ul li:hover { display:block;}
	#nav li ul li li:hover { display:block; }
	#nav li ul li li li:hover { display:block;}
	
	#nav li ul li:hover li { display:block;}
	
	
	#navRight {position: relative; top:-18px; left:8px; height:18px; width:12px; float:right}
	#navLeft{ position:relative; height:18px; width:12px; margin-left:-12px; top:0px; z-index:10;}
	
	#nav, #nav a:link, #nav a:visited { color:#423306}
	#nav a:hover { color:#9b813b}
	


/* MainContent */
#mainWrap { position:relative; top:-23px; float:left;}
#mainContentTop{ position:relative; background:url(images/contentTop.png) no-repeat; height:25px; width:621px; left:21px; margin-bottom:-20px}
#mainContentBottom{ position:relative; background:url(images/contentBottom.png) no-repeat; height:18px; width:621px; left:16px; margin-bottom:-30px}
#mainContent{position:relative; background:url(images/contentMain.png) repeat-y; left:21px; width:560px; padding:0px 30px 0px 30px}
	#mainContent h2{position:relative; background:url(images/titleBoxDate.png) no-repeat; width:638px; height:55px; left:-40px; padding:12px 0px 0px 30px; top:-15px; margin-bottom:-45px; z-index:50;}
	.time { position:relative; left:470px; top:-31px; width:90px; text-align:center; font-size:60%; margin-bottom:-20px; color:#f9f5ec; z-index:55;}
	#mainContent a { color:#b57132 }
	#mainContent a:hover { color:#f1ead8}
	
	#mainContent h2 a { color:#614907 }
	#mainContent h2 a:hover { color:#d06615}


	#nav_link {margin-bottom:10px; font-size:60%; text-align:right;}
	.page_number {padding-left:10px}
	#nav_link a:link { color:#f9f5ec}
	#nav_link a:hover { color:#bc7c30}
	
	#tags { font-size:60%; margin-top:5px; margin-bottomp:10px;}
	#postmetadata{ font-size:80%;}
	
	#previous_next { text-align:right; }
	
	
	#comments { margin-bottom:-16px}


	

/* Sidebar */
#sidebar { position:relative; float:right; top:40px; width: 280px; padding: 0px 0px 10px 0px; margin-right:20px; margin-top:-7px;}
	#sidebarContentTop {background: url(images/sidebarTop.png) no-repeat; width:299px; height:21px; margin-bottom:-16px }
	#sidebarContentBottom {background: url(images/sidebarBottom.png) no-repeat; width:299px; height:23px; }
	#sidebarContent{ background:url(images/sidebarContent.png) repeat-y; width:259px; margin-bottom:-16px; padding-right:40px; }
	
	#sidebarContent li{ list-style-type:none; padding-bottom:10px}
	#sidebarContent h2 { position:relative; left:-50px; top:-20px; background:url(images/sidebarTitleBox.png) no-repeat; width:282px; height:50px;
							padding: 15px 0px 0px 25px; font-size:110%; margin-bottom:-30px; font-weight:normal;}
	
	#sidebarUL { padding: 0px 0px 0px 0px; margin:0px 0px 40px 0px;}
	#linkcat-2 li { position:relative; left:-40px; padding:0; margin:0}
	
	#sidebar ul a { color:#816008}
	#sidebar ul a:hover { color:#e5d9b8}
	
	#sidebar p { margin:0; padding:0; padding-right:10px}
	
	#sidebar ul li { margin:0; padding:0; }
	#sidebar .widget_archive { text-align:left; padding:0; margin-left:-35px;}
	#sidebar .widget_archive h2 { margin-left:30px;}
	
	
	#calendar_wrap { position:relative; left:25px;}
	#calendar_wrap caption { color:#e8dcbf; font-size:130%; padding-bottom:5px}
	#calendar_wrap #prev {  }

/* Footer */
#footer { position:relative; padding:0px 10px 0 10px; margin-left:30px; font-size:90%; width:580px; text-align:center;} 
	#footer p { margin: 0; padding: 10px 0; color:#cdbe94}
	#footer a {color:#fdf0d7 }
	#footer a:hover {color:#bd7324}





/* Safari Fixes */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
#mainContentTop{ margin-bottom:-19px}
/*#bgBottom  { position:relative; bottom:0px; background: url(images/bottom.png) bottom repeat-x; height:412px; width:100%; margin-top:-400px}*/
#mainWrap {top:0px;}
#sidebar { top:60px;}
#footer { top:25px;} 
#nav {top:0px; }

}