/*
    Document   : Ephy Clarke Style Sheet
    Created on : Feb 27, 2010, 1:11:30 PM
    Author     : Ben Palmer www.benpalmer.info
    Description:
        On screen style sheet for Ephy Clarke band website
*/

body { background:#BCC2B6; }

#container { width:780px; margin:0 auto; }
h1 { display:none; }

ul#socialnav { overflow:hidden; float:right; border-left:1px solid #999; margin:0 0 5px 0; }
ul#socialnav li { float:left; font-family:Georgia; font-size:.7em; font-style:italic; }
ul#socialnav li a { display:block; padding:5px 20px 2px 20px; color:#666; text-decoration:none; border-right:1px solid #999; }
ul#socialnav li a:hover { color:#333; }

#header { background:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; overflow:hidden; margin:0 0 1px 0; width:780px; }
a#logo { display:block; width:135px; height:27px; background:url('../images/ephy_clarke_logo.png'); text-indent:-9999px; margin:15px; position:absolute; }

ul#nav { overflow:hidden; float:right; margin:100px 15px 0 0; border-left:1px solid #ccc; }
ul#nav li { float:left; font-family:Georgia; font-size:.7em; font-style:italic; }
a.btn { display:block; padding:8px 20px; color:#333; text-decoration:none; border-right:1px solid #ccc; cursor:pointer; }
a.active { background:url('../images/nav_active_bg.png') repeat-x left bottom; }

#main { background:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; overflow:hidden; padding:40px 0; overflow:hidden; margin:0 0 1px 0; }

#content { background:url('../images/main_bg.png'); overflow:hidden; }
#content p { font-size:.8em; line-height:1.2em; margin:0 0 15px 0; }

#gallery { background:#F6F7F2; overflow:hidden; }
#gallery p { font-size:.8em; line-height:1.2em; margin:0 0 15px 0; }
#gallery ul {  }
#gallery li { float:left; display:block; margin:0 15px 15px 0; width:140px; height:140px; }

#content #leftcol { width:490px; padding:15px; float:left; }
#gallery #leftcol { width:720px; padding:15px; float:left; }
h2 { font-size:1.5em; font-family:Georgia; font-weight:normal; font-style:italic; margin:0 0 15px 0; }
h2:after { content: " —"; }


#leftcol h3 { font-size:1em; font-family:Georgia; font-weight:normal; font-style:italic; margin:0 0 5px 0; }

.col { width:230px; float:left; }
.intro { margin:0 15px 0 0; }
.intro blockquote { font-size:1em; font-family:Georgia; line-height:1em; font-style:italic; }
.body p { font-family:Arial,Helvetica; }
.thumbnails { width:470px; }

#rightcol { width:230px; float:left; padding:15px; }
#rightcol h3 { font-size:1.5em; font-family:Georgia; font-weight:normal; font-style:italic; margin:0 0 15px 0; }
#rightcol h3:after { content: " —"; }
#rightcol p { font-family:Arial,Helvetica; }
#rightcol h4 { font-size:1em; font-family:Georgia; font-weight:normal; font-style:italic; margin:10px 0 5px 0; }
h4 a { color:#333; }
h4 a:hover { color:#f30; }

a.rounded { background:#333; padding:3px 10px 3px 10px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; color:#BCC2B6; text-decoration:none; font-size:12px; cursor:pointer; margin:0 2px 0 0; }
a:hover.rounded { background-color:#f60; color:#333; }

#footer { background:#333; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; overflow:hidden; padding:100px 20px 20px 20px; margin:0 0 20px 0; }
#footer p { color:#999; font-size:.7em; font-family:Arial,Helvetica; }

.song { margin:0 0 40px 0; border-bottom:1px dotted #333; padding-bottom:30px; }
a.listen { padding:3px 10px 3px 20px; background:#333 url('../images/listen_s01.png') center left no-repeat; }
a:hover.listen { background:#f60 url('../images/listen_s02.png') center left no-repeat; }
a.stop { padding:3px 10px 3px 20px; background:#333 url('../images/stop_s01.png') center left no-repeat; }
a:hover.stop{ background:#f60 url('../images/stop_s02.png') center left no-repeat; }


ul.player { font-family:Arial,Helvetica; overflow:hidden; }
ul.player li { float:left; }
ul.player li a { display:block; }

/* home */

#home_para {  }
#home_para p { font-size:1em; font-family:Georgia; line-height:1em; font-style:italic; margin:0 0 10px 0; }

/* contact */

#form_contact {}
#form_contact legend { display:none; }
#form_contact label[for] { display:block; }
#form_contact input[type=text] { font-family:Arial,Helvetica; font-size:11px; border:0; padding:5px 10px; width:210px; background:#ccc; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; color:#333; }
#form_contact textarea { font-family:Arial,Helvetica; font-size:11px; border:0; padding:10px; width:210px; background:#ccc; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; color:#333; height:150px; }
#form_contact input[type=submit] { background:#333; padding:1px 10px 1px 10px; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; color:#BCC2B6; text-decoration:none; font-size:12px; cursor:pointer; border:0; text-transform:capitalize; }
#form_contact input[type=submit]:hover { background-color:#f60; color:#333; }
label.error { color:red; }

/* shop */

.shop { width:475px; }
.shop p { font-family:Arial,Helvetica; }

.album { overflow:hidden; margin:0 0 40px 0; border-bottom:1px dotted #333; padding-bottom:30px; }
.pic { float:left; margin-right:15px; }
div.info { width:230px; float:left; }
div.info h3 { margin:0 0 20px 0; }
div.info h3 a { color:#333; }
div.info h3 a:hover { color:#f30; }

span.gbp { font-size:1.4em; color:#f30; font-style:italic; }
span.subtotal { font-size:1em; color:#f30; font-style:italic; margin:0 0 0 5px; }

ol#tracklisting { list-style-type:decimal; padding:0 0 0 20px; font-family:Arial,Helvetica; font-size:.8em; }
ol#tracklisting li { margin:0 0 15px 0; border-bottom:1px dotted #ccc; padding:0 0 15px 0; }
span.track { margin-right:10px; font-style:italic; }
span.preview {  width:65px; }
span.buy { }

#shipping { font-family:Arial,Helvetica; font-size:.8em; line-height:1.2em; border-top:1px dotted #333; padding-top:5px; }
#shipping span { display:inline-block; width:100px; font-weight:bold; }

/* news */

.article { margin:0 0 40px 0; border-bottom:1px dotted #333; padding-bottom:30px; }
.article h3 a { color:#333; }
.article h3 a:hover { color:#f60; }
small.date { font-style:italic; margin:10px 0; color:#666; font-family:Georgia; font-size:.8em; display:block; }

ul#subnav { font-family:Arial,Helvetica; font-size:.8em; line-height:1.2em; }
ul#subnav li { margin:0 0 5px 0; }
ul#subnav li ul { margin:5px 0 20px 0; border-top:1px dotted #333; padding-top:5px; }
ul#subnav a { color:#333; text-decoration:none; }
ul#subnav a:hover { text-decoration:underline; }

#images { margin:40px 0 0 0; }