html { height:100%;}

* { padding: 0; margin: 0; }

body {
    font: 13.25px 'lucida grande', helvetica, arial, sans-serif;
    color:#222;
    background:#eee;
    height:100%;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td {
    vertical-align: top;
}

h3 {
    margin: 7px 0;
}
h1 {
    margin-bottom:.5em;
}
textarea {font-family: 'lucida grande', helvetica, arial, sans-serif; font-size:12px; padding:1px 2px;}
textarea {font-size:13px;}

input {
    border:1px solid #900; 
    padding:2px;
}
input:focus {border-color:#333;}

.button {
    background: #900 url(/img/ui/head_bg.png) repeat-x;
    cursor: pointer;
    border: 0 none; 
    border-radius:7px; 
    color: #FFFFFF; 
    font-size:14px; 
    font-weight: bold; 
    height: 28px; 
    line-height: 28px; 
    margin: 0 5px 10px 0; 
    padding:0 1em; 
    text-align: center; 
    text-decoration: none; 
    vertical-align: top; 
    white-space: nowrap; 
    width: auto;
}
.button:hover {background:#a00;}

img { border:0; margin:0; padding:0;}
td { font-size:13px; }
a, a:visited, a:active {
    color:#c60;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    color:#a00;
}

#fawmContainer {
    min-height:100%;
    position:relative;
}


/* header */

#fawmContainer {
    min-height:100%;
    position:relative;
}

#fawmheader ul,
#fawmheader li,
#fawmheader p,
#fawmheader form,
#fawmheader input {
    margin:0;
    padding:0;
}

#fawmHeader {
    background: #c00 url(/img/ui/head_bg.png) repeat-x;
    border-bottom: 2px #600 solid;
    height: 70px;
    margin: 0; 
    color: #fff;
}

#fawmHeaderWrapper {
    background: transparent url(/img/ui/fawm_logo.png) no-repeat left top;
    margin-left: 5px;
    padding: 5px;
    height: 60px;
}

#fawmHeader a {
    color: #fff;
    text-decoration: none;
}

#fawmHeader a:hover {
    color: #fff;
    border-radius:6px;
    text-decoration: underline;
}

#fawmHeader h1 {
    position: absolute;
    top: 7px;
    left: 12px;
    width: 95px;
    height: 64px;
    text-indent: -9999px;
    overflow: hidden;
}

#fawmHeader h1 a {
    display: block;
    height: 64px;
    width: 95px;
}

#fawmHeader h1 a img {
    display: block;
    border: none;
}

#fawmHeader h1 span {
    display: none;
}

/*  navigation */

#fawmNav {
    padding-left: 105px;
    list-style:none;
}
#fawmHeader li {
    position: relative;
    float: left;
    margin-top: 28px;
    font-size: 13px;
    height:20px;
}

#fawmHeader li a {
    font-weight: bold;
    float: left;
    padding: 5px 6px;
    text-transform: uppercase;
}
#fawmHeader li a:hover {
    background: #600;
    text-decoration: none;
}



/* searchbar */


#fawmSearch {
    margin: 8px 0 0 0;
}
#fawmSearch input,
#fawmSearch select {
/*    vertical-align: middle;*/
/*    font-size: 11px;*/
/*    height: 11px;*/
}
#fawmSearch input {
/*    padding: 2px;*/
/*    font-size: 10px;*/
}

#fawmSearch input.submit {
    width: 22px;
    height: 21px;
    background: transparent url(/img/ui/search.png) 0 0 no-repeat;
    border: 0;
    margin-left: 3px;
}
#fawmSearch input.submit:hover {
    background-position: 0 -21px;
    cursor: pointer;
}

/* mini-menu */

#fawmMiniMenu {
    position: absolute;
    top: 12px;
    right: 15px;
    text-align: right;
    color: #e99;
    font-size: 11px;
    height: 22px;
    overflow: visible;
}


/* content */

#fawmContentWrapper {
    padding: 10px;
    padding-bottom: 90px;
    min-width:780px;
    max-width:950px;
    margin: 0 auto;
}

#fawmContent {
    padding: 13px;
    border: 1px #999 solid;
    background: #fff;    
    border-radius:7px; 
}



/* footer */

#fawmFooter {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 65px;
    padding: 10px 0 0 0;
    text-align: center;
    margin: 10px 0 0 0;
    background: #666;
    color: #aaa;
    font-size: 11px;
    background: #777 url(/img/ui/foot_bg.png) repeat-x;
}

#fawmFooter a {
    color: #ccc;
    text-decoration: none;
}

#fawmFooter a:hover {
    color: #fff;
    text-decoration: underline;
}

/* paginator */

.songPaging {
    margin: 15px auto 10px auto;
    text-align:center;
}

.forumMisc {
    margin: 15px 0;
    height:30px;
}
.forumMisc .paginator {
    float:right;
}

.sticky {background:#F4EEBE;}
.sticky .stickyLabel {font-size:10px;}
#forumInput {
    padding-right: 5px;
    padding-top: 10px;
    border-top: 1px #ccc solid;
}
#forumInput textarea.content {
    width:100%;
    height:80px;
    margin:5px 0;
}
#forumInput .author {
    border:none;
}

#commentInput {
    padding-right: 5px;
    padding-bottom: 10px;
    border-bottom: 1px #ccc solid;
}
#commentInput textarea.content {
    width:100%;
    height:80px;
    margin:5px 0;
}
#commentInput .author {
    border:none;
}



.paginator strong {
    border: 1px #000 solid;
    padding: 1px 3px;
    background: #ccc;
}
.paginator a {
    border:1px #999 solid;
    padding: 1px 3px;
}
.paginator a:hover {
    text-decoration: none;
    background: #F4EEBE;
    color:#900;
    border:1px #900 solid;    
}


/* songlist layout */

#songList {
    background:#fff;
    border: 1px #999 solid;
    padding: 14px;
    margin: 0 311px 0 0;
    min-width: 450px;
    border-radius:7px; 
}

#forumList {
    background:#fff;
    border: 1px #999 solid;
    padding: 14px;
    margin:0 171px 0 0;
    border-radius:7px; 
}

#adSidebarWide {
    width: 300px;
    float: right;
    padding: 0;
}

#adSidebarNarrow {
    width: 160px;
    float: right;
    padding: 0;
}


/* myfawm */

#myfawmMenu {
    background:#fff;
    border: 1px #999 solid;
    width: 152px;
    float: left;
    padding: 10px;
    border-radius:7px; 
}
#myfawmMenu .avatar {
    border: 1px #999 solid;
}

#myfawmContent {
    background:#fff;
    border: 1px #999 solid;
    padding: 13px;
    margin:0 0 0 185px;
    border-radius:7px; 
}

#myfawmNav {
    list-style: none;
    margin-top:10px;
}

#donateNote {
    background: #ccc;
    font-size:11px;
    padding:5px;
    margin-top:10px;
}

#watchlists a img {
    border: 1px transparent solid;
    margin: 0 2px 2px 0;
}
#watchlists a:hover img {
    border-color:#900;
}


/* forums */

#forums h2,
#donations h2 {
    background: #900 url(/img/ui/red_grad.png) repeat-x center;
    padding: 3px 5px;
    color: #fff;
    border: 1px #900 solid;
    font-size: 13px;
}
#forums .newForum { 
    border: 1px #900 solid;
    margin-bottom: 18px;
}
#forums table {
    width:100%;
    border-spacing: 0;
    border-collapse: collapse;
}
#forums th, #forums td {
    border-color: #ccc;
    border-style: solid;
    margin: 0;
    padding: 5px 8px;
    border-width: 1px 1px 0 0;
    color:#666;
}
#forums th {
    font-weight:normal;
    color:#333;
    background:#ddd;
    font-size:12px;
    padding: 2px 5px;
}
#forums .tc1 { width:60%; text-align:left;}
#forums .tc1 a { font-size:14px; font-weight:bold; }
#forums .tc2 { width:10%; text-align:center;}
#forums .tc3 { width:10%; text-align:center;}
#forums .tc4 { width:20%; text-align:left; font-size:11px;}

#donations .newDonation { 
    border: 1px #900 solid;
    margin: 20px 0;
}

table.donate {
    width:100%;
    border-spacing: 0;
    border-collapse: collapse;
}
table.donate td {
    border-color: #ccc;
    border-style: solid;
    margin: 0;
    padding: 5px 8px;
    border-width: 1px 0 0 0;
    color:#666;
}
table.donate form {
    margin: 5px 0;
}
table.donate form td {
    margin:0;
    padding:4px 7px 0 0;
    border:none;
}
table.donate strong {
    color:#000;
}

.clearit { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    line-height: 0px;
}
.advert {
    display:block;
    margin-bottom:10px; 
}

/* tracklist tables */

.adminlist td {
    font-size:11px;
}
.adminlist th {
    text-align:left;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td.subjectCell .tags,
td.subjectCell .tags a {
    font-size:12px;
    color:#999;
}
td.subjectCell .tags a:hover {
    color:#666;
}
td.subjectCell .author a {
    color:#B35900;
    font-size:12px;
}
td.subjectCell .song a {
    font-weight: bold;
}

table.tracklist {
    width: 100%;
    font-size: 11px;
    line-height: 1.2em;
    border-top:1px #ccc solid;
}

table.tracklist tbody tr:hover {
    background: #F4EEBE;
}

table.tracklist tr.last td {
    border-bottom: none;
}

table.tracklist th,
table.tracklist td {
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
}

table.tracklist td.playbuttonCell {
    padding: 5px 0 0 5px;
}

table.tracklist td.subjectCell {
    color: #000;
    width: 100%;
}

table.tracklist td.trackNumCell {
    color:#999;
    font-size:12px;
    text-align:right;
}

table.tracklist a {
    color: #000;
}
table.tracklist a:hover {
    color: #900;
}
table.tracklist td.imageCell {
    padding: 1px 0;
}
table.tracklist td.imageCell img {
    display: block;
    float: left;
}
table.tracklist td.dateCell {
    padding-right: 5px;
    padding-left: 5px;
    text-align: right;
    color: #999;
    white-space: nowrap;
    font-size: 10px;
}


/* navvy stuff */

#resultText {
    font-size: 14px;
    margin-bottom: 25px;
}
#resultText h2,
#resultText h3 {
    font-weight:normal;
}


/* filter / sorting lists */

#listOptions {
    display:block;
    height:21px;
}

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.dropdown {
    position: relative;
    float: left;
}
ul.dropdown li {
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
    height:15px;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
    position: relative;
    cursor: default;
}
ul.dropdown ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}
ul.dropdown ul li {
    float: none;
    width:100%;
}
ul.dropdown ul ul {
    top: 5px;
    left: 99%;
}
ul.dropdown li:hover > ul {
    visibility: visible;
}

ul.dropdown {
    font-size:12px;
}
ul.dropdown li {
    padding: 2px 3px;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    border-color: #fff #999 #999;
    background-color: #eee;
    color: #000;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
    background-color: #fff;
}
ul.dropdown a:link,
ul.dropdown a:visited	{ color: #000; text-decoration: none; }
ul.dropdown a:hover		{ color: #900; }
ul.dropdown a:active	{ color: #900; }
ul.dropdown ul {
    width: 120px;
    margin-top: 1px;
}
ul.dropdown ul li {
    font-weight: normal;
}
ul.dropdown *.dir {
    background-color: #ccc;
}

#authTable {
/*    margin-bottom: 15px;*/
}

#authTable tr td {
    padding: 6px 10px 0 0;
}
.ajaxy {
    padding-left: 8px;
}
ul#messages {
    padding: 4px;
    list-style:none;
    background:#F4EEBE;
    color:#900;
    font-weight:bold;
    margin: 5px 0;
    border-radius:7px; 
}
ul#messages li {
    padding: 3px 5px;
}
#authDiv {
    width:450px;
    margin: 0 auto;
}
#authDiv h1 {
    margin-bottom:15px;
}
.instructions {
    margin: 12px 0;
}
.instructions h3 {
    margin-bottom:10px;
}
.instructions blockquote {
    margin:10px;
}


/* shoutboxList */
ul.comments {
    margin: 15px 0;
    list-style: none;
}

* html ul.comments {
}

ul.comments li {
    position: relative;
    margin: 0 0 20px 0;
    padding: 0 0 0 45px;
}

ul.comments li .author {
    display: block;
    border-bottom: 1px solid #ccc;
    font-size: 13px;
    padding: 0 5px 2px 0;
    line-height: 1.5em;
    font-weight: normal;
}

ul.comments li .author a {
}

ul.comments li span.userImage {
    display: inline;
    float: left;
    position: relative;
    margin-left: -45px;
}

ul.comments li span.date {
    margin: 0 0;
    color: #999;
    font-size: 10px;
}

ul.comments li blockquote {
    padding: 5px 5px 5px 1px;
    font-size: 13px;
    line-height: 1.3;
}

ul.comments li .meta {
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 0px;
    width: 200px;
    text-align: right;
    font-size: 10px;
}

ul.comments li .meta form {
    display: none;
    position: absolute;
    top: 1px;
    right: -14px;
    margin: 0;
    display: inline;
}

#tagcloud { margin-top:30px; line-height:45px; text-align:justify; }
#tagcloud a { margin-right:15px; font-weight:normal;}

.searchBreadCrumb {
    border-top:1px #ccc solid;
    border-bottom:1px #ccc solid;
}
.hilite {
    background:#fe9;
}
.alert {
    padding: 0.25em 0.5em 0.25em 0.5em;
    background:  #F4EEBE;
    border-radius:7px; 
}

#profileAvatar img {
    border: 1px #999 solid;
    width:150px;
}
#profileSummary {
    padding-left:10px;
    width:100%;
}
#profileSummary strong {
    color:#900;
}
#profileBio {
    margin: 10px 0;
}

#rating {display:block;}

#theSongTable {
    margin: 10px 0 0 0;
}
#theSongAvatars img {
    border:1px #999 solid;
    margin-right:5px;
}
#theSongNames {
    padding-left:5px;
}

#theDemo {
    width:100%;
    padding:10px 0;
    margin: 10px 0;
    background:#ddd;
    border:1px #999 solid;
    text-align:center;
}

/* challenges */

#challengelist {
    list-style:none;
}
#challengelist .songcount {
    color:#999;
    font-size:11px;
}
#challengelist li {
    margin-bottom:25px;
}
#challengelist li blockquote {
    margin:5px 25px;
}

/* legaly pages */

.legal {
    width:700px;
    margin: 0 auto;
}
.legal, .contact {
    font-size:12px;
}
.contact ul, .legal ul {
    margin: 10px 0 10px 40px;
}
.legal h1, .legal h2, .legal h3 { margin: 0 0 .75em 0;}
.contact p, .legal p {
    margin: 0 0 10px 0;
}

/* add-a-song button */

a.big-button {
    display: block;
    width: 245px;
    padding: 10px 10px;
    background: #c00 url(/img/ui/head_bg.png) repeat-x;
    color:#f99;
    text-decoration: none;
    margin-top:15px;
    
    border: 0 none; 
    border-radius:8px; 
    font-size:14px; 
    font-weight: bold; 
    margin: 0 5px 10px 0; 
    padding:1em 3em; 
    text-decoration: none; 
    vertical-align: top; 
    white-space: nowrap;
}
a.big-button strong { font-size:16px; color:#fff;}
a.big-button:hover {
    background: #a00;
    color:#fc9;
}


/* front page */

.frontpage blockquote {
    color:#666;
    margin:10px 40px;
}
.frontpage p {
    margin:10px 0;
}
#frontLinks, #frontLogin {
    padding:10px;
    border:1px #999 solid;
    background:#fff;
    margin-bottom:10px;
    border-radius:7px; 
}

#frontFund {
    text-align:justify;
    padding:10px;
    background: #F4EEBE;
    border: 1px #B35900 solid;
    margin-bottom:10px;
    font-size:12px;
    border-radius:7px; 
}
#frontFund p + p { margin-top:10px;}
#frontFund .progressBar {
    width:100%;
    border:1px #999 solid;
    background:#fff;
    margin-bottom:5px;
}
#frontFund .bar {
    background: #900 url(/img/ui/red_grad.png) repeat-x center;
    padding:2px 0;
    color:#fff;
}

#frontClock,#frontOver {
    margin-bottom:10px;
    border-radius:7px; 
}

#frontOver {
    padding:5px 0;
    border:1px #000 solid;
    background-color:#666;
    color:#ddd;
    text-align: center;
}
#frontOver strong {
    font-size:24px;
    color:#fff;
}
#frontTable {
    width:100%;
    margin:12px 0;
}
#frontCounter {
    width:50%;
    text-align:center;
    font-size:14px;
    vertical-align:middle;
}
#frontCounter .count {
    font-size:36px;
    font-weight:bold;
    color:#900;
}
#frontForums {
    width:50%;
}
#frontForums ul {
    margin-left:20px;
}
#frontChallenge {
    border:2px #ddd solid;
    padding:10px;
    border-radius:8px; 
    margin-top:15px;
}

#merchTable {
    width:100%;
    margin-top:15px;
}
#merchTable td {
    width:50%;
}

/* TOOLSTUFFS! */
#toolList {margin:2em 0;}
.toolItem {position: relative; margin: 0 0 1em 0; padding: 0 0 0 165px; height:100px;}
.toolImg {display: inline; float: left; position: relative; margin-left: -165px;}
.addin {color:#900; font-style:italic;}


#dbTable { margin: 1em 0; width:100%; }
#dbTable td { text-align: center; font-size: 12px; padding: 0 5px;}
#dbTable strong { font-size: 20px; }

.etiquette { font-size:10px; }