/*
Theme Name: Road Hug
Theme URI: http://zackbrand.com/
Description: Custom Theme for Road Hug
Author: Zack Brand
Author URI: http://zackbrand.com/

================================================================
	1: General
		1.a: HTML
		1.b: Links
		1.c: Misc
	2: Page
	3: Header
	4: Pages Menu
	5: Content
		5.a: Post
		5.b: Entry
		5.c: Post Metadata
		5.d: Comments
	6: Components
	7: Sidebar
	8: Footer
================================================================*/


/* 1: Required by Wordpress
================================*/

img.alignright {
			padding: 3px;
			display: block;
			margin: 10px;
			/*border: 3px double #bbb;*/
			float: right;
			display:block;
}
img.alignleft {		
			padding: 3px;
			display: block;
			margin: 10px;
			/*border: 3px double #bbb;*/
			float: left;
			display:block;
}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {
			padding: 3px;
			display: block;
			margin: 10px;
			/*border: 3px double #bbb;*/
			float: right;
			display:block;
}
a img.alignleft {
			padding: 3px;
			display: block;
			margin: 10px;
			/*border: 3px double #bbb;*/
			float: left;
			display:block;
}

a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

/* 1: General
================================*/
	
	/* 1.a: HTML
	================================*/
		body, h1, h2, h3, h4, p, ol, ul, li, img, a {
			margin:0; padding:0;
			list-style-type:none;
			border:none;
			outline:none;
			font-weight:400;
			font-size:1em;
		}
		body { 
			background:#f1e6ef url(images/bg.png) top center no-repeat;
			font-family:Helvetica, Arial, sans-serif;
			color:#835A7A;
		}
		
	/* 1.b: Links
	================================*/
	a {color:#604259; text-decoration:underline;}
	#content a:focus, #content a:active,
	#footer a:focus, #footer a:active { color:#fff; background:#835B7A;}
	a:hover, #sidebar a:hover, #footer a:hover {
		color:#000;

	}
	
	/* 1.c: Misc
	================================*/
	::-moz-selection { color: #000;  background: #CBA7C3; }
	::selection      { color: #000;  background: #CBA7C3; }
	.description {display:none;}
	
/* 2: Page
================================*/
	.pagetitle {margin:0 0 1em;}
	#page {width:957px; margin:360px auto 0;}
	
/* 3: #Header
================================*/
	#headerpre h2 {
		display: block;
		margin:-90px auto 0;
		width:200px; height:100px;
		text-indent:-9999em;
}

	#headerpre h2 a {
		display:block;
		height:100px;
		outline:none;
		border:none;
		/*margin-left:500px;
		margin-top:300px;*/
}


	.roadsign{
		height:190px;
		margin-left:580px;
		margin-top:-315px;
	}
	.roadsign li {display: block; float: none; padding:0 0 0 55px;}
	.roadsign {padding:0 15px 0 30px}


	.roadsign .food, .roadsign .food a {
		display:block;
		width:193px;
		height:50px;
		margin-top:3px; /* tweaked this number to get the rollover image placement right, was 5px */
		/*background-color: #00FFFF;*/
		text-indent:-9999em;
	}
	.food a {
	margin-left:-64px; /* tweaked this number to get the rollover image placement right */
	}
	.food a:hover {
	background-image: url(images/bg-food-on.png); background-position: 0 -4px;
	}	
	
	.roadsign .fashion, .roadsign .fashion a {
		display:block;
		width:245px; /* tweaked this number to get the rollover image placement right */
		height:50px; 
		margin-top:1px; /* tweaked this number to get the rollover image placement right, was 5px */
		/*background-color: #00FFFF;*/
		text-indent:-9999em;
	}
	.fashion a {
	margin-left:-64px; /* tweaked this number to get the rollover image placement right */
	}
	.fashion a:hover { /* added this section for rollover image */
	background-image:url(images/bg-fashion-on.png);
	/*background-color: #00FFFF;*/
	}
	
	.roadsign .music, .roadsign .music a {
		display:block;
		width:205px;
		height:57px; /* tweaked this number to get the rollover image placement right, was 50px */
		margin-top:5px;
		/*background-color: #00FFFF;*/
		text-indent:-9999em;
	}
	.music a {
	margin-left:-64px; /* tweaked this number to get the rollover image placement right */
	}
	.music a:hover {
	background-image: url(images/bg-music-on.png);
	}


	#headerimg h1 {
		display: block;
		margin-left:175px; /* new added this part */
		/*margin:-90px auto 0;*/
		width:700px; height:100px;
		text-indent:-9999em;
		/*background-color:#00FF33;  new added this part - just for testing */
}

	#headerimg h1 a {
		display:block;
		height:100px;
		outline:none;
		border:none;
		margin-left:100px;
		margin-top:20px; /* change this according to how many roadsign styles above there are .. initially was -100 changed to 100 */.
}
	

/* 4: Pages Menu
================================*/
	.menu{
		height:190px;
		margin:15px 0 20px;
		background:url("images/symbols.png") no-repeat scroll -1230px -140px transparent;
	}
	.menu li {display:inline; float:left; padding:0 0 0 45px;}
	.menu .nav-journey {padding:0 30px 0 0px}
	.menu .nav-story, .menu .nav-story a {

		display:block;
		width:150px;
		height:160px;
	}
	.menu .nav-story a {
		background:url("images/symbols.png") no-repeat scroll 0 0;
		text-indent:-9999px;
	}
	.menu .nav-story a:hover, .menu .nav-story a:active, .menu .nav-story a:focus {
		background:url("images/symbols.png") no-repeat scroll 0 -160px;
	}
	.menu .nav-journey, .menu .nav-journey a {
	margin-left:20px;
		display:block;
		width:190px;
		height:160px;
	}
	.menu .nav-journey a {
		background:url("images/symbols.png") no-repeat scroll -200px 0;
		text-indent:-9999px;
	}
	.menu .nav-journey a:hover,.menu .nav-journey a:active,.menu .nav-journey a:focus {
		background:url("images/symbols.png") no-repeat scroll -200px -160px;
	}
	.menu .nav-america, .menu .nav-america a {
		display:block; 
		width:195px; 
		height:160px;
	}
	.menu .nav-america a {
		background:url("images/symbols.png") no-repeat scroll -400px 0;
		text-indent:-9999px;
	}
	.menu .nav-america a:hover,.menu .nav-america a:active, .menu .nav-america a:focus {
		background:url("images/symbols.png") no-repeat scroll -400px -160px;
	}
	.menu .nav-sponsor, .menu .nav-sponsor a {
		display:block;
		width:180px;
		height:160px;
	}
	.menu .nav-sponsor a {
		background:url("images/symbols.png") no-repeat scroll -600px 0;
		text-indent:-9999px;
	}
	.menu .nav-sponsor a:hover, .menu .nav-sponsor a:active, .menu .nav-sponsor a:focus {
		background:url("images/symbols.png") no-repeat scroll -600px -160px;
	}

/* 5: Content
================================*/
	.navigation {height:15px; margin:0 0 20px; }
	.prev-post {float:left;}
	.next-post {float:right;}
	#content {float:left; width:520px; margin:0 10px 0 50px;}
	.post-edit-link {display:inline; margin:0 0 5px; width:6em;}
	
	/* 5.a: Post
	================================*/
	#content h2, .pagetitle {
			margin:0 0 10px;
			color:#604259;
			font:2.9em Helvetica, Arial, sans-serif;
			font-weight:700;
			border-bottom: 1px solid #CBA7C3;
		}
		#content h3 {
			color:#604259;
			font:2.5em Helvetica, Arial, sans-serif;
			width:500px;
			border-bottom: 1px solid #CBA7C3;
		}
		.pagetitle {text-transform:capitalize;}
		#content h3 a {
			width:500px;
			text-decoration:none;
			color:#835B7A;
			display:inline-block;
			border:none;
			text-decoration:none;
			background:transparent;
		}
		#content h3 a:hover{color:#604259; text-decoration:none;}
		#content h3 a:focus, #content h2 a:active {color:#000; background:#CBA7C3; border:none;}
		.post-wrap {clear:left; border:5px solid #000; padding:5px;}
		.results .post {margin:0 0 10px;}
		.date {font-style:italic; color:#9987A2; font-size:0.8em;}
		#contact h3 {margin:20px 0 0;}
		
	/* 5.b: Entry
	================================*/
		.entry div.wp-caption {border:1px solid #ccc; margin:0 0 30px;}
		.entry h4 {margin:0; padding:0;}
		.entry {font-size:0.85em; margin:0}
		.entry a {font-size:0.95em;}
		.entry p, #components p {padding:10px 0; font-size:1.3em; color:#835A7A;}
		.entry p.wp-caption-text {
			font:0.6em Verdana, Arial, sans;
			background:#F3F3F3;
			text-align:center;
			margin:0;
			padding:0 0 5px;
		}
		.entry ol {padding: 0 0 20px 20px;}
			
	/* 5.c: Post Metadata
	================================*/
		.postmetadata {
			margin:0 0 40px; padding:5px 0 0;
			border-top:1px solid #EBD9E2;
			line-height:1.3em;
			color:#9987A2;
			font-size:0.8em;
			clear:left;
		}
		.nocomments {margin:0 0 10px;}
		
	/* 5.e: Comments
	================================*/
		h4 {color:#CBA7C3;}
		#comments {font:2em Helvetica, Arial, sans-serif; margin:10px 0 0; padding:5px 0 0; border-top:1px dashed #000;}
		#respond h4 {font:2em Helvetica, Arial, sans-serif;}
		.comment {margin:0 0 20px; padding:0 0 10px; border-bottom:1px dotted #CBA7C3; width:500px;}
		.comment p {color:#835A7A;}
		.comment-meta {font-size:0.8em; font-style:italic; margin: 2px 0 5px;}
		.comment-meta a{border:none; color:#9987A2;}
		.fn, .fn a {font-weight:700; margin:0 0 10px;}
		#commentform p {margin:0 0 2px;}
		#respond {margin:0 0 20px;}
		
/* 6: Components
================================*/
	#intro-video  {
		margin:0 0 20px;
		padding:0 0 20px 30px;
		width:900px;
		text-align:justify;
		background:url("images/symbols.png") no-repeat scroll -1230px bottom transparent;
	}
	#intro-video object, #intro-video p {width:800px; margin:0 auto 20px; display:block; font-size:1.8em;}
	#intro-video p#first:first-letter {font-size:1.2em; font-weight:700;}
	#intro-video object, #girls li {border: 7px solid #845B7B;border-radius:8px; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px;}
	#girls li#girls-contact {border:none;}
	li#latest-posts {border:none;}
	#girls li {margin:0 0 10px; float:right;}

/* 7: Sidebar
================================*/
	.sidebar {font:0.8em/1.5 Helvetica, Arial, sans-serif;}
	.sidebar h2 {font-weight:700; color:#C7A3C1; font:1.9em Helvetica, Arial, sans-serif;}
	.sidebar a {display:inline-block;}
	.sidebar ul ul {margin:0 0 10px; padding:0 0 10px; border-bottom:1px dashed #CBA7C3;}
	.sidebar #follow ul {border:none;}
	#searchform {
		position: relative;
	}
	input#s {
		color:#fff;
		width:80px;
		padding:2px 0;
		background:#AEA0B6;
		border:4px solid #845B7B;
		border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px;
	}
	#searchsubmit {
		vertical-align:top;
		background:url("images/symbols.png") no-repeat scroll -1178px -305px ;
		border:0 none;
		cursor:pointer;
		height:25px; width:75px;
		text-indent:20px;
		margin-left:10px;
			font-family:Helvetica, Arial, sans-serif;
			color:#835A7A;
			font-weight:bold;
	}
	#leftbar {width:110px; float:left; display:inline; margin:0 0 0 30px}
	#leftbar #follow li {margin:0 0 15px; display:block;}
	#follow h2 {display:none;}
	#twitter, #twitter a {
		display:block;
		width:100px;
		height:125px;
	}
	#twitter, #twitter a {
		display:block;
		width:100px;
		height:125px;
		background:url("images/symbols.png") no-repeat scroll -800px 0;
		text-indent:-9999px;
	}
	#twitter a:hover, #twitter a:active, #twitter a:focus {
		background:url("images/symbols.png") no-repeat scroll -800px -160px;
	}
	#facebook, #facebook a {
		display:block;
		width:100px;
		height:125px;
		background:url("images/symbols.png") no-repeat scroll -900px 0;
		text-indent:-9999px;
	}
	#facebook a:hover, #facebook a:active, #facebook a:focus {
		background:url("images/symbols.png") no-repeat scroll -900px -160px;
	}
	#youtube, #youtube a {
		display:block;
		width:100px;
		height:141px;
		background:url("images/symbols.png") no-repeat scroll -1000px 0;
		text-indent:-9999px;
	}
	#youtube a:hover, #youtube a:active, #youtube a:focus {
		background:url("images/symbols.png") no-repeat scroll -1000px -160px;
	}
	#foursquare, #foursquare a {
		display:block;
		width:100px;
		height:130px;
		background:url("images/symbols.png") no-repeat scroll -1100px 0;
		text-indent:-9999px;
	}
	#foursquare a:hover, #foursquare a:active, #foursquare a:focus {
		background:url("images/symbols.png") no-repeat scroll -1100px -160px;
	}

	#mailchimp, #mailchimp a {
top: -50px;
	}
 
	
	#rightbar {width:160px; float:right; display:inline; text-align:right; margin:0 30px 10px 0}
	#girls ul {text-align:left; border-bottom:none;}
	#girls h2 {display:none;}
	#img-darla, #img-darla a {
		display:block;
		width:134px;
		height:200px;
		background:url("images/photos.jpg") no-repeat scroll 0 -200px;
		text-indent:-9999px;
	}
	#img-darla a:hover, #img-darla a:active, #img-darla a:focus {
		background:url("images/photos.jpg") no-repeat scroll 0 0;
	}
	#img-julia, #img-julia a {
		display:block;
		width:134px;
		height:200px;
		background:url("images/photos.jpg") no-repeat scroll -150px -200px;
		text-indent:-9999px;
	}
	#img-julia a:hover, #img-julia a:active, #img-julia a:focus {
		background:url("images/photos.jpg") no-repeat scroll -150px 0;
	}
	#img-sammy, #img-sammy a {
		display:block;
		width:134px;
		height:200px;
		background:url("images/photos.jpg") no-repeat scroll -300px -200px;
		text-indent:-9999px;
	}
	#img-sammy a:hover, #img-sammy a:active, #img-sammy a:focus {
		background:url("images/photos.jpg") no-repeat scroll -300px 0;
	}
	#girls-contact, #girls-contact a {
		display:block;
		width:150px;
		height:34px;
		background:url("images/symbols.png") no-repeat scroll top right;
		text-indent:-9999px;
	}
	#girls-contact a:hover, #girls-contact a:active, #girls-contact a:focus {
		background:url("images/symbols.png") no-repeat scroll bottom right;
	}
	
	#latest-posts, #latest-posts a {
		display:block;
		width:200px;
		height:34px;
		background:url("images/symbols2.png") no-repeat scroll top right;
		text-indent:-9999px;
	}
	#latest-posts a:hover, #latest-posts a:active, #latest-posts a:focus {
		background:url("images/symbols2.png") no-repeat scroll bottom right;
	}	
	
/* 8: Footer
================================*/
	#footer {
		clear:both;
		text-align:center;
		color:#CBA7C3;
		border-top:1px dashed #CBA7C3;
		padding:10px 0 0;
		margin:0 auto;
		font-size:0.9em;
	}
	#footer a{color:#835A8F;}
	#footwrap {width:576px; margin:0 auto;}
	#footer h2 {
		text-align:left;
		font-size:1.1em;
		text-transform:uppercase;
		font-weight:700;
		color:#604259;
		font-family:Helvetica, Arial, sans-serif;
	}
	#footer .widget { display:block; float:left; margin:15px 30px 15px 0; }
	#footer #credits {
		margin:0 0 10px -192px;
		padding:0 0 10px;
		border-bottom:1px dashed #CBA7C3;
		width:960px;
	}
	#footer li li {padding:0 0 3px; text-align:left;}
	#credits h2 {display:none;}
	#credits li {display:inline; margin:0 5px 0 0;}