html {overflow-y: scroll; overflow-x: auto; margin: 0; padding: 0;}
body {font-family: 'Arial'; font-size: 13px; background: #111111 url(/images/template/flyers.jpg) fixed center top no-repeat; color: #75e767; text-align: center; margin: 0 0 50px 0;}

* {margin: 0; padding: 0;}
a {color: #929812; color: #a4d727; text-decoration: none;}
a:hover {text-decoration: underline;}
*:focus{outline: 0;}
img {border: 0;}

.clearMe {display: block; height: 0; clear: both; font-size: 0;}
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clear {display: inline-block;}
/* hide IE mac \*/
* html .clear {height: 1%;}
.clear {display: block;}
/* */

#acontainer {text-align: left; max-width: 650px; margin: 0 auto;}

#atop {margin: 0 0 16px 0;}
#atop .header h1 {margin: 0; padding: 0;}
#atop .header a {display: block; width: 650px; height: 90px; padding: 0 0 0 0; margin: 0; background: url(/images/template/howtobepunk.gif) center center no-repeat;}
#atop .header a span {display: none;}
#atop .nav {margin: 0; height: 53px; background: url(/images/template/navigation.gif) center center no-repeat;}
#atop .nav ul {list-style: none; text-align: center; margin: 0; padding: 15px 0 0 0;}
#atop .nav li {display: inline; padding: 0 0 0 12px; margin: 0 0 0 8px; background: url(/images/template/nav_sep.gif) left 80% no-repeat;}
#atop .nav li.f {background: none; margin: 0; padding: 0;}
#atop .nav li a {color: #cccccc; font-size: 110%; font-weight: bold;}
#atop .nav li a:hover {color: #e6eBe2;}
#atop .logout {position: absolute; top: 10px; left: 50%; margin-left: 300px; font-size: .9em;}

#amain {}
/*
#amain .content {float: left; width: 69%;}
#amain .extra {float: right; width: 25%;}
*/

#amain .extra {display: none;}


h1, h2, h3, h4 {color: #c5c500;}
h1 {font-size: 1.9em; margin: 0 0 20px 0;}
h2 {font-size: 1.3em; margin: 8px 0 16px 0;}
h3 {font-size: 1em; margin: 0 0 5px 0;}
h1 small {font-size: .4em;}
p {padding: 0 0 16px 0;}
.content {line-height: 1.4em;}
.content h1, .content h2 {}
.content ul {margin: 0 0 16px 40px;}
.content ul.images {list-style: none; margin: 0 0 24px 0; padding: 0;}
.content ul.images li {margin: 0 0 16px 0;}
.content ul.images li img {float: left; margin: 0 16px 0 0; border: 1px solid #000;}
.content ul.images h2 {margin: 0; left: 0; font-size: 19px;}

.pages {text-align: right;}
.pages span {margin: 0 0 0 7px;}
.pages .info {float: left;}

.extra .punks ul {list-style: none; margin: 0 0 32px 0; padding: 0;}
.extra .punks li {margin: 0 0 10px 0; line-height: 27px; padding: 0; background: url(/images/site/punks.jpg) 0 top no-repeat; cursor: pointer;}
.extra .punks li h2 {margin: 0 !important; padding: 0 !important; font-size: 23px; text-align: center; }
.extra .punks li a {visibility: hidden; display: block; padding: 4px 0 0 0; margin: 0; height: 29px; color: #fff; text-decoration: none; background: #000; font-family: impact; font-weight: normal;}
.extra .punks li:hover a {visibility: visible; opacity: .5; filter:alpha(opacity=50);}
.extra .punks li:hover a:hover {color: #fff !important;}
.extra .punks li.rawk {background-position: 0 0;}
.extra .punks li.hott {background-position: 0 -40px;}
.extra .punks li.real {background-position: 0 -80px;}
.extra .punks li.skat {background-position: 0 -120px;}
.extra .punks li.anar {background-position: 0 -160px;}

body.home .splash .punks {margin: 0 0 30px 0;}
body.home .splash .punks ul {list-style: none; text-align: center; margin: 0; padding: 0;}
body.home .splash .punks li {display: inline-block;}
body.home .splash .punks li h2 {display: inline;}
body.home .splash .punks li a {display: block; width: 150px; height: 150px; margin: 0 16px 16px 0; cursor: pointer; opacity: .8; filter:alpha(opacity=80); background: url(/images/site/home/punks.jpg) 0 0 no-repeat; text-decoration: none;}
body.home .splash .punks li a span {visibility: hidden;}
body.home .splash .punks li.pr a {}
body.home .splash .punks li.ht a {background-position: -150px 0;}
body.home .splash .punks li.rp a {background-position: -300px 0;}
body.home .splash .punks li.sp a {background-position: -450px 0;}
body.home .splash .punks li.ap a {background-position: -600px 0;}
body.home .splash .punks li:hover a {opacity: 1; filter:alpha(opacity=100);}
body.home .splash .punks li.pr:hover a {background-position: 0 -150px;}
body.home .splash .punks li.ht:hover a {background-position: -150px -150px;}
body.home .splash .punks li.rp:hover a {background-position: -300px -150px;}
body.home .splash .punks li.sp:hover a {background-position: -450px -150px;}
body.home .splash .punks li.ap:hover a {background-position: -600px -150px;}
body.home .intro {margin: 0 0 20px 0;}
body.home .news {border-top: 1px dashed #777; padding-top: 50px;} 

.guestbook a.post {float: left;}
.guestbook ul {margin: 10px 5px; list-style: none;}
.guestbook li {padding: 18px 0 0 0; margin: 18px 0 0 0; border-top: 1px dashed #777;}
.guestbook li.first {margin-top: 0; padding-top: 0; border: 0;}
.guestbook li .actions {float: right;}
.guestbook li h3 {display: inline;}
.guestbook li h3 span {color: #aaa; font-size: .8em;}
.guestbook li p {padding: 0 8px;}
.guestbook.form .captcha {float: left; width: 319px; height: 150px; padding: 0 20px 0 0; border-right: 1px dashed #777; }
.guestbook.form .buttons {padding: 30px 0 0 0;}
.hatemail a.post {float: left;}
.hatemail ul {margin: 10px 5px; list-style: none;}
.hatemail li {padding: 24px 0 0 0; margin: 24px 0 0 0; border-top: 1px dashed #777;}
.hatemail li.first {margin-top: 0; padding-top: 0; border: 0;}
.hatemail li .actions {float: right;}
.hatemail li h3 {display: inline;}
.hatemail li h3 span {color: #aaa; font-size: .8em;}
.hatemail li .moron {margin: 0 0 36px 0;}
.hatemail li .response h4 {color: #b49814;}
.hatemail li p {padding: 0 8px;}

.hatemail.side h3 {margin-bottom: 8px;}
.hatemail.side ul {margin: 0 0 6px 0; padding: 0;}
.hatemail.side li {margin-top: 8px; padding-top: 8px;}
.hatemail.side li.first {margin-top: 0; padding-top: 0;} 
.hatemail.side a.hateme {display: block; text-align: right; font-size: .9em;}
.news ul {margin: 10px 0; list-style: none;}
.news li {padding: 18px 0 0 0; margin: 18px 0 0 0; border-top: 1px dashed #777;}
.news li.first {margin-top: 0; padding-top: 0; border: 0;}
.news li .actions {float: right;}
.news li h3 {display: inline;}
.news li h3 span {color: #aaa; font-size: .8em;}
.news li p {padding: 0 8px;}

/* event listing */
.events .date {float: right; margin: 0 0 0 12px; padding: 0 0 4px 0; width: 50px; background: #333; text-align: center;}
.events .date h3 {background: #222; color: #eee; font-family: arial; font-size: .9em; line-height: 1.2em; font-weight: bold; margin: 0 0 3px 0; padding: 2px 0 3px 0;}
.events .date span {font-size: 1.3em; color: #eee; margin: 0;}

.events a.join {float: right;}

.events h1 a img {opacity: .8; filter:alpha(opacity=80); }
.events h1 a:hover img {opacity: 1; filter:alpha(opacity=100); }
.events .list {padding: 20px 0;}
.events .list ul {list-style: none; margin: 0; padding: 0 0;}
.events .list ul.event-list li {margin: 0 0 20px 0; padding: 0 0 0 0; border-bottom: 1px dashed #222;}
.events .list ul.event-list li.last {border: 0;}
.events .list ul.event-list li a {display: block; cursor: pointer;}
.events .list ul.event-list li a:hover {text-decoration: none;}
.events .list ul.event-list li .head {border-bottom: 0px dashed #656565; padding: 0 0 20px 0; margin: 0 0 0 0;}
.events .list ul.event-list li .head .wrap {display: inline-block; float: left; padding: 0 10px 2px 0;}
.events .list ul.event-list li .head .image {display: table-cell; vertical-align: middle; line-height: 80px; text-align: center; width: 100px; height: 80px; padding: 0 !important; opacity: .8; filter:alpha(opacity=80); background: #000;}
.events .list ul.event-list li .head .image img {max-width: 100px; max-height: 80px; padding: 0 !important;}
.events .list ul.event-list li .head .text {display: inline; font-size: 1em; line-height: 1.4em;}
.events .list ul.event-list li .head h2 {margin: 0 0 0 0; left: 0; font-size: 1.3em; line-height: 1.2em; word-spacing: 0; font-weight: normal; color: #b3c063;}
.events .list ul.event-list li .head h2 a {margin: 0; color: #bfc18b; font-size: 1em;}
.events .list ul.event-list li .head h2 a:hover {border: 0;}
.events .list ul.event-list li .head:hover h2 {}
.events .list ul.event-list li .head:hover .image {opacity: 1; filter:alpha(opacity=100);}
.events .list ul.event-list li .head em {display: block; font-size: 1.1em; color: #ddd;}
.events .list ul.event-list li .head em span {font-size: .8em; font-style: normal; color: #aaa;}
.events .list ul.event-list li .head .time {font-size: .9em;}


/* top errors/messages */
#msg_top {position: fixed; left: 0; top: 0; z-index: 10001; width: 100%; margin: 0; padding: 0; cursor: pointer; text-align: left; background: #222;}
#msg_top .messages {display: none; position: relative; width: 940px; padding: 8px 0; margin: 0 auto; color: #333; }
#msg_top .messages ul {margin: 0 0 0 16px; list-style: none;}
#msg_top .messages .error {color: #b00 !important;}
#msg_top .messages .success {color: #090 !important;}

/* form styles */
.form {}
.form .col {float: left; width: 42%;}
.form .form_row {margin: 0 0 11px 0; text-align: middle;}
.form .form_row label {display: inline-block; width: 40%; margin: 3px 2% 0 0; font-size: 1.1em; text-align: right; text-transform: lowercase;}
.form .form_row input {width: 154px; height: 20px; margin: 0 0 0 0; padding: 2px 0 0 0;}
.form .form_row input[type="checkbox"] {width: auto;}
.form .form_row select {}
.form .form_row.dob select {margin-right: 4px} 
.form .buttons {text-align: center; padding: 0; margin: 0;}
.form .buttons-left {clear: both; text-align: left; padding: 0; margin: 0;}
.form .buttons input {cursor: pointer;}
.form .triple .form_row label {width: 100%;}
.form .triple .form_row {width: 32%; float: left;}
.form textarea {width: 100%;}

/* recaptcha */
.captcha .recaptchatable .recaptcha_r1_c1 { background-image: url(/images/site/recaptcha.gif);}
.captcha .recaptchatable .recaptcha_r2_c1 { background-image: url(/images/site/recaptcha.gif);}
.captcha .recaptchatable .recaptcha_r2_c2 { background-image: url(/images/site/recaptcha.gif);}
.captcha .recaptchatable .recaptcha_r3_c1 { background-image: url(/images/site/recaptcha.gif);}
.captcha .recaptchatable .recaptcha_r3_c2 { background-image: url(/images/site/recaptcha.gif);}
.captcha .recaptchatable .recaptcha_r3_c3 { background-image: url(/images/site/recaptcha.gif);}
.captcha .recaptchatable .recaptcha_r4_c1 { background-image: url(/images/site/recaptcha.gif);}
.captcha .recaptchatable .recaptcha_r4_c2 { background-image: url(/images/site/recaptcha.gif);}
.captcha .recaptchatable .recaptcha_r4_c4 { background-image: url(/images/site/recaptcha.gif);}
.captcha .recaptchatable .recaptcha_r7_c1 { background-image: url(/images/site/recaptcha.gif);}
.captcha .recaptchatable .recaptcha_r8_c1 { background-image: url(/images/site/recaptcha.gif);}
.captcha .recaptchatable .recaptcha_only_if_no_incorrect_sol {color: #444 !important; font-weight: bold;}
.captcha .recaptchatable #recaptcha_reload_btn {display: block; width: 23px height: 16px; background: url(/images/site/recaptcha.gif) -312px -1px no-repeat !important; }
.captcha .recaptchatable #recaptcha_reload_btn img {visibility: hidden;}
.captcha .recaptchatable #recaptcha_switch_audio_btn {display: block; width: 23px height: 16px; background: url(/images/site/recaptcha.gif) -312px -16px no-repeat !important; }
.captcha .recaptchatable #recaptcha_switch_audio_btn img {visibility: hidden;}
.captcha .recaptchatable #recaptcha_switch_img_btn {display: block; width: 23px height: 16px; background: url(/images/site/recaptcha.gif) -319px -49px no-repeat !important; }
.captcha .recaptchatable #recaptcha_switch_img_btn img {visibility: hidden;}
.captcha .recaptchatable #recaptcha_whatsthis_btn {display: block; width: 23px height: 16px; background: url(/images/site/recaptcha.gif) -312px -33px no-repeat !important; }
.captcha .recaptchatable #recaptcha_whatsthis_btn img {visibility: hidden;}

.about_pic img {float: left; margin: 0 16px 0 0;}

.links ul {margin: 0; list-style: none;}
.links li {margin: 0 0 10px 0;}

.extra .social {padding: 10px 0 7px 0; margin: 0 0 24px 0; border-top: 1px dashed #777; border-bottom: 1px dashed #777;}
.extra .social ul {list-style: none; padding: 0; margin: 0 0 0 0; text-align: left;}
.extra .social li {display: inline; margin: 0 4px 0 0;}

span.date {font-size: .9em; color: #ccc;}