/************* MASTER STYLESHEET *************/

a {outline:none;text-decoration:none;}
a:link {color:#ff0080;}
a:link img {border-color:#000000;}
a:visited {color:#ff0080;}
a:hover img {border-color:#ffffff;}
a:hover {color:#ff0000;text-decoration:underline;}
a:active {color:#ff0080;text-decoration:none;}
unknown {text-decoration:none;}

html, body {
background:#fff9f2;
height:100%;width:100%;
margin:0px;
overflow:auto;
font-family:arial,helvetica,verdana,sans-serif;
color:#000000;
}

#logo-nav-holder {
display:table;
height:100%;
width:170px;
position:absolute;
top:0;
left:0;
}

#content-holder {
position:absolute;
top:0;
left:170px;
height:100%;
width:calc(100% - 170px);
}

#logo_holder {
height:140px;
padding:0;
margin:0;
}

#logo {
width:148px;
height:140px;
margin-left:5%;
}

#dandc {font-size:9pt;}

#designer {
text-decoration:none;
font-size:10pt;
color:#660033;
}

#menu_holder {
position:relative;
height:100%;
vertical-align:middle;
padding:0;
margin:0;
}

.navmenu {
list-style-type:none;
width:150px;
height:90%;
text-align:left;
padding:10% 0 0 0;
margin:0 0 0 5%;
}

.navmenu li {
width:150px;
height:17%;
min-height:34px;
}

.nav_left, .nav_right {
display:inline-block;
*zoom: 1; /* for ie7 and older */
*display: inline; /* for ie7 and older */
}

.navbutton {
display:block;
width:30px;
height:30px;
}

a.enter,
a.home,
a.concerts,
a.previous,
a.md,
a.join,
a.contact {
position:relative;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
behavior: url(../PIE.htc);
}

.enterholder:hover a.navbutton {
background:#ffd0ae;
}

a.enter {
background:#8a0b1e;
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out; /* Firefox 4 */
-webkit-transition: 0.3s ease-in-out; /* Safari and Chrome */
-o-transition: 0.3s ease-in-out; /* Opera */
-ms-transition: 0.3s ease-in-out; /* IE */
}

.aboutholder:hover a.navbutton, #about {
background:#fde3e8; 
}

a#aboutright_off {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/about_blank.gif');
}

div#aboutright_on {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/about_hover.gif');
}

a.home {
background:#a50c26;
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out; /* Firefox 4 */
-webkit-transition: 0.3s ease-in-out; /* Safari and Chrome */
-o-transition: 0.3s ease-in-out; /* Opera */
-ms-transition: 0.3s ease-in-out; /* IE */
}

.concertholder:hover a.navbutton, #concerts {
background:#d9f2f2;
}

a#concertsright_off {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/concerts+events_blank.gif');
}

div#concertsright_on {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/concerts+events_hover.gif');
}

a.concerts {
background:#2d8686;
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out; /* Firefox 4 */
-webkit-transition: 0.3s ease-in-out; /* Safari and Chrome */
-o-transition: 0.3s ease-in-out; /* Opera */
-ms-transition: 0.3s ease-in-out; /* IE */
}

.previousholder:hover a.navbutton, #previous {
background:#d7eed5;
}

a#previousright_off {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/previous_blank.gif');
}

div#previousright_on {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/previous_hover.gif');
}

a.previous {
background:#44963d;
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out; /* Firefox 4 */
-webkit-transition: 0.3s ease-in-out; /* Safari and Chrome */
-o-transition: 0.3s ease-in-out; /* Opera */
-ms-transition: 0.3s ease-in-out; /* IE */
}

.mdholder:hover a.navbutton, #musicaldirector, #accompanist {
background:#c2cce7;
}

a#mdright_off {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/md_blank.gif');
}

div#mdright_on {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/md_hover.gif');
}

div#accompanistright_on {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/accom_hover.gif');
}

a.md {
background:#4766b5;
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out; /* Firefox 4 */
-webkit-transition: 0.3s ease-in-out; /* Safari and Chrome */
-o-transition: 0.3s ease-in-out; /* Opera */
-ms-transition: 0.3s ease-in-out; /* IE */
}

.joinholder:hover a.navbutton, #join {
background:#ffe7d5;
}

a#joinright_off {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/jointcs_blank.gif');
}

div#joinright_on {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/jointcs_hover.gif');
}

a.join {
background:#e45f00;
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out; /* Firefox 4 */
-webkit-transition: 0.3s ease-in-out; /* Safari and Chrome */
-o-transition: 0.3s ease-in-out; /* Opera */
-ms-transition: 0.3s ease-in-out; /* IE */
}

.contactholder:hover a.navbutton, #contact {
background:#f7ddf2;
}

a#contactright_off {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/contactus_blank.gif');
}

div#contactright_on {
display:block;
width:120px;
height:30px;
background-image: url('../buttons/contactus_hover.gif');
}

a.contact {
background:#942383;
transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out; /* Firefox 4 */
-webkit-transition: 0.3s ease-in-out; /* Safari and Chrome */
-o-transition: 0.3s ease-in-out; /* Opera */
-ms-transition: 0.3s ease-in-out; /* IE */
}

div.navselected {
position:relative;
width:30px;
height:30px;
-webkit-border-radius: 7px 0px 0px 7px;
-moz-border-radius: 7px 0px 0px 7px;
border-radius: 7px 0px 0px 7px;
behavior: url(../PIE.htc);
}

#excuses {
display:table;
width:95%;
margin:10px;
}

.excuses_tablerow {
display:table-row;
}

.fge_question {
display:table-cell;
text-align:left;
vertical-align:top;
width:40%;
padding: 5px 0 0 0;
}

.fge_answer {
display:table-cell;
text-align:left;
vertical-align:top;
width:60%;
color:#8a0b1e;
padding: 5px 0 0 0;
}

.artslink {
display:table-cell;
height:90px;
font-size:8pt;
text-align:left;
color:#7f7f7f;
vertical-align:bottom;
padding-left:5%;
padding-bottom:5%;
}

.index_artslink {
font-size:8pt;
text-align:left;
color:#7f7f7f;
position:absolute;
left:1%;
bottom:1%;
}

.divtitle {
font-size:1em;
text-align:left;
font-weight:bold;
}

.mdname {
font-size:1.2em;
text-align:right;
margin:0 0 5px 0;
font-weight:bold;
}

.mdjob {
font-size:0.9em;
text-align:right;
}

#committee {
font-size:0.9em;
color:#5b5f82;
padding:10px 0 0 0;
}

#committeetitle {
padding:0 0 7px 0;
}

.panelcolour {
width:90%;
position:absolute;
top:2%;
right:1.5%;
z-index:1000;
padding:1.5% 2% 0 2%;
border:1px solid #a0a0a0;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(../PIE.htc);
}

.aboutpage {
height:88%;
background:#fde3e8;
}

.about {
background:#fde3e8;
}

.mdpage {
height:auto;
background:#c2cce7;
}

.md {
background:#c2cce7;
}

.concertspage {
height:85%;
background:#d9f2f2;
}

.concerts {
background:#d9f2f2;
}

.joinpage {
height:90%;
background:#ffe7d5;
}

.join {
background:#ffe7d5;
}

.previouspage {
height:85%;
background:#d7eed5;
}

.previous {
background:#d7eed5;
}

.contactpage {
height:auto;
background:#f7ddf2;
}

.contact {
background:#f7ddf2;
}

#aboutcontent,
#concertscontent,
#contactcontent,
#joincontent,
#mdcontent,
#previouscontent {
font-size:0.9em;
text-align:justify;
}

#aboutcontent,
#concertscontent,
#previouscontent {
margin:0 0 4px 0;
}

#mdcontent {
margin:0 14px 0 14px;
}

#mdcontent p {
text-align:justify;
text-indent:0.4cm;
margin:1em auto;
}

.mugshot {
width:20%;
max-width:180px;
height:auto;
}

.leftpic {
float:left;
margin:0 10px 10px 0;
}

.rightpic {
float:right;
margin:0 0 5px 10px;
}

.mdlink {
margin:15px 0 0 0;
width:100%;
font-size:10pt;
text-align:right;
}

.concertinfo, .aboutinfo, .joinus_info {
font-size:0.9em;
text-align:justify;
margin:20px;
}

blockquote.indented {
margin:5px 10px 5px 20px;
}

.newyear {
width:90%;
text-align:center;
font-size:16px;
padding:10px 0 10px 0;
}

.tickets {
font-size:0.9em;
text-align:right;
margin:20px 0 10px 0;
}

.aboutus_scrollybox, .joinus_scrollybox {
width:100%;
height:90%;
border:0;
overflow-x:hidden;
overflow-y:auto;
}

.previous_scrollybox {
width:100%;
height:80%;
border:0;
overflow-x:hidden;
overflow-y:auto;
}

.concerts_scrollybox {
width:100%;
height:75%;
border:0;
overflow-x:hidden;
overflow-y:auto;
}

.previoustable {
display:table;
width:97%;
margin:20px;
font-size:0.9em;
}

.tablerow {
display:table-row;
}

.tablecell {
display:table-cell;
}

.tablecell_left {
display:table-cell;
text-align:left;
vertical-align:top;
width:25%;
padding:3px;
}

.tablecell_right {
display:table-cell;
text-align:left;
vertical-align:top;
width:75%;
padding:3px;
}

.joinphone {
font-size:0.9em;
text-align:right;
}

#contactform_table {
display:table;
width:95%;
}

.contactform_label {
display:table-cell;
text-align:right;
vertical-align:middle;
width:24%;
padding:3px;
}

.contactform_fillbox {
display:table-cell;
text-align:left;
vertical-align:middle;
width:76%;
padding:3px;
}

.emailfield {
background-color:#fff9f2;
font-weight:normal;
color:#000000;
border-bottom:1px solid #cbc29e;
border-right:1px solid #cbc29e;
border-top:1px solid #786d41;
border-left:1px solid #786d41;
}

.sendbutton {
display:block;
height:20px;
width:59px;
background:url(../buttons/send.gif) no-repeat;
color:#fff9f2;
border:0px;
font-weight:bold;
}

.sendbutton:hover {
color:#ffbfff;
}

#contactform {
padding:20px 0 10px 0;
}

#name, #email, #phone, #mobile, #home_address {
width:70%;
font-size:10pt;
}

#subject, #message {
width:90%;
font-size:10pt;
}

/************* SMALL STYLESHEET *************/

@media screen and (max-width: 950px) {

#dandc {font-size:8pt;}

.artslink, .index_artslink {
height:80px;
font-size:7pt;
}

.divtitle {
font-size:0.9em;
}

.mdname {
font-size:1em;
margin:0 0 3px 0;}

.mdjob {
font-size:0.8em;
}

#committee {
font-size:0.8em;
padding:7px 0 0 0;
}

#committeetitle {
padding:0 0 4px 0;
}

#aboutcontent,
#concertscontent,
#contactcontent,
#joincontent,
#mdcontent,
#previouscontent {
font-size:0.8em;
}

#concertscontent,
#previouscontent {
margin:0 0 3px 0;
}

#mdcontent {
margin:0 10px 0 10px;
}

#mdcontent p {
text-indent:0.3cm;
margin:0.5em auto;
}

.leftpic {
float:left;
margin:0 7px 7px 0;
}

.rightpic {
float:right;
margin:0 0 3.5px 7px;
}

.mdlink {
margin:7px 0 0 0;
font-size:7pt;
}

.concertinfo, .aboutinfo, .joinus_info {
font-size:0.8em;
margin:14px;
}

blockquote.indented {
margin:3px 6px 3px 14px;
}

.newyear {
width:90%;
text-align:center;
font-size:12px;
padding:7px 0 7px 0;
}

.tickets {
font-size:0.8em;
margin:10px 0 5px 0;
}

.previoustable {
margin:10px;
font-size:0.8em;
}

.joinphone {
font-size:0.8em;
}

#contactform {
padding:10px 0 10px 0;
}

#name, #email {
font-size:7pt;
}

#subject, #message {
font-size:7pt;
}

}

/************* BIG STYLESHEET *************/

@media screen and (min-width: 1200px) {

#dandc {font-size:10pt;}

.divtitle {
font-size:1.2em;
}

.mdname {
font-size:1.5em;
margin:0 0 7px 0;
}

.mdjob {
font-size:1em;
}

#committee {
font-size:1em;
padding:15px 0 0 0;
}

#committeetitle {
padding:0 0 10px 0;
}

#aboutcontent,
#concertscontent,
#contactcontent,
#joincontent,
#mdcontent,
#previouscontent {
font-size:1em;
}

#aboutcontent,
#concertscontent,
#previouscontent {
margin:0 0 5px 0;
}

#mdcontent {
margin:0 20px 0 20px;
}

#mdcontent p {
text-indent:0.6cm;
}

.leftpic {
float:left;
margin:0 15px 15px 0;
}

.rightpic {
float:right;
margin:0 0 8px 15px;
}

.mdlink {
margin:20px 0 0 0;
font-size:11pt;
}

.concertinfo, .aboutinfo, .joinus_info {
font-size:1em;
margin:30px;
}

blockquote.indented {
margin:7px 14px 7px 25px;
}

.newyear {
font-size:20px;
padding:15px 0 15px 0;
}

.tickets {
font-size:1em;
margin:20px 0 0 0;
}

.previoustable {
margin:30px;
font-size:1em;
}

.joinphone {
font-size:1em;
}

#name, #email {
font-size:12pt;
}

#subject, #message {
font-size:11pt;
}

}