/*
Theme Name: Moto
Theme URI: http://www.nashvillemotorcyclerepair.com/
Description: Made specifically for Nashville Motorcycle Repair, this red and tan theme celebrates motorcycles.
Author: Brad Blackman
Author URI: http://www.chrome47.com
Version: 1.0
.
Somewhat inspired by Art Deco styles, this theme is clean with a contemporary, yet retro, twist.
.
*/

/* FONTS */
@import url(http://fonts.googleapis.com/css?family=Federo|Open+Sans:400italic,700italic,400,700);


/* UNIVERSAL */
* { padding:0; margin:0 ;}

body {
	background: #b72126 url(images/zigzagbg.png) repeat; /* repeating zig-zag background art */
	text-align:center; /* just in case the main #wrapper doesn't center properly */
	font: 18px/30px "Open Sans", Verdana, sans-serif; /* the default font. Nice, legible sans-serif. */
	color: #000; /* ensures the body text is black */
}
h1, h2, h3, div.menu-navbar-container ul li { font-family: 'Federo', sans-serif; font-weight:normal; } /* The Frasier-esque font that goes well with the Art Deco theme we've established. */

h2 {color: #ccba91; text-decoration:none;}
a {color: #ccba91; text-decoration:none;}
a:hover {color: #b3a37f;}
hr{display:none;} /* horizontal rules are presented visually with graphics in the background, so we don't need to see them */

#wrapper { 
	background-color:#fff1d0;
	padding:0px 10px 10px; /* no padding at the top, 10px everywhere else */
	width: 940px; /* 960px wide grid minus 10px on either side */
	margin-left:auto; margin-right:auto; /* centers everything */
	margin-bottom:60px; /* a little breathing room at the bottom of the page */
	text-align:left; /* the body is centered to ensure the #wrapper sits center, but the text needs to align left. */
}
ul.nav { list-style:none;}
ul.nav li { display:inline;}
#content { }

/* HEADER */
#header { background: url(images/header.png) no-repeat 0px 0px; height:274px; padding:0px; width:960px; margin-left:-10px;}
#header img.logo {margin-left:34px; margin-top:2px; float:left;}

/* HEADER NAVIGATION MENU - OLD VERSION: now commented out since the background image approach isn't being used anymore */
/* #header ul.nav { float:left; height:225px; }*/
/* #header ul.nav li a { height:224px; display:block; float:left; background: url(images/nav.png) 0px 0px;}
/*#header ul.nav li a span { display:block; text-indent:-9000px; } /* hides the text so we can see the pretty styling. There isn't a version of Neutraface that works with @font-face just yet. It has to be display: block because spans by default are inline elements and not block elements. */
/* Background shifting allows for using one large sprited nav background image. Unfortunately the hover state can't be done with a simple background-y: -225px*/
/*#header ul.nav li.home a {width: 105px; background-position: 0px 0px;}
/*#header ul.nav li.home a:hover {width: 105px; background-position: 0px -225px;}
/*#header ul.nav li.loc a { width: 158px; background-position: -105px 0px; }
/*#header ul.nav li.loc a:hover { width: 158px; background-position: -105px -225px; }
/*#header ul.nav li.rates a {width: 113px; background-position: -263px 0px;}
/*#header ul.nav li.rates a:hover {width: 113px; background-position: -263px -225px;}
/*#header ul.nav li.blog a {width: 112px; background-position: -376px 0px;}
/*#header ul.nav li.blog a:hover {width: 112px; background-position: -376px -225px;}

/* HEADER NAVIGATION MENU - NEW VERSION */
#header div.menu-navbar-container ul {float: right; list-style:none; margin-top:0px; display:inline; list-style:none;}
#header div.menu-navbar-container ul li {text-transform: uppercase; padding: 10px; display:inline; border-right: 2px dashed #ccba91; font-weight:normal; letter-spacing: 0.1em;}
#header div.menu-navbar-container ul li:last-child {border: 0; padding-right:20px;}
#header div.menu-navbar-container ul li a {color:#ccba91;}
#header div.menu-navbar-container ul li a:hover {color:#f7e7c3;}

/* SHADOW/EMBOSS EFFECT ON NAV MENU */
#header div.menu-navbar-container ul li {
	text-shadow: 
	/* DARK */ 	0 1px 1px /*#2f140b*/ rgba(47,20,11,0.6), 
	/* LIGHT */ 0 -1px 1px /*white*/ rgba(255,255,255,0.3);
}
#header div.menu-navbar-container ul li a:hover {
text-shadow: 0 0 5px #ccba91, 0 0 8px #ccba91, 0 0 11px #ccba91, 0 0 11px #ccba91;
}


/* ROTATOR */
div.rotator {float: left;}
div.rotator ul li { float:left; position:absolute; list-style: none; }
div.rotator ul li.show { z-index:500 }

/* HOME PAGE */
p.blurb { display:block; width:280px; float:left; margin-left:640px;}
#contact-hours { clear:both; background: url(images/contact-hours-taller.png) center; overflow:auto; display:block;}
#contact-hours h3 {text-indent: -9000px;} /* hides the text so we can use the prettier image. see #nav CSS */
#contact-hours p {position:relative; top:0px; width:300px; line-height:24px;} /* top edge moves up to accomodate where text came out */
#contact-hours a {font-weight:bold;}
#contact, #hours {float: left; width: 460px; }
#contact p {left:180px;} /* left edge moves to accomodate visual styling */
#hours p {left:150px;} /* left edge moves to accomodate visual styling */
iframe.fb { display:block; margin-top: -20px;}

/* PAGES */
div.page ul {padding-left:20px; padding-bottom:20px;}
div.page ul li {padding-bottom: 10px;}
div.page a {font-weight:bold;}

/* BLOG */
div.blog, div.page { width: 620px; float:left; display:block;}
div.blog p, div.page p { padding-bottom: 1em;}
div.blog a {font-weight:bold;}
div.blog ul {padding-left:20px; padding-bottom:20px;}
div.blog ul li {padding-bottom: 10px;}
p.meta { margin-top:15px; margin-bottom:40px; font-size:14px; font-weight:bold;}
div.wp-caption {display:block; padding:10px 0px 0px 10px; background:#ead8ae; margin-left:5px; margin-right:5px;}
div.wp-caption p {text-align:center;}
.alignright {float: right;}

/* SIDEBARS */
#sidebar { width:290px; float:left; margin-left:20px; display:inline;}
#sidebar ul { list-style:none; padding-bottom:20px;}
.pagesidebar h3 {text-indent:-9000px; width:280px; height:30px; display:block; }
.pagesidebar #contact h3 { background: url(images/contact-hours.png) -49px -21px; }
.pagesidebar #hours h3 { background:url(images/contact-hours.png) -511px -21px; margin-top:20px;}
.pagesidebar #hours, .pagesidebar #contact { width:290px; margin-bottom:10px;}
.pagesidebar iframe.fb { display:block; margin-top: 0px;}
#sidebar a {color:#000; font-weight:bold;}
#sidebar a:hover {color:#b72126;}

/* COMMENTS */
ol.commentlist {list-style:none;}
ol.commentlist li.comment { margin-top:15px; margin-bottom:30px;}

/* FOOTER */
#footer { clear:both; text-align:center; padding-top: 90px; background: url(images/footer.png) no-repeat; padding-bottom: 10px; margin-left:-10px; width:960px;}
#footer ul.nav {display:block; width: 380px; text-align:right; float:left; }
#footer ul.nav li {padding-left:10px;}
#footer ul.nav a {color:#000; text-decoration:none;}
#footer ul.nav a:hover {color: #b72126;}
#footer img.motto { float:left; margin-top:-15px; padding-left:20px; padding-right:20px;}
#footer p.copy {display:block; width: 380px; text-align:left; float:left;}
#footer p.credit { font-size:10px; clear:both; color:#ccba91; padding-top:10px;}
#footer p.credit a {color:#ccba91; text-decoration:none;}
#footer p.credit a:hover {color:#b72126;}