@import url(./reset.css);

/* -------- GENERAL WEBSITE SETTINGS -------- */

html {
background-color: #ffffff;
}

body {
font-size: 10pt;
font-family: Trebuchet MS, Helvetica, Geneva, Arial, sans-serif;
color: #333333;
margin: 0 auto;
width: 800px;
background-color: #ffffff;
background-image: url('../images/background.png');
background-repeat: no-repeat;
padding-top: 20px;
}

#header, #menu, #footer, #content {
margin: 0 auto;
width: 702px;
}

a:link, a:visited {
outline:none;
text-decoration: none;
font-weight: bold;
color: #990000;
}

a:hover, a:active {
outline: none;
text-decoration: underline;
color: #770000;
}
/* -------- HEADER SPECIFIC -------- */

#header {
background-image: url('../images/logo.png');
background-repeat: no-repeat;
height: 174px;
padding-bottom: 20px;
}

#header h1 {
text-indent: -9999px;
}

/* -------- MENU SPECIFIC -------- */

#menu {
margin-bottom: 15px;
width: 714px;
}

/**
 * IE Won't render the bottom border if the element is inline.
 * And there's no harm in it being block because it's wrapped in the inline 'li' element.
 */
#menu a { display: block; }

#menu a:link, #menu a:visited {
color: #666666;
font-weight: normal;
border-bottom: 20px solid #CCCCCC;
padding: 0 2px 4px 0;
margin-right: -2px;
font-size: 21pt;
letter-spacing: -2px;
}

#menu a:hover.home, #menu a:active.home { color: #ccff99; border-color: #ccff99; font-weight: normal; text-decoration: none; }
#menu a:hover.about, #menu a:active.about { color: #99cccc; border-color: #99cccc; font-weight: normal; text-decoration: none; }
#menu a:hover.projects, #menu a:active.projects {color: #993333; border-color: #993333; font-weight: normal; text-decoration: none; }
#menu a:hover.media, #menu a:active.media {color: #669999; border-color: #669999; font-weight: normal; text-decoration: none; }
#menu a:hover.performers, #menu a:active.performers {color: #ff9933; border-bottom-color: #ff9933; font-weight: normal; text-decoration: none; }
#menu a:hover.composers, #menu a:active.composers {color: #006666; border-bottom-color: #006666; font-weight: normal; text-decoration: none; }
#menu a:hover.friends, #menu a:active.friends {color: #9999cc; border-bottom-color: #9999cc; font-weight: normal; text-decoration: none; }
#menu a:hover.contact, #menu a:active.contact {color: #999966; border-bottom-color: #999966; font-weight: normal; text-decoration: none; }

#menu ul {
height: 50px;
}

#menu li {
float: left;
padding-left: 5px;
}

#menu li:first-child {
padding-left: 0px;
}

/* -------- CONTENT SPECIFIC -------- */

#content h2 {
color: #990000;
font-size: 30pt;
font-weight: normal;
padding: 10px 0;
}

#content {
min-height: 300px;
overflow: hidden;
}

#content p {
padding: 10px 0;
}


#content h3 {
font-size: 18pt;
color: #000099;
font-weight: normal;
}

#content h4 {
font-size: 12pt;
color: #000099;
font-weight: normal;
padding: 10px 0 0 0;
}

#content h5 {
font-size: 12pt;
color: #000099;
font-weight: normal;
padding: 5px 0 0 0;
}

#content form.big {
width: 380px;
padding: 20px;
float: left;
}

#content label {
line-height: normal;
text-align: right;
margin-right: 10px;
position: relative;
display: block;
float: left;
width: 125px;
}

#content input {
padding: 2px;
margin-right: 5px;
margin-bottom: 5px;
height: 15px;
}

#content input.box {
width: 210px;
}

#content textarea {
width: 250px;
}

#content input.button {
height: auto; /* Needed to return button to default height. Remeber the cascade! */
margin: 0 0 0 0;
}

#content img {
padding: 12px 6px 0 0;
}

/**
 * Float is your friend when it comes to images in text.
 * N.B. align="left" is deprecated.
 */
#content img.left {
float: left;
}

/* -------- MAINSITE TABLE SPECIFIC -------- */

#maintable {
width: 100%;
}

.line {
width: 100%;
height: 110px;
padding: 5px 5px;
}

#maintable img {
width: 140px;
height: 100px;
padding: 5px;
float:left;
}

#maintable h3, #maintable h4 {
padding: 2px 0;
}

/* -------- DISPLAY TABLE SPECIFIC -------- */

#displaytable {
width: 600px;
}

#displaytable h4 {
text-align: center;
height: 15px;
line-height: 15px;
font-size: 11pt;
background-color: #cccccc;
float: left;
clear: none;
padding: 5px 0;
}

.title { width: 150px; }
.date { width: 100px; }
.info { width: 250px; }
.options { width: 100px; }
.name { width: 250px; }

#displaytable ul, #displaytable li {
height: 20px;
padding: 5px 0;
}

#displaytable li {
float: left;
clear: none;
text-align: center;
}

/* -------- PAYPAL SPECIFIC -------- */
#content form.paypal {
text-align: center;
margin: 0 auto;
width: 702px;
}

#content form.paypal input.submit {
display: block;
margin: 0 auto;
height: 47px;
width: 160px;
}

/* -------- FOOTER SPECIFIC -------- */

#footer {
margin-top: 30px;
margin-bottom: 10px;
}

#footer p {
text-align: center;
font-size: 8pt;
}