/* http://meyerweb.com/eric/tools/css/reset/ */ /* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height:1;} ol, ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;} /* remember to define focus styles! */ :focus {outline:0;} /* remember to highlight inserts somehow! */ ins {text-decoration:none;} del {text-decoration:line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse:collapse; border-spacing:0;} /* =Basic HTML --------------------------------------------------------------------------------*/ body {font:13px/1.5 Helvetica, Arial, Verdana, sans-serif; background:#05293f;} a:focus {outline:1px dotted invert;} hr {border:0 #ccc solid; border-top-width:1px; clear:both; height:0} /* =Headings --------------------------------------------------------------------------------*/ h1 {font-size:25px;} h2 {font-size:23px;} h3 {font-size:21px; color:#05293f;} h4 {font-size:19px;} h5 {font-size:17px;} h6 {font-size:15px;} /* =Spacing --------------------------------------------------------------------------------*/ ol {list-style:decimal;} ul {list-style:square;} li {margin-left:30px;} p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {margin-bottom:20px;} /* =Containers --------------------------------------------------------------------------------*/ .container_16 {margin-left:auto; margin-right:auto; width:960px;} /* =Grid >> Global --------------------------------------------------------------------------------*/ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {display:inline; float:left; margin-left:10px; margin-right:10px;} /* =Grid >> Children (Alpha ~ First, Omega ~ Last) --------------------------------------------------------------------------------*/ .alpha {margin-left:0;} .omega {margin-right:0;} /* =Grid >> 16 Columns --------------------------------------------------------------------------------*/ .container_16 .grid_1 {width:40px;} .container_16 .grid_2 {width:100px;} .container_16 .grid_3 {width:160px;} .container_16 .grid_4 {width:220px;} .container_16 .grid_5 {width:280px;} .container_16 .grid_6 {width:340px;} .container_16 .grid_7 {width:400px;} .container_16 .grid_8 {width:460px;} .container_16 .grid_9 {width:520px;} .container_16 .grid_10 {width:580px;} .container_16 .grid_11 {width:640px;} .container_16 .grid_12 {width:700px;} .container_16 .grid_13 {width:760px;} .container_16 .grid_14 {width:820px;} .container_16 .grid_15 {width:880px;} .container_16 .grid_16 {width:940px;} /* =Prefix Extra Space >> 16 Columns --------------------------------------------------------------------------------*/ .container_16 .prefix_1 {padding-left:60px;} .container_16 .prefix_2 {padding-left:120px;} .container_16 .prefix_3 {padding-left:180px;} .container_16 .prefix_4 {padding-left:240px;} .container_16 .prefix_5 {padding-left:300px;} .container_16 .prefix_6 {padding-left:360px;} .container_16 .prefix_7 {padding-left:420px;} .container_16 .prefix_8 {padding-left:480px;} .container_16 .prefix_9 {padding-left:540px;} .container_16 .prefix_10 {padding-left:600px;} .container_16 .prefix_11 {padding-left:660px;} .container_16 .prefix_12 {padding-left:720px;} .container_16 .prefix_13 {padding-left:780px;} .container_16 .prefix_14 {padding-left:840px;} .container_16 .prefix_15 {padding-left:900px;} /* =Suffix Extra Space >> 16 Columns --------------------------------------------------------------------------------*/ .container_16 .suffix_1 {padding-right:60px;} .container_16 .suffix_2 {padding-right:120px;} .container_16 .suffix_3 {padding-right:180px;} .container_16 .suffix_4 {padding-right:240px;} .container_16 .suffix_5 {padding-right:300px;} .container_16 .suffix_6 {padding-right:360px;} .container_16 .suffix_7 {padding-right:420px;} .container_16 .suffix_8 {padding-right:480px;} .container_16 .suffix_9 {padding-right:540px;} .container_16 .suffix_10 {padding-right:600px;} .container_16 .suffix_11 {padding-right:660px;} .container_16 .suffix_12 {padding-right:720px;} .container_16 .suffix_13 {padding-right:780px;} .container_16 .suffix_14 {padding-right:840px;} .container_16 .suffix_15 {padding-right:900px;} /* =Clear Floated Elements --------------------------------------------------------------------------------*/ /* http://sonspring.com/journal/clearing-floats */ .clear {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;} /* http://www.positioniseverything.net/easyclearing.html */ .clearfix:after {clear: both; content: '.'; display: block; visibility: hidden; height: 0;} .clearfix {display: inline-block;} * html .clearfix {height: 1%;} .clearfix {display: block;} .red, #content a:link, #content a:visited {color:#de180f;} p, li, td {color:#05293f;} #header_wrap {background:#fff url(/images/bg_gradient.png) repeat-x;} #header_wrap_two {background:url(/images/bg_flag.png) repeat-x; height:40px;} #logo {padding-top:10px; position:relative; top:3px; height:98px;} #ribbon {width:172px; height:265px; position:absolute; left:780px; top:-4px; z-index:100;} #grass {background:url(/images/bg_grass.png) repeat-x; height:40px;} #nav {background:#d1f0ff;} #nav ul, #nav li {list-style-type:none; margin:0; padding:0;} #nav li {float:left;} #nav a {display:block; color:#0a476c; text-decoration:none; text-align:center; padding:10px 12px 6px 12px; margin-right:2px; float:left; font-size:15px;} #nav a:hover {background:#de180f; color:#fff;} #concert a#nav_concert, #derby a#nav_derby, #events a#nav_events, #history a#nav_history, #juniorfair a#nav_juniorfair, #rental a#nav_rental, #sponsor a#nav_sponsor, #tickets a#nav_tickets, #tribute a#nav_tribute {background:#de180f; color:#fff;} #fair_date {color:#0a476c; position:relative; top:-27px; left:-175px; font-size:18px;} #content_wrapper {background:#fff;} #content {background:#fff3d9 url(/images/bg_content_highlight.jpg) no-repeat top center; padding-top:45px; padding-bottom:20px;} span.images {border:1px solid #836832; display:inline-block; margin-bottom:20px;} #events span.images, #history span.images, #fairground span.images {float:right; margin:0 0 20px 20px;} span.images img {border:1px solid #fff;} /* Homepage */ #hmpg_feature {background:#0a476c url(/images/bg_hmpg_feature.jpg) no-repeat center; border-bottom:5px solid #e1c997;} #hmpg_feature_wrapper {background:url(/images/bg_hmpg_feature.png); padding:20px 0; border:1px solid #05293f; margin-top:30px; margin-bottom:30px; height:316px; overflow:hidden;} #hmpg_tabs_wrapper {width:470px; display:inline; margin-left:0; margin-right:0; float:left;} .hmpg_tabs {padding:23px 0; overflow:auto; height:59px;} .selected {background:#05293f; color:#fea;} .selected .hmpg_tab_title, .selected .hmpg_tab_title a, .selected .hmpg_tab_txt a {color:#fea;} .hmpg_tab_title {margin:0; padding:0 20px 0 60px; line-height:1; font-size:1.5em; display:block;} .hmpg_tab_txt {margin:0; padding:0 20px 0 60px; font-style:normal; display:block;} .hmpg_tab_title, .hmpg_tab_title a, .hmpg_tab_txt a {text-decoration:none; color:#fff;} #hmpg_tab_image_wrapper {overflow:hidden; height:316px; width:460px; position:relative; float:left; display:inline; margin:0;} .hmpg_tab_image {width:460px; height:316px; top:316px; position:absolute;} .hmpg_tab_image img {border:8px solid #fff;} #directions_thumbnail {margin-bottom:30px;} #office_hours {color:#05293f; margin:0;} #office_hours td {text-align:left; padding-right:25px;} #office_hours td h6 {margin:0; font-size:1.1em;} #holidays {font-style:normal; color:#de180f;} /* Events */ #events h2 {margin:0; color:#de180f; line-height:1.2;} #events h3 {margin:18px 0 0 0; line-height:1; font-size:1.3em;} #events h4 {margin:0; font-style:italic; font-size:.9em; line-height:1; color:#de180f;} #events table {} td.event_time {width:100px; text-align:right;} td.event_event {padding-left:20px;} #events_right {float:right; width:300px;} #events_right h3 {padding-bottom:10px; text-align:right;} #events_sponsors {float:right; text-align:right;} #events_sponsors p {margin-bottom:50px;} #fairground table {} #fairground td {padding:0 10px 10px 0;} /* Tickets */ #tickets .tickets_header {margin-bottom:20px;} #tickets .tickets_header h1 {float:left; padding-right:20px;} #tickets .tickets_header p, #tickets .tickets_header h6 {margin-bottom:0;} #tickets h3 {margin-bottom:0;} #tickets table {width:100%;} #tickets td {padding-bottom:10px;} #tickets td.tickets_description {width:55%;} #tickets td.tickets_cost {width:45%} #tickets td em {display:block;} /* Concert */ #concert #content h3, #concert #content h5 {margin:0; color:#05293f;} #concert #content td.ticket {padding:0 20px 5px 0;} #slider_wrapper {background:url(/images/bg_concert_img.png) no-repeat; width:394px; height:278px; padding:15px;} #slider { width: 394px; /* important to be same as image width */ height: 278px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } #concert_sponsor {padding-top:30px;} #concert_sponsor h6 {margin:0;} #sliderContent { width: 394px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: 0; /* important */ list-style-type:none; } .sliderImage { float: left; /* important */ position: relative; /* important */ display: none; /* important */ margin-left:0; } .sliderImage span { position: absolute; /* important */ left: 0; font: 15px; padding: 10px 13px; width: 374px; background-color: #000; filter: alpha(opacity=70); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ color: #fff; display: none; /* important */ bottom: 0; /* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ } /* Sponsors */ #sponsor #content h5 {color:#de180f; font-size:1.1em; margin-bottom:0;} #sponsor #content ol li {padding-bottom:12px;} #sponsor table {width:100%;} #sponsor table td {width:50%;} /* History */ #history_quote {text-align:center;} /* Junior Fair */ #juniorfair #content strong {color:#de180f;} #juniorfair #download_column h3 {margin:0;} #juniorfair ul#download li {list-style-type:none; padding:0 0 3px 25px; margin:0;} #juniorfair ul#download li.word {background:url(/images/page_word.png) no-repeat;} #juniorfair td.meeting_time {padding:0 15px 4px 0;} /* Meeting Dates */ #meetings h3 {margin:0; text-align:center; font-size:1.3em;} #meetings table {margin:10px auto;} td.meeting_date {text-align:right; padding:0 15px 3px 0;} #meetings p {text-align:center; padding:0 20px;} /* Derby */ #derby #derby_form {padding-top:20px;} #derby_form h3 {margin-bottom:0;} #derby pre {display:none;} #footer {background:#0a476c url(/images/bg_footer.png) repeat-x; color:#fff;} #footer #ibg {padding-top:7px;} #footer_container {padding:22px 0;} #footer h6 {margin:0;} #footer address {font-style:normal; margin:0; display:block; float:left; padding-right:15px;} #footer a {color:#d1f0ff;} #footer p {clear:both; margin:0;}