/*
Theme Name: Arena
Theme URI: http://www.arenastudiosgallery.com/
Description: The wordpress theme for Arena Studios.
Version: 1.0
Author: Tom Leadbetter
Author URI: http://www.tomleadbetter.co.uk/
Tags: 


*/

/*========================
Reset
========================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;	padding: 0;	border: 0; outline: 0;	font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;	vertical-align: baseline;}
/* remember to define focus styles! */

body {line-height: 1; color: black;	background: white;}
ol, ul {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td { text-align: left;	font-weight: normal;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

body {background: url(images/grid.gif) center center repeat; font: normal 62.5%/1.35em Helvetica, arial, sans-serif; padding: 5px 0 0 0;}

a:focus {outline: 1px dotted #ccc; overflow: hidden;}
strong { font-weight: bold;}

h1, h2, h3, h4, h5 {color: #000; font-family: "Century Gothic", "Apple Gothic", AppleGothic, "Trebuchet MS",Arial,Helvetica,sans-serif;}

#skip {position:absolute; left: -99999px;}

#container {margin: 0 auto; position: relative; width: 940px;}

#nav {background: #000; width: 100%; overflow: hidden;}
#nav ul {margin: 0 auto; text-align: center; width: 940px;}
#nav li {display: inline;}
#nav li a {background: transparent; color: #fff; font-size: 1.3em; font-weight: bold; line-height: 4em; padding: 1.5em .7em; text-decoration: none;}
#nav li a:hover {background: #454545;}
#nav li.current_page_item a {background: #454545;}

a#logo {display: block; margin: 29px auto; text-align: center; width: 185px;}

#homeMainImage {border-top: 1px solid #565656; border-bottom: 5px solid #ccc;  margin: 0 auto;  width: 940px;}
#homeMainImage img {display: block; height: 275px; margin: 0; }




#prevBtn a, #nextBtn a {display: block; height: 280px; position: absolute; text-indent: -9999px; top: 111px; width: 131px;}
#prevBtn a:focus, #nextBtn a:focus {outline: none;}
#prevBtn a {background-image: url(images/prev.png); background-position: center left; background-repeat: no-repeat; left: -8px;}
#nextBtn a {background-image: url(images/next.png); background-position: center right; background-repeat: no-repeat; right: -8px;}
#prevBtn a:hover {background-image: url(images/prev-hover.png);}
#nextBtn a:hover {background-image: url(images/next-hover.png);}

#content {float: left; margin: 0; width: 940px;}

#entry {float: left; margin: 0 60px 0 0; width: 700px;}
#content h1 {color: #51000C; font-size: 4.5em; letter-spacing: -4px; line-height: 1.1em; margin: 0 0 .4em 0; font-weight: normal; }
#entry h1 + p {font-size: 1.3em; font-weight: bold;}
#content h2 {color: #F09113; font-size: 2.5em; letter-spacing: -2px; line-height: 1.6em; margin: 0 0 .4em 0;}
#content h3 {color: #51000C; font-size: 1.65em; letter-spacing: -1px; line-height: 1.6em; margin: 0 0 .4em 0;}
#content h4 {color: #333; font-size: 1.5em; letter-spacing: -1px; line-height: 1.6em; margin: 0 0 .4em 0;}
#content p {font-size: 1.2em; line-height: 1.7em; margin: 0 0 .9em 0;}
#content h2 a, #content h3 a, #content p a, #content li a {background: transparent; color:#51000C; text-decoration: underline;}
#content h2 a:hover, #content h3 a:hover, #content p a:hover, #content li a:hover {background:#51000C; color: #fff; text-decoration: none;}
#content img {padding: 4px; border: 1px solid #ccc;}
#content img.image-float-right {float: right; margin: 0 0 1em 2em;}
#entry ol {list-style-type: decimal; margin: 1.2em 1.2em 1.2em 3em;}
#entry ol li {font-size: 1.2em; margin: 0 0 .7em 0; padding: 0;}
#entry ul {list-style-type: none; margin: 1.2em 1.2em 1.2em 1.3em;}
#entry ul li {background: url(images/bullet-purple.png) no-repeat 0 .3em; font-size: 1.2em; margin: 0 0 .7em 0; padding: 0 0 0 1.5em;}

#entry ul.archivelist {background: none; margin: 0 0 1em 0; padding: 0;}
#entry ul.archivelist li {background: none; margin: 0; padding: 0;}
#entry ul.archivelist li h3 {background: none; display: block; margin: 0; padding: 0;}
#entry ul.archivelist li h3 a {background: transparent; color: #000; font-size: .7em; line-height: .6em; padding: .2em;}
#entry ul.archivelist li h3 a:hover {background: #000; color: #fff; text-decoration: none;}

#postdata {border-top: 1px solid #F09113; border-bottom: 1px solid #ccc; clear: both; float: left; font-size: 1.1em; margin: 3em 0; padding: 15px 0; width: 700px;}
#postdata p {font-weight: bold; margin: 0 0 1em 0;}
#postdata dl {border-left: 1px solid #000; float: left; margin: 0 0 0 0; padding: 0 .8em;}
#postdata p + dl {border-left: none; padding-left: 0;}
#postdata dt {float: left; margin: 0 0 0 0;}
#postdata dd {float: left; font-weight: bold; margin: 0 0 0 .5em;}
#postdata dd a {color: #51000C; text-decoration: none;}
#postdata dd a:hover {text-decoration: underline;}

#sidebar {float: left; margin: 8em 0 0 0; width: 180px;}
#sidebar h2 {color: #000; font-size: 1.6em; letter-spacing: -1px; line-height: 1em; margin: 0 0 .5em 0; font-weight: bold;}
#sidebar p {line-height: 1.5em; margin: 0 0 1.5em 0;}
#sidebar ul {margin: 0 0 2em 0;}
#sidebar ul li {display: block;}
#sidebar ul li a {color: #000; display: block; font-size: 1.1em; line-height: 1.3em; padding: .4em; text-decoration: none;}
#sidebar ul li a:hover {text-decoration: underline;}

/* =======================================================================

Home page stuffs

======================================================================= */

.col {float: left;}
.one {width: 280px;}
.two {width: 340px; margin: 0 20px;}
.one {background: url(images/col-border.gif) no-repeat 100% 0%;}
.one p {width: 240px;}
.three {background: url(images/col-border.gif) no-repeat 0% 0%; padding: 0 0 0 40px; width: 240px;}

#home #content {margin-top: 35px;}
#home #content h1 {color: #F09113; font-size: 2.1em; font-weight: bold; letter-spacing: -1px; line-height: 1em; margin: 0 0 1em 0;}
#home #content h2 {font-size: 2.1em; font-weight: bold; letter-spacing: -1px; line-height: 1em; margin: 0 0 1em 0;}
#home #content h2 a {background: transparent; color: #000; text-decoration: none;}
#home #content h2 a:hover {border-bottom: 1px solid #000;}
#home .two h3 {font-size: 1.8em; font-weight: normal; line-height: 1.2em; margin: 0 0 .8em 0;}
#home .two h3 a {color: #51000C; text-decoration: none;}
#home .two h3 a:hover {background: #fff; border-bottom: 1px solid #51000C;}
#home .two img {border: 1px solid #ccc; margin: 0 0 1em 0; padding: 4px;}
#content .three ul {margin-left: 0;}
#content .three li {background: none; display: block; margin: 0 0 2.5em 0; padding: 0;}
#content .three small {color: #333; display: block; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.1em; margin: 0 0 .7em 0;}
#content .three h3 a {background: transparent; color: #51000C; display: block; font-size: .9em; font-weight: normal; letter-spacing: -1px; line-height: 1.1em; margin: 0 0 .5em 0; text-decoration: none;}
#content .three h3 a:hover {background: #fff; text-decoration: underline;}
#content .three li p {font-size: 1.2em; line-height: 1.7em; margin: 0 0 .9em 0;}

/* =======================================================================

member page

======================================================================= */

#member #entry {float: left; padding: 0 0 0 0; width: 940px;}
#bio {background: transparent; float: left; width: 280px;}
#bio p:first-child {font-size: 1.3em; font-weight: bold;}
#bio p {padding-right: 10px;}

#contact {float: left; margin: 8em 0 0 20px; width: 280px;}
#contact img {border: 1px solid #ccc; margin: 0 0 5px 0; padding: 4px; width: 270px;}
#contact a.website {color: #000; display: block; float: left; font-size: 1.3em; font-weight: bold; margin: 0 0 10px 0; padding: .5em 5px; text-decoration: none; width: 270px;}
#contact a:hover.website {background: #000; color: #fff;}
#entry #contact ul {margin: 10px 0 0 5px;}
#entry #contact li {background: none; margin: 0; padding: 0;}
#entry #contact li a {background-position: 0 50%; background-repeat: no-repeat; border: none; color: #000; display: block; float: left; height: 16px; margin: 0 9px 10px 0; padding: 0; text-decoration: none; text-indent: -99999px; width: 16px;}
#entry #contact li a:hover {background-color: transparent;}
#entry li#delicious a {background-image: url(images/icon-delicious.png);}
#entry li#email a {background-image: url(images/icon-email.png);}
#entry li#facebook a {background-image: url(images/icon-facebook.png);}
#entry li#flickr a {background-image: url(images/icon-flickr.png);}
#entry li#lastfm a {background-image: url(images/icon-lastfm.png);}
#entry li#linkedin a {background-image: url(images/icon-linkedin.png);}
#entry li#myspace a {background-image: url(images/icon-myspace.png);}
#entry li#skype a {background-image: url(images/icon-skype.png);}
#entry li#twitter a {background-image: url(images/icon-twitter.png);}
#entry li#vimeo a {background-image: url(images/icon-vimeo.png);}
#entry li#youtube a {background-image: url(images/icon-youtube.png);}

#work {float: left; margin: 7.6em 0 0 20px; width: 340px;}
#work h2 {color: #000; line-height: 1em;}
#work ul {float: left; margin: 0 0 2em 0; width: 350px;}
#content #work li {background: none; display: inline; padding: 0;}
#work li a {float: left; border: 1px solid #ccc; margin: 0 10px 10px 0; padding: 2px;}
#work li a:hover {border: 1px solid #51000C;}
#work li a img {border: none; display: block; height: 71px; margin: 0; padding: 0; width: 71px;}

#memberlist {background: #51000C; clear: both; float: left; margin: 50px 0 50px -10px; padding: 15px 10px 5px 10px; width: 940px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#memberlist h2 {color: #fff; font-size: 1.8em;}
#memberlist ul {float: left; margin: 20px 0 0 0;}
#memberlist li {background: url(images/memberlist-bg.gif) 0 3px no-repeat!important; float: left; padding: 0 0 15px 15px; margin: 0 2em 0 0;}
#memberlist li.current_page_item {background: url(images/memberlist-bg-tick.gif) 0 2px no-repeat!important; }
#memberlist li a {color: #fff; font-size: 1.4em; font-weight: bold; text-decoration: none;}
#memberlist li a:hover {text-decoration: underline;}


/* =======================================================================

Contact form

======================================================================= */

#contactpage #entry {float: left; padding: 0 0 0 0; width: 450px;}

#contactpage form {float: left; width: 450px;}
ol#contactform {float: left; list-style-type: none; margin: 0; padding: 0; width: 450px;}
ol#contactform li {clear: both; margin: 0 0 1em; padding: 0;}
ol#contactform li label {float: left; padding: 6px 0 0 0; width: 120px;}
ol#contactform li input, ol#contactform li textarea {background: transparent; border: 1px solid #ccc; font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; padding: 3px; width: 300px;}
ol#contactform li.btnSubmit input {background: #ccc; border: 1px solid #fff; margin: 0 0 0 120px; width: 13em;}
#googlemap {border: 1px solid #ccc; float: left; font-size:1em; height: 394px; margin-top: 8em; padding: 5px; width:380px;}

/* =======================================================================

footer, twitter, flickr

======================================================================= */

.twitter {clear:both; float: left; margin: 3em 0 0 0; width: 240px;}
.twitter li {clear: both; float: left; font-size: 1.1em; line-height: 1.5em; margin: 0 0 1em 0; width: 240px;}
.twitter li p {float: left; width: 200px}
.twitter li img {display: block; float: left; height: 32px; margin: 0 5px 5px 0; width: 32px;}
.twitter li a {color: #51000C; text-decoration: underline;}
.twitter li a:hover {background: #51000C; color: #fff; text-decoration: none;}

.flickr {float: left; margin: 3em 0 0 60px; width: 640px;}
.flickr ul {width: 660px;}
.flickr li {display: inline;}
.flickr li a {float: left; border: 2px solid #333; margin: 0 4px 0 0;}
.flickr li a:hover {border: 2px solid #51000C;}
.flickr li a img {display: block; height: 72px; margin: 0; width: 72px;}

.twitter  h2, .flickr  h2, .calendar h2 {font-size: 2.1em; font-weight: bold; letter-spacing: -1px; line-height: 1em; margin: 0 0 .8em 0;}
.twitter  h2 a, .flickr  h2 a, .calendar  h2 a {color: #000; text-decoration: none;}
.twitter  h2 a:hover, .flickr  h2 a:hover, .calendar  h2 a:hover {border-bottom: 1px solid #000;}

.calendar {clear: both;float: left; margin: 3em 0 0 0; width: 940px;}
#EC_previousMonth, #EC_nextMonth, .calendar h3 {float: left; font-family: Arial, Helvetica, sans-serif; font-size: 1.4em; font-weight: bold;}
.calendar h3 {margin: 0 .5em;}

#footer {background: url(images/footer-border.gif) no-repeat 0 30px; clear: both; margin: 0 auto; overflow: hidden; padding: 30px 0; position: relative; width: 940px;}
#footer p { float: right;}
#footer a#facebookfooter {background: url(images/facebook.jpg) no-repeat 0 0; display: block; height: 45px; position: absolute; text-indent: -9999px; top: 50px; width: 120px;}