/***************************
* Colours
***************************
Light blue: #0088cc;
Pink/red : #d40055;
 */
/***************************
* Defaults
***************************/
* {margin:0; padding:0;}
body {background:url('../images/layout/bodyBackgroundGradient.jpg') repeat-x; font-family:Trebuchet, "Trebuchet MS", "arial narrow", arial; font-size:89%;}
img {margin:10px auto 0 auto; text-align:center; border:none;}
h1 {font-size:2.3em; font-weight:500; color:#525252;}
h2 {font-size:1.7em; font-weight:500; color:#d40055}
h3 {margin:0 0 6px 0; font-size:1.6em; font-weight:500;}
p {margin:0 0 12px 0; font-size:1.1em; font-weight:500; color:#4d4d4d;}
a, a:visited {color:#0088cc;}
ul {list-style-type:none;}

/***************************
* Specific
***************************/
.clear {clear:both; height:1px;}
.small {font-size:1.1em;}
.italic {font-style:italic;}

/***************************
* Structure / General layout
***************************/
.container {position:relative; width:900px; margin:0 auto;}
.mainContent {margin-top:90px;}
.mainContent img {margin:0 auto; display:block;}
.mainContent ul {font-size:1.1em; color:#4d4d4d;} 
.cloud_1 {position:absolute; top:6px; left:350px; width:226px; height:128px; background:url('../images/layout/cloud_1.jpg');}
.cloud_2 {position:absolute; top:80px; right:90px; width:157px; height:94px; background:url('../images/layout/cloud_2.jpg');}

/***************************
* Navigation
***************************/
.navBar {position:absolute; top:202px; left:0px; width:100%; padding:0 0 8px 0; background:url('../images/layout/navBarBackgroundRepeat.jpg') repeat;}
.navBar ul {width:960px; margin:0 auto;}
.navBar ul li {float:left; display:inline; margin:0; list-style-type:none; list-style-position:inside;}
.navBar ul li a {display:block; padding:10px 16px 8px 16px; font-size:1.1em; font-weight:500; text-decoration:none; color:#fff; border-left:1px solid #58c4dd; border-right:1px solid #228ea7;}
.navBar ul li a:hover, .currentPage {text-decoration:underline; background:url('../images/layout/navBarHover.png') no-repeat top center;}
.navBar ul li a.first {border-left:none;}
.navBar ul li a.last {border-right:none}

/***************************
* Footer
***************************/
.footer {margin:10px 0;}
.footer ul {float:right; list-style-type:none; list-style-image:none;}
.footer ul li {float:left; padding:0 6px; margin:0; font-size:0.9em; color:#878787; border-right:1px solid #878787;}
.footer ul li.last {border:none;}

/***************************
* Text Sections
***************************/
.textSection, .textSectionWithImage {width:900px; margin:10px 0 20px 0; padding:0;}
.textSectionWithImage .text {float:left; width:580px;}
.textSectionWithImage .image {float:right; width:300px;}
.textSection, .textSectionWithImage ul {list-style-position:outside;}
.textSection ul li, .textSectionWithImage ul li {margin:0 0 8px 20px; padding:0 0 0 20px; background:url('../images/layout/bulletPointMusicNote.jpg') no-repeat 0px 10px;}

/***************************
* Homepage Quotes
***************************/
.homepageQuotes {height:100px; padding:0;}
ul.slideshow li {width:100%; text-align:center; font-size:1.4em; margin:0 0 20px 0;}
ul.slideshow li span.quoteSource {color:#d40055;}

/***************************
* Contact Form
***************************/
.contactForm {margin:0 0 20px 0;}
.contactFormRow {width:580px; margin:0 0 20px 0;}
.contactFormRow span {float:left; width:120px; display:block; font-size:1.1em; color:#4d4d4d;}
.contactFormRow input {float:left; width:370px; padding:9px; border:1px solid #d1d1d1; background:url('../images/layout/inputBackground.jpg') repeat-x;} 
.contactFormRow textarea {float:left; padding:9px; font-family:Trebuchet, "Trebuchet MS", Arial; font-size:1em; border:1px solid #d1d1d1; background:url('../images/layout/inputBackground.jpg') repeat-x;}
.contactFormRow .button {float:right; width:180px; margin:0 40px 0 0; padding:6px; font-size:1.2em; font-weight:500; color:#fff; border:1px solid #0591b4; background:url('../images/layout/submitButtonBackground.jpg') repeat-x;}
.contactFormRow .button:hover {text-decoration:underline; background:url('../images/layout/submitButtonBackground.jpg') repeat-x 200px 0px;}

/***************************
* Contact Form - validation
***************************/
.contactForm .contactFormRow span.errorMessage {width:6px; padding:6px 0 0 4px; font-size:2em; color:#ff7373 !important;}
.contactFormRow span.shifted {margin:0 0 0 -10px;}
.contactForm .validationSummary {width:514px; margin:10px 0 0 0; padding:12px; border:1px solid #fff88c; background:#fffeed url('../images/layout/validationSummaryBackgroundGrad.jpg') repeat-x;}
.contactForm .validationSummary .vsHeader {color:#ff5858; font-size:1.1em; font-weight:700;}
.contactForm .validationSummary ul {margin:10px 0 0 0; font-size:1em; list-style-image:none; list-style-position:inside; list-style-type:disc;}
.contactForm .validationSummary ul li {background:none; margin:0; padding:4px;}
.contactFormResponse {font-size:1.1em;}

/***************************
* Contact Form - hover states
***************************/
.contactForm .contactFormRow input.inputHover, 
.contactForm .contactFormRow textarea.inputHover {border:1px solid #3abfdf; background:url('../images/inputBackgroundHover.jpg') repeat-x;}

/***************************
* Photo Gallery
***************************/
.photoGallery {margin-top:20px;}
.photoGallery .galleryImage {width:210px; height:204px; margin-right:12px; margin-bottom:30px; float:left; overflow:hidden; }
.photoGallery a  {
    display:block; 
    width:200px;
    padding:0;
    -moz-box-shadow: 4px 4px 5px #888;
    -webkit-box-shadow: 4px 4px 5px #888;
    box-shadow: 4px 4px 5px #888;
    }
.photoGallery img {padding:0; vertical-align:middle; }