/* CSS layout */ /* STANDARD CODING FOR CONSISTENCY ACROSS BROWSERS */ /* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */ 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, 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,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; font: inherit; vertical-align: baseline; } /* This rule resets a core set of elements so that they will appear consistent across browsers. */ * {margin:0; padding:0;} /* normalize style rendering across browsers */ html, body { font-family: sans-serif; /* Set default font family to sans-serif */ -ms-text-size-adjust: 100%; /* Prevent iOS text size adjust after orientation change, without disabling user zoom */ -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjust after orientation change, without disabling user zoom */ height:100%; /* needed for footer positioning*/ } /* Remove the gray background color from active links in IE 10. */ a {background-color: transparent;} /* Improve readability when focused and also mouse hovered in all browsers */ a:active, a:hover {outline: 0;} /* Address inconsistent and variable font size in all browsers */ small {font-size: 80%;} /* Remove border when inside `a` element in IE 8/9/10 */ img {border: 0;} /* Correct overflow not hidden in IE 9/10/11 */ svg:not(:root) {overflow: hidden;} /* Address differences between Firefox and other browsers */ hr { -moz-box-sizing: content-box; box-sizing: content-box; } /* Remove most spacing between table cells */ table {border-collapse: collapse; border-spacing: 0;} td, th {padding: 0;} /* ============= CONTENT AREAS ============= */ /* Adjust styling for new site. Remove unwanted elements */ body { /* background: url('../images/background.jpg') #EEE8DA repeat fixed center center; */ color:#000000; font-size:10pt; font-family: Verdana, Geneva, sans-serif; font-weight: normal; font-style: normal; background-color:#C49759; } /* PAGE LAYOUT */ /* 1. The 'clear' statement disallows anything on either side outside of the container, but does allow other elements inside it. */ /* 2. The 'margin:0 auto' statement is what centers the container. */ /* 3. The 'overflow:auto' statement ensures that the container stretches to the same height as the longest element inside it. */ /* 4. If there is no outer wrapper enclosing the main content, then widths must have fixed px values. */ /* If you want to add navs that stick at the screen top */ #navs { clear:both; overflow:auto; margin:0 auto; width: 100%; border:0px; padding-top:6px; padding-bottom:6px; text-align:center;} .navs {color:#A3763A; font-size:16px; text-align:center;} .navs a:link {color:#FFFFFF; text-decoration:none;} .navs a:visited {color:#FFFFFF; text-decoration:none;} .navs a:active {color:#FFFFFF; text-decoration: underline;} .navs a:hover {color:#FFFFFF; text-decoration:underline;} /* See example 2-columns pg */ #wrapper { clear:both; margin:0 auto; overflow:auto; position:relative; /* needed for footer positioning*/ width:auto !important; max-width:1090px !important; height:auto; /* IE6: treated as min-height*/ min-height:90% !important; /* real browsers */ background-color:#FFFFFF; border:1px solid #A3763A; } /* */ /* -The next 4 lines are needed to create rounded corners: -moz-border-radius:40px; -webkit-border-radius:40px; -khtml-border-radius:40px; border-radius:40px; */ /* These lines can be added to a div to create left and right shadows. You can adjust widths. box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000; -moz-box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000; -webkit-box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000; */ /* -the next 2 lines are needed to control transparency if required opacity: 0.4; filter: alpha(opacity=40); For IE8 and earlier */ /* See example 2-columns pg */ #content { position:relative; clear:both; margin:0 auto; overflow:auto; width:88%; } /* 1. Add and adjust any of these Sections that you need */ /* 2. Elements that fit inside a Wrapper do not necessarily need to specify fixed widths */ /* 3. If you have Sticky Navs fixed at the top of the page, you will need to add a PADDING-TOP value to divs underneath it */ #header { /* see example on 2-columns pg pg */ position:relative; clear:both; margin: 0 auto; overflow:auto; width:88%; } #gallery clear:both; margin:0 auto; overflow:auto; width:100%; padding: 0px 0px 20px 0px; position:relative; background-color: #FFFFFF;} #contact { clear:both; margin:0 auto; overflow:auto; width:100%; padding: 0px 0px 20px 0px; position:relative; background-color: #E6EAEC;} #footer { clear:both; overflow:auto; margin:0 auto; width:95% !important; max-width:1090px !important; border:0px; padding-top:15px; text-align:center;} .footer {font-size:11px; text-align:center; color: #E6D2B9} .footer a:link {font-size:13px; color:#FFFFFF; text-decoration:none;} .footer a:visited {font-size:13px; color:#FFFFFF; text-decoration:none;} .footer a:active {font-size:13px; color:#FFFFFF; text-decoration: underline;} .footer a:hover {font-size:13px; color:#FFFFFF; text-decoration:underline;} /* ============= GENERAL STYLING ============= */ /* Adjust styling for new site */ h1 {color:#000000; font-size:48px; font-weight:normal; font-family: 'Marcellus SC', serif;} h2 {color:#BC9450; font-size:28px; font-weight:normal; font-family: "Trebuchet MS", Verdana, Geneva, sans-serif; padding-top:12px; line-height:2em;} h3 {color:#222222; font-size:24px; font-weight:bold; margin-bottom:10px; font-family: 'Marcellus SC', serif; -webkit-font-smoothing: antialiased !important;} h4 {color:#993366; font-size:15px; font-weight:normal; margin-bottom:10px; text-align:center !important; font-family: "Century Gothic", Verdana, Geneva, sans-serif;} h5 {color:#3D8000; font-size:15px; font-weight:normal; margin-bottom:10px; text-align:center !important; font-family: "Century Gothic", Verdana, Geneva, sans-serif;} h6 {color:#FFFFFF; font-size:14px; font-weight:normal; text-align:center !important; font-family: "Century Gothic", Verdana, Geneva, sans-serif;} p {color:#000000 !important; font-size: 12px; font-family: Verdana, Geneva, sans-serif; font-weight: normal; font-style: normal; line-height: 150% !important; margin-bottom:20px !important} .center {text-align:center !important;} .indent {text-indent:18px !important;} .italic {font-style:italic !important;} .justify {text-align:justify !important;} .left {text-align:left !important;} .right {text-align:right !important;} .row {display:inline;} .small {color:#BC8943 !important; font-size:80%; -webkit-font-smoothing: antialiased !important;} .spacer {clear:both !important; margin:0 auto; overflow:auto; width:100%; height:10px;} .uppercase {text-transform:uppercase;} ul {margin-bottom:0; padding-left:8%;} ol {text-align:justify; margin-top:4px; margin-bottom:0px;} li {margin-bottom:10px; text-align:left; line-height:140%;} strong {font-weight: bold;} em {font-style: italic;} img {border:0px;} hr {margin:25px 0px 20px 0px; border-width:1px 0px 0px 0px !important; border-top:#dbae70 1px solid; -moz-box-sizing: content-box; box-sizing: content-box; height: 0;} a {background-color: transparent;} a:link {color:#A2004A; text-decoration:none;} a:visited {color:#A2004A; text-decoration:none;} a:active {color:#C49759; text-decoration:none;} a:hover {color:#C49759; text-decoration:none;} .favs {width:20px; padding:0px 0px 0px 10px;} table {border-collapse: collapse; border-spacing: 0;} td, th {padding: 0;} /* Visible Table with content*/ .viztable {border-collapse: collapse; } .viztable td {padding:2px; vertical-align: top; border: 0px; } .viztable_2 td {padding:3px; vertical-align: top; border: border: 1px solid; font-family: verdana, arial, Arial, Helvetica, sans-serif; font-size: 9pt; } .viztable_header {padding:2px;vertical-align: top;background-color:#E3E5E7; } .contacts {border-top: 1px solid #aaaaaa; padding:24px 0px 24px 5px !important; vertical-align:middle;} .form {color:#A98800; font-size:12px; font-family:Calibri, Arial, Arial, Helvetica, sans-serif; padding-left:5%;} /* Change background-color on FORM & SEND pages themselves */ .formfield { color: #000000; padding: 2px 6px; background: #E6EAEC; margin-top: 2px; margin-bottom:5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid #6da7dd;} /* BOXES with border */ .box {margin:0 auto !important; width:229px;} .boxhp {margin:0 auto !important; width:309px;} /* Reset buttons border. It's important for input and button tags. * border-collapse should be separate for shadow in IE. */ .button { background: #C49759; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; border-width:0px !important; padding: 6px 8px 6px 8px; margin:0 auto !important; cursor: pointer; color:#FFFFFF !important; font-size:14px; text-align:center; } .img-circle { border:3px #cccccc double; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; -khtml-border-radius:50%; } /* MEDIA DIFFERENTIATORS */ /* For things you do not want to see on-screen */ .printonly {display: none;} .screen {} /* this can be used in the same way in the Print CSS. /* ===== RESPONSIVE ADJUSTMENTS ===== */ /* MOBILE STYLING */ /* == Phone Portrait == */ @media (max-width: 480px) { #wrapper {border:none;} #content {width:90% !important; padding-left:0px !important; padding-right:0px !important;} .movecentre {text-align:center !important;} h2 {font-size:16px;} .img {max-width:98% !important;} .view-logo img {height: auto; width: 100%; top:0px !important; } /* Next 2 lines can be used to replace a table that is too big to read on a phone */ .chart {display: none; } .chart1 {display: block !important; background-image: url('../images/chart1.png') !important; width:260px; height:100px !important; margin:0 auto !important; } /* Next line can be used to force a line break in narrow screens */ .break {display: block;} /* Choose the width of INNNER sections - see stickynavs-scroll pg example*/ .inner_content {max-width:95%;} /* Change size of NAVS */ .navs a {font-size:90%;} /* Hide something you don't want to see in small screens */ .hidden {display:none !important;} /* Using different images in different size screens - See 2-column pg example */ .hdrdesk {display: none; } } /* == Phone Landscape == */ @media (min-width: 481px) and (max-width: 768px) { .table {width: 90% !important; max-width:90% !important; margin:0 auto !important;} .wrapper {width:100% !important; max-width:100% !important;} .img {max-width:90% !important;} .view-logo img {height: auto; width: 100%; top:-38px !important;} /* Next line can be used to force a line break in narrow screens */ .break {display:none;} /* Choose the width of INNNER sections */ .inner_content {max-width:95%;} /* Change size of NAVS */ .navs a {font-size:90%;} /* Using different images in different size screens - See 2-column pg example */ .hdrcell {display: none; } } /* == Tablet Portrait - add styles as required == */ @media (min-width: 769px) and (max-width: 979px) { /* Using different images in different size screens - See 2-column pg example */ .hdrcell {display: none; } .break {display:none;} } /* == Tablet Landscape - add styles as required == */ @media (min-width: 980px) and (max-width: 1199px) { /* Using different images in different size screens - See 2-column pg example */ .hdrcell {display: none; } .break {display:none;} } /* == Desktops - can be used to specify minimum width == */ @media (min-width: 1200px) { /* Using different images in different size screens - See 2-column pg example */ .hdrcell {display: none; } .break {display:none;} /* Adjust height of Flexslider - See flexslider pg example */ .flex-height {height:270px;} } /* ===== PROPORTIONAL COLUMNS ===== */ /* RESPONSIVE GRID OF 12 */ /* SECTIONS */ .section { clear: both; padding: 0px; margin: 0px; } /* COLUMN SETUP */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* GROUPING */ .group:before, .group:after { content:""; display:table; } .group:after { clear:both;} .group { zoom:1; /* For IE 6/7 */ } /* GRID OF TWELVE */ .span_12_of_12 { width: 100%; } .span_11_of_12 { width: 91.53%; } .span_10_of_12 { width: 83.06%; } .span_9_of_12 { width: 74.6%; } .span_8_of_12 { width: 66.13%; } .span_7_of_12 { width: 57.66%; } .span_6_of_12 { width: 49.2%; } .span_5_of_12 { width: 40.73%; } .span_4_of_12 { width: 32.26%; } .span_3_of_12 { width: 23.8%; } .span_2_of_12 { width: 15.33%; } .span_1_of_12 { width: 6.866%; } /* Go full width below 480 pixels */ @media only screen and (max-width: 768px /* prev 480px */) { .col { margin: 1% 0 1% 0%; } .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 { width: 100%; } } /* === END RESPONSIVE GRID === */ /* This type of code goes into HTML:
*/ /* === HAMBURGER === */ /* === HAMBURGER === */