/* ------- Styles for It's Rhyme Time ------- */

body { margin: 0px; padding: 0px; background: #35a;	 text-align: left; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 10px; color: #000; }
body.home { background: #35a; }
body.books { background: #35a url(images/backdrop_blue.jpg) repeat-x; }
body.about { background: #35a url(images/backdrop_pink.jpg) repeat-x; }
body.contact { background: #35a url(images/backdrop_yellow.jpg) repeat-x; }
body.critiques { background: #35a url(images/backdrop_green.jpg) repeat-x; }

* { margin: 0px; padding: 0px; }

#wrapper { position: relative; width: 960px; margin: 0 auto; background: url(images/page_middle.gif) repeat-y; }

/* ------- Images ------- */
img { border: none; margin: 0; padding: 0; }

.floatleft { float:left; }
.floatright { float:right; }
.clear { clear: both; }

a:active { outline: none; }
a:focus { outline: none; -moz-outline-style: none; }

/* ------- MASTHEAD ------- */
#masthead { width: 960px; height:250px; background: url(images/masthead.gif); }
#masthead p, #masthead p a { font-family: Arial, Verdana, Helvetica, sans-serif; font-style: normal; font-size: 1.2em; color: #fff; text-align: right; text-decoration: none; padding: 10px; margin: 0; }
#masthead p a, #masthead p a:link, #masthead p a:visited { font-size: 1em; padding: 0 5px; margin: 0; }
#masthead p a:hover { color: #da0; }
#masthead a.current, #footer a.current { font-weight: bold; }
.mastheadLogo {float: left; margin: 0; padding: 0; border: none; }
.mastheadPhoto {float: right; margin: 0; padding: 0; border: none; }

/* ------- CONTENT ------- */
#mainContent { float: right; margin: 0; padding: 0; width: 560px; position: relative; top: -120px; right: 60px; margin-bottom: -100px; }
#sideContent { float: left; margin: 0; padding: 0; width: 280px; position: relative; top: 0px; left: 10px; text-align: center; margin-bottom: -50px;  }

/* Text */
#mainContent h1 { font-family: 'Buda', serif; font-style: normal; font-weight: bold; font-size: 2.8em; color: #d40; text-align: center; margin-bottom: .2em; }
#mainContent h2 { font-family: 'Buda', serif; font-style: normal; font-weight: bold; font-size: 2em; color: #d40; }
#mainContent p, #mainContent ul { margin: 0; padding: 0 0 1em 0; font-family: 'Buda', serif; font-style: normal; font-size: 1.7em; line-height: 1.4em; color: #138; }
#mainContent a, #mainContent a:link, #mainContent a:visited { text-decoration: none; color: #d40; }
#mainContent a:hover { color: #f94; }
#mainContent a:active { color: #000; }

#sideContent p { font-family: 'Buda', serif; font-style: normal; font-weight: normal; font-size: 1.7em; line-height: 1.8em; color: #eef; }

/* ------- COPYRIGHT ------- */
#pageBottom { clear: both; width:960px; height:40px; background: url(images/page_bottom.gif); }
#pageBottom p { width: 300px; font-size: 1.1em; color: #eef; padding: 10px 0 0 340px; }

/* ------- FOOTER ------- */
#footer { clear: both; width:960px; height:100px; background: url(images/foot_bkgd.gif); text-align: center; }
#footer ul { margin: 0; padding: 0; font-family: Arial Black; font-size: 1.3em; color: #fff; height:90px; position: relative; top: 38px; }
#footer ul li { display: inline; margin: 0; padding: 0; list-style: none;}
#footer ul li a { text-decoration: none; }
#footer ul li a:link, #footer ul li a:visited { color: #fff; }
#footer ul li a:hover { color: #ff8; }
#footer ul li a:active { color: #000; }
#footer ul li.current a { color: #ff8; }
#footer ul li a.facebookBtn { background: url(images/btn_facebook_sm.gif); width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
#footer ul li a.facebookBtn:hover { background-position: 0 -24px; }
#footer ul li a.facebookBtn:active { background-position: 0 -48px; }
#footer p { clear: both; position: relative; right: 20px;}
#footer p, #footer p a { font-family: 'Kreon', Arial, sans-serif; font-size: 1em; color: #79e; text-align: right; text-decoration: none; padding: 0; margin: 0; }
#footer p a:hover { color: #fff; }
#footer p a:active { color: #000; }

/* ------- NAVIGATION ------- */
#mainNav { width: 960px; margin: 0; padding: 0; }
#mainNav ul { margin: 0; padding: 0; position: relative; left: 350px; width: 400px; }
#mainNav ul li { float: left; position: relative; margin: 0; padding: 0; list-style: none;}
#mainNav ul li a:link, #mainNav ul li a:visited { background-position: 0 0; }
#mainNav ul li a:hover { background-position: 0 -75px !important; }
#mainNav ul li a:active { background-position: 0 -150px !important; outline: none; }
#mainNav ul li.current a { background-position: 0 -225px !important; }
#mainNav ul li a { display: block; position: relative; }
#mainNav ul li a.booksBtn { background: url(images/btn_books.gif); width: 110px; height: 75px; top: 39px; }
#mainNav ul li a.aboutBtn { background: url(images/btn_about.gif); width: 155px; height: 70px; top: 11px; }
#mainNav ul li a.critBtn { background: url(images/btn_critiques.gif); width: 120px; height: 50px; top: 4px; }

#secondNav { width: 960px; height: 35px; margin: 0; padding: 0; text-align: right; }
#secondNav ul { margin: 0; padding: 0; font-family: Arial Black; font-size: 1.3em; color: #fff; position: relative; top: 4px; right: 20px; }
#secondNav ul li { display: inline; margin: 0; padding: 0; list-style: none;}
#secondNav ul li a { text-decoration: none; }
#secondNav ul li a:link, #secondNav ul li a:visited { color: #fff; }
#secondNav ul li a:hover { color: #ff8; }
#secondNav ul li a:active { color: #000; outline: none; }
#secondNav ul li.current a { color: #ff8; }
#secondNav ul li a.facebookBtn { background: url(images/btn_facebook.gif); width: 32px; height: 32px; display: inline-block; vertical-align: middle; }
#secondNav ul li a.facebookBtn:hover { background-position: 0 -32px; }
#secondNav ul li a.facebookBtn:active { background-position: 0 -64px; }

td { padding: 3px; }