/* Color Legend font-family: 'Abel', sans-serif; font-family: 'Open Sans Condensed', sans-serif; font-family: 'Mate SC', serif; font-family: 'Bilbo', cursive; */ /* Reset */ html, body { margin: 0; padding: 0; border: 0; background: transparent; font-size:12px; } div, span, article, aside, footer, header, hgroup, nav, section, h1, h2, h3, h4, h5, h6, h7, p, blockquote, a, ol, ul, li, table, tr, th, td, tbody, tfoot, thead { margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent; } img { margin:0; padding:0; border:0; } table, tr, th, td, tbody, tfoot, thead { margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent; } table { border-collapse: collapse; border-spacing: 0; } input, select, textarea, form, fieldset { margin: 0; padding: 0; border: 0; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; } h1, h2, h3, h4, h5, h6, p, li, ol blockquote, td, th, a, caption, em, strong, strike { font-family: Arial, Helvetica, sans-serif; font-size:100%; font-weight: normal; font-style: normal; line-height: 100%; text-indent: 0; text-decoration: none; text-align: left; color: #000; } ol, ul { list-style: none; } /* Global */ /* Need to change .wrapper border-top:10px #9999cc solid to same color */ /* html { background-color: #002F5E; } (Navy blue)*/ /* html { background-color:#585ea7; } (Royal blue)*/ /* html { background-color:#E1E2D3; } (Soft beige grey)*/ html { background-color: #E1E2D3; } body { } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family:'Open Sans Condensed', Arial, Helvetica, sans-serif; font-weight: bold; color: #000; } h1 { font-size:24px; } h2 { font-size:20px; } h3 { font-size:16px; } h4 { font-size:14px; } h5 { font-size:14px; } h6 { font-size:14px; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img, { margin: 0; } /* Text Elements */ p { color:# 000; font-size:14px; line-height:150%; } p .left { margin: 1.5em 1.5em 1.5em 0; padding: 0; } p .right { margin: 1.5em 0 1.5em 1.5em; padding: 0; } a { } a:link { color: #00f; } a:visited { color: #0f0; } a:active { color: #000; } a:focus { color: #666; } a:hover { color: #f00; } blockquote { color:#000; font-size:12px; } strong { font-weight: bold; } em { font-style: italic; } /* Images */ /* Lists */ ul { } ol { list-style-type:decimal; } ul li { color:#000; font-size:12px; } ol li { color:#000; font-size:12px; } dl { } dt { } dd { } /* Tables */ #sample-table { width:100%; margin:20px 0px; } #sample-table tr { } #sample-table .odd { background-color:#eee; } #sample-table .even { background-color:#fff; } #sample-table th { font-weight: bold; } #sample-table thead, #sample-table th { background-color:#FFE0C1; } #sample-table tbody { } #sample-table th, #sample-table td { padding:5px; border:1px #ccc solid; font-size:12px; } #sample-table caption { } #sample-table tfoot { } #sample-table .tfooter { background-color:#ccc; text-align:center; font-style:italic; } #sample-table caption { background-color: #FFE0C1; text-align:center; padding:15px; font-size:14px; font-weight:bold; border:1px #ccc solid; } #sample-table tfoot td { text-align:center; font-size:10px; font-style:italic; padding:5px; background-color:#FFE0C1;} /* Miscellaneous */ sup, sub { line-height: 0; } abbr, acronym { border-bottom: 1px dotted #666; } address { } del { background:#FFCECE; color:#f00; } code, pre { background-color:#FF9; padding:2px 0px; margin:4px 25px; font-family:"Courier New", Courier, monospace; font-size:12px; font-weight:normal; line-height:150%; } /* Containers */ /*#wrapper { width:900px; margin:0 auto; background-color: #fff; padding:0 40px; border-top:10px #585EA7 solid; } */ .wrapper { width:900px; margin:0 ; background-color: transparent ; padding:0 40px; border-top:10px ##E1E2D3 solid; } #top { } #name { float:left; margin:50px 0 60px 0; } #wc { font-family:'Open Sans Condensed', Arial, Helvetica, sans-serif; font-size:42px; font-weight:bold; line-height:180%; color:#000; } #social-media { margin:40px 0; float:right; } #social-media ul { } #social-media ul li { display:inline; } #social-media img { width:32px; height:32px; } #social-media p { font-size:14px; font-weight:bold; margin:0 0 12px 0; text-align:right; color:#7c7e86; } /* Top Navigation/Menu bar */ #topnav { clear:both; margin:0px 0px 20px 0px; list-style-type:none; } #topnav ul { border-top: 1px #aaa dotted; padding: 0px 0px ; } #topnav ul li { padding: 1px; float:left; position:relative; display:inline; margin-right:20px; } #topnav ul li a { font-weight:bold; display:block; height:50px; width:100px; background-color:#FFF; font-color: #585ea7; text-decoration:none; text-align:center; float:left; } #topnav li > ul { display:none; position:absolute; left:0; top:100%; } #topnav li:hover > ul { display:block; color: #7c7e86; } #topnav a:link { color: #800000; } #topnav a:visited { color: #800000; } #topnav a:active { color: #800000; } #topnav a:hover { color: #7c7e86; } #topnav a:focus { color: #7c7e86; } /* Bottom Navigation/Menu bar */ #bottnav { clear:both; margin-top:35px; margin:25px 0px 0px 0px; padding:30px 0px; list-style-type:none; padding-left: 0px; padding-right: 5px; background-color: #fff; height: 30px; border-top:1px #333 dotted; } #bottnav ul { border-top: 5px hidden; padding: 0px 0px} #bottnav ul li { float:left; position:relative; display: block; margin: 0 1px;; margin-right:20px; background-color:transparent; z-index: 999; } #bottnav ul li a { font-weight:bolder; display:block; line-height: 15px; text-decoration:none; font-size:14px; zoom: 1; padding: 20px 2px;} #bottnav li > ul { display:none; position:absolute; left:0; top:100%; } #bottnav li:hover > ul { display:block; color: #7c7e86; } #bottnav a:link { color: #800000; } #bottnav a:visited { color: #800000; } #bottnav a:active { color: #800000; } #bottnav a:hover { color: #7c7e86; } #bottnav a:focus { color: #7c7e86; } /* #bottnav { clear:both; margin: 0px 0px 0px 0px; padding: 0px 0px; list-style: none; height: 30px; padding-left: 0px; padding-right: 5px; background-color: #fff; } } #bottnav ul { border-top: 5px hidden; padding: 0px 0px} #bottnav ul li { float: left; display: block; background-color:transparent; position: relative; z-index: 999; margin: 0 1px; margin-right:20px } #bottnav ul li a { display: block; padding: 0; font-weight: bolder ; line-height: 15px; text-decoration: none; color: #80000; font-size:14px; zoom: 1; padding: 0px 2px; } */ /* #footer { clear:both; padding:15px 0px; border-top:1px #333 dotted; } #footer a { font-size:14px; font-weight:bold; text-align:center; display:block; } #footer a:link { color:#800000; } #footer a:visited { color:#800000; } #footer a:active { color:#800000; } #footer a:hover { color:#737e86; } #footer a:focus { color:#737e86; } #footer p { text-align:center } */ #banner { background-image:url(../images/banner/b1.jpg); background-repeat:no-repeat; } /* Home Page rightside column */ #rightside { width:270px; float:right; margin:40px 0px; } #rightside h2 { font-size:24px; font-weight:bold; margin:0 0 20px 0; color:#800000; } #rightside h3 { font-size:24px; font-weight:bold; margin:0 0 20px 0; color:#800000; } #rightside p { line-height:160%; margin:12px 0; } #rightside .image { width:2650px; } #rightside li { list-style-type:square; margin:0 0 12px 30px; } #rightside a { } #rightside a:link { color:#000; } #rightside a:visited { color:#000; } #rightside a:active { color:#000; } #rightside a:hover { color:#BF6000; } #rightside a:focus { color:#BF6000; } /*Media information - Rightside */ #Media h6 { font-size:14px; font-weight:bold; margin:0 0 20px 0; color:#002F5E; } #Media h7 { font-size:14px; font-weight:bold; margin:0 0 20px 0; color:#002F5E; } #Media p { line-height:160%; margin:12px 0; } #Media a { } #Media a:link { color:#002F5E; } #Media a:visited { color:#002F5E; } #Media a:active { color:#002F5E; } #Media a:hover { color:#BF6000; } #Media a:focus { color:#BF6000; } /* Home Page main content area */ #leftside { width:580px; float:left; margin:30px 0; } #leftside h1 { font-size:32px; font-weight:bold; margin:10px 0px 20px 0px; color:#800000; border-bottom:1px #000 dotted; padding-bottom:22px; margin-bottom:22px; } #leftside h2 { font-size:24px; font-weight:bold; margin:20px 0px 20px 0px; color:#800000; } #leftside h3 { font-size:16px; font-weight:bold; margin:10px 0px 20px 0px; color:#800000; } #leftside h4 { font-size:14px; font-weight:bold; margin:20px 0px 10px 0px; color:#800000; } #leftside h6 { font-size:18px; font-weight:bold; margin:20px 0px 10px 0px; color:#002F5E; } #leftside p { line-height:180%; } #leftside img { } #leftside li { list-style-type:square; margin:10px 40px; } #leftside a { } #leftside button {background-color:#21B43A; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #leftside a:link { color:#21B43A; font-weight:bold; } #leftside a:visited { color:#21B43A; } #leftside a:active { color:#21B43A; } #leftside a:hover { color:#737e86; } #leftside a:focus { color:#737e86; } #content { width:580px; float:none; margin:30px 0; } #content h1 { font-size:32px; font-weight:bold; margin:10px 0px 20px 0px; color:#800000; border-bottom:1px #000 dotted; padding-bottom:22px; margin-bottom:22px; } #content h2 { font-size:24px; font-weight:bold; margin:20px 0px 20px 0px; color:#800000; } #content h3 { font-size:16px; font-weight:bold; margin:10px 0px 20px 0px; color:#800000; } #content h4 { font-size:14px; font-weight:bold; margin:20px 0px 10px 0px; color:#800000; } #content h6 { font-size:14px; font-weight:bold; margin:20px 0px 10px 0px; color:#002F5E; } #content p { line-height:180%; } #content img { } #content li { list-style-type:square; margin:10px 40px; } #content a { } #content button {background-color:#21B43A; font-family:Arial, Helvetica, sans-serif; font-size:12px; } #content a:link { color:#21B43A; font-weight:bold; } #content a:visited { color:#21B43A; } #content a:active { color:#21B43A; } #content a:hover { color:#737e86; } #content a:focus { color:#737e86; } /*Special alignment for sponsorship page */ #Sponsorships p {text-align:center; line-height:180%; color:#7c7e86;} #Sponsorships h6 {font-size:16px; color:#002F5E;} #Sponsorships li {text-align:center; list-style-type: none; font-size:14px; font:Arial, Helvetica, sans-serif; color: #7c7e86; } #Sponsorships ul li {font-size:14px; color:#7c7e86; list-style-type: none; } #Sponsorships a:link { color:002F5E; font-weight:bold; } /* Content-2evencol main centered with 2 even columns sections for sponsorship and director pages */ #content-2evencol { width:850px; margin:30px 0 30 0; } #content-2evencol h1 { font-size:32px; font-weight:bold; margin:10px 0px 20px 0px; color:#800000; text-align:center; padding-bottom:22px; margin-bottom:22px ;border-bottom:1px #000 dotted; } #content-2evencol h2 { font-size:24px; font-weight:bold; margin:20px 0px 20px 0px; color:#800000; text-align:center; } #content-2evencol h3 { font-size:16px; font-weight:bold; margin:30px 0px 10px 0px; color:#800000; text-align:center; } #content-2evencol h4 { font-size:14px; font-weight:bold; margin:20px 0px 10px 0px; color:#800000; float:none; text-align:center; } #content-2evencol h5 { font-size:14px; font-weight:500; margin:20px 0px 10px 0px; color:#800000; float:none; text-align:center; } #content-2evencol h6 { font-size:18px; font-weight:bold; color:#002F5E; text-align:center; } #content-2evencol p { line-height:180%; color:#737e86; font:Arial, Helvetica, sans-serif; } #content-2evencol img { border-color:#002F5E; border:solid; border-width:thick; } #content-2evencol li { text-align:center; list-style-type: none; font-size:14px; font:Arial, Helvetica, sans-serif; color: #7c7e86; } #content-2evencol ul li {font-size:14px; color:#002F5E; list-style-type: none; font:Arial, Helvetica, sans-serif; } #content-2evencol a { text-align:center; } #content-2evencol a:link { color:#002F5E; font-weight:bold; } #content-2evencol a:visited { color:#002F5E; } #content-2evencol a:active { color:#002F5E; } #content-2evencol a:hover { color:#737e86; } #content-2evencol a:focus { color:#737e86; } #content-2evencol #col1 {width:395px; float:left; text-align:center; margin-left:30px; } #content-2evencol #col1 p {text-align:center; } #content-2evencol #col2 {width:395px; float:right; text-align:center; margin-left:30px; } #content-2evencol #col2 p {text-align:center; } /* For Youth Chorale Page */ #content-2evencol #colY2 {width:395px; float:right; text-align:center; margin-left:30px; } #content-2evencol #colY2 p {text-align:center; } #content-2evencol #colY2 a:link { color:#21B43A; font-weight:bold; } #content-2evencol #colY2 a:visited { color:#21B43A; } #content-2evencol #colY2 a:active { color:#21B43A; } #content-2evencol #colY2 a:hover { color:#737e86; } #content-2evencol #colY2 a:focus { color:#737e86; } /* For Directors Page */ #content-2evencol #colD p {text-align:left; } #content-2evencol #colD img { margin-right:10px; } /* Content centered with no columns sections */ #content-center { clear:both; width:850px; margin:30px 0 30 0; } #content-center h1 { font-size:32px; font-weight:bold; margin:10px 0px 20px 0px; color:#800000; text-align:center; padding-bottom:22px; margin-bottom:22px ;border-bottom:1px #000 dotted; } #content-center h2 { font-size:24px; font-weight:bold; margin:20px 0px 20px 0px; color:#800000; text-align:center; } #content-center h3 { font-size:16px; font-weight:bold; margin:20px 0px 10px 0px; color:#800000; text-align:center; } #content-center h4 { font-size:14px; font-weight:bold; margin:20px 0px 10px 0px; color:#800000; float:none; text-align:center; } #content-center h5 { font-size:14px; font-weight:500; margin:20px 0px 10px 0px; color:#800000; float:none; text-align:center; } #content-center h6 { font-size:18px; font-weight:bold; color:#002F5E; text-align:center; } #content-center p { line-height:180%; } #content-center img { border-color:#002F5E; border:solid; border-width:thick; margin-left:10px; align:center; } #content-center li { text-align:center; list-style-type: none; font-size:14px; font:Arial, Helvetica, sans-serif; color: #7c7e86; } #content-center a { text-align:center; } #content-center a:link { color:#21B43A; font-weight:bold; } #content-center a:visited { color:#21B43A; } #content-center a:active { color:#21B43A; } #content-center a:hover { color:#737e86; } #content-center a:focus { color:#737e86; } /* For Bell page - Needed New Times Roman font for BRAVA labeling */ #Bells { clear:both; width:850px; margin:5px 0 0 0; } #Bells h1 { font-family:"Times New Roman", Times, serif; font-size:32px; font-weight:bold; margin:5px 0px 0px 0px; color:#800000; text-align:center; margin-bottom: 0px; border-bottom: none; padding-bottom: 0px; } #Bells h2 { font-family:"Times New Roman", Times, serif; font-size:16px; font-weight: normal; color:#800000; text-align:center; } #Bells h3 { font-family:"Times New Roman", Times, serif; font-size:16px; font-weight: normal; margin:0px 0px 0px 0px; color:#800000; text-align:center; } #Bells h4 { font-family:"Times New Roman", Times, serif; font-size:14px; font-weight: normal; margin:0px 0px 0px 0px; color:#800000; float:none; text-align:center; } #sample-popup h3 { padding-bottom:12px; margin-bottom:12px; border-bottom:1px #000 dotted; text-transform:uppercase; } #sample-popup h4 { padding-bottom:12px; margin-bottom:12px; font-size:24px; font-weight:bold; text-transform:uppercase; color:#954A00; } #sample-popup p { margin-bottom:15px; } #sample-popup img { float:left; margin-right:20px; } #myModal1, #myModal2, #myModal3, #myModal4, #myModal5, #myModal6 { z-index:9999; } /* Used to added content to bottom of a page with columns */ #content-bottom { clear:both; padding:15px 0px; } #content-bottom a { font-size:11px; font-weight:bold; text-align:center; display:block; } #content-bottom a:link { color:#000; } #content-bottom a:visited { color:#000; } #content-bottom a:active { color:#000; } #content-bottom a:hover { color:#800000; } #content-bottom a:focus { color:#800000; } #footer { clear:both; padding:15px 0px; border-top:1px #333 dotted; } #footer a { font-size:14px; font-weight:bold; text-align:center; display:block; } #footer a:link { color:#737e86; } #footer a:visited { color:#737e86; } #footer a:active { color:#737e86; } #footer a:hover { color:#800000; } #footer a:focus { color:#800000; } #footer p { text-align:center } #share { margin:20px auto; text-align:center; } #box1 img, #box2 img { /*width:300px; height:200px;*/ margin:0 0 5px 0; border:8px #002F5E solid; } /* Box 1 & 2 image size = 200px X 100px */ #box1 { width:265px; float:left; margin:20px 40px 30px 0; } #box2 { width:265px; float:left; margin:20px 0 30px 0; } /*image size = (posters) 560px X 867px */ #box3 { width:580px; border:10px #002F5E solid; float:left; margin:30px 0; } #box7 { border:none; } /* image size = 450px X 672px */ #box4 { width:450px; border:5px #002F5E solid; margin:30px 0; } /*image size = 300px X 225px */ #box5 { width:300px; float: left; margin:10px 0; } #box6 { width:300px; float: right; margin:10px 0; } /* Layout Extra */ #WebHost {text-align:right; float:right} #WebDesign {text-align:left; float:left; color:7c7e86; font-size:14px; } #Link {color:#21B43A; } #button {background-color:#21B43A; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#7c7e86;} /* Navigation Extra */ /* Forms */ form ol { list-style-type:none; } form { text-align:left; margin:20px; } label { float: left; width: 150px; margin-top:5px; text-align:right; display:block; background:none; font-weight:bold; } submit { background:none; } input { width: 280px; margin:0 0 16px 10px; border:1px #bbb solid; padding:5px; background:none; } input:focus, textarea:focus { background-color:#BFEBFF; } textarea { width: 280px; height: 150px; margin:0 0 16px 10px; border:1px #bbb solid; padding:5px; background:none; } select { margin-bottom:20px; } .month { margin-left:155px; } .submit { width:90px; height:25px; margin-left:160px; font-size:12px; } br { clear: left; } .clear { clear:both; } /* Miscellaneous */ .email-h3 { font-size:16px; font-weight:bold; color:#21B43A; } .button-click {font-size:18px; font-weight:bold; color:#000; text-align:center; } .link-color {font-size:14px; font-weight:bold; color:#21B43A; } .bottom-25 { margin-bottom:25px; } .copyright-text { font-size:80%; font-style:italic; color:#333; } .footer-text { font-size:14px; font-weight:bold; color:#333; text-align:center; padding-bottom:5px; margin-bottom:5px; } .title { font-size:18px; font-weight:bold; color:#800000; } .subtitle { font-size:14px; font-style:italic; color:#800000; } .address { font-size:14px; color:#002F5E; font-weight:bolder; text-align:center; text-transform:uppercase } .artist { font-size:16px; font-weight:bold; color:#333; } .author { font-size:14px font-weight:bold; color:#555; } .editor { font-size:14px font-style:italic; color:#555; } .pub-date { font-size:10px font-style:italic; color:#555; } .article-date { font-size:10px font-style:italic; color:#555; } .location { font-size:10px font-style:italic; color:#555; } .float-right { float:right; margin:5px 0 8px 20px; } .float-left { float:left; } .clear { clear:both; } .hide { display:none; } .block { display:block; } .inline { display:inline; } .first { font-weight:bold; } .last { font-weight:bold; } .left { font-weight:bold; text-align:left; } .right { font-weight:bold; text-align:right; } .centered { font-weight:bolder; text-align:center; } .center { text-align:center; } .added { background:#D7D7FF; } .removed { background:#FFCECE; color:#f00; } .changed { background:#FFB; } /* Success, info, notice and error/alert boxes - from Blueprint CSS Framework */ .error, .alert, .notice, .success, .info { padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; } .error, .alert { background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; } .notice { background: #fff6bf; color: #514721; border-color: #ffd324; } .success { background: #e6efc2; color: #264409; border-color: #c6d880; } .info { background: #d5edf8; color: #205791; border-color: #92cae4; } .error a { color: #8a1f11; } .alert a { color: #8a1f11; } .notice a { color: #514721; } .success a { color: #264409; } .info a { color: #205791; } /* Rescale for smaller devices*/ /* Ipads and mini laptops*/ /* @media screen and (max-width:900px{ #topnav {width:100%; } #rightside {width:70%; } #leftside {width:30% } #leftside img {width:100% } .wrapper {width:100% } #content {width:100% } } */ /* IPhones and Androids */ /* @media screen and (max-width:640px{ #rightside {width:100%; } #leftside {width:100% } } */ /* Older phones */ /* @media screen and (max-width:320px{ #topnav {width:320%; } } */