/* ------------------------------------------------- URI: http://www.thewebsite.co.uk/ Created by AMAZE ------------------------------------------------- CONTENTS 1: SITE MASTER SETUP (including reset from Tripoli) 2: TYPOGRAPHY/DESIGN (to be plugged in from designer-sheet 3: LAYOUT 3.1 main form 3.2 container 3.3 header 3.4 primary content 3.5 secondary content 3.6 tertiary content 3.7 secondary and tertiary content widths 3.7.1 fixed container size 3.7.2 secondary content size 3.7.3 tertiary content size 3.8 footer 4: GLOBAL ELEMENTS / CONTROLS 4.1 accessibility 5: TEMPLATE / PAGE SPECIFIC 6: USEFUL CLASSES /* ----------------------------------------------- 1. SITE MASTER SETUP ----------------------------------------------- */ /* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */ * { margin: 0; padding: 0; text-decoration: none; outline: none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none } table { border-collapse: collapse; border-spacing: 0 } caption, th, td, center { text-align: left; vertical-align: top } q { quotes: "" "" } font { color: inherit !important; font: inherit !important; color: inherit !important } marquee { overflow: inherit !important; /*-moz-binding: none*/ } blink { text-decoration: none } nobr { white-space: normal } /* end of import */ body { text-align: center; min-width: 775px; } ul { list-style: disc outside } ol { list-style: decimal outside } /* This forces a vertical scrollbar to prevent horizontal page jumping in Firefox between those with and those without */ html, body { height: 100%; margin-bottom: 1px; padding: 0 } /* ----------------------------------------------- 2. TYPOGRAPHY / DESIGN ----------------------------------------------- */ html { font-size: 62.5%; font-family: calibri ; line-height: 1.4em; color: #000 } code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size: 1.1em; font-family: Verdana, Arial, Helvetica, sans-serif } h1 { font-size: 2.7em; color: red; margin: 0 0 12px 0; padding: 15px; } h2 { font-size: 2.3em; color: #000000; margin: 0 0 12px 0; padding: 5px; } h3 { font-size: 2.3em; color: #000000; margin: 0 0 12px 0; padding: 0px; } h4 { font-size: 1.8em; color: #565252; text-decoration: underline; margin: 12px 0 12px 0; padding: 0px; } h5 { font-size: 1.8em; color: #000000; margin: 0 0 0 0; padding: 10px; } h6 { font-size: 1.4em; color: red; margin: 0 0 12px 0; padding: 10px; } p { font-size: 1.6em; color: #000; margin: 0 0 12px 0; padding: 0 ; line-height: 110% } p.content { font-size: 1.5em; color: #000000; margin: 0 0 12px 0; padding: 0px; line-height: 110% } p.success { font-size: 1.5em; color: #000000; margin: 80px 0 12px 0; padding: 0px; line-height: 120% } table.one { table-layout: fixed; font-size: 1.3em; color: #000000; padding: 5px 5px 5px 5px; margin-bottom: 80px;} a { font-weight: bold; } a:hover { color: #058105; } a:visited { color: #058105; } a:active { color: #058105 ; } ul { margin: 0 0 12px 0; font-size: 1.6em } ol { margin: 0 0 12px 0; font-size: 1.1em } dl { margin: 0 0 12px 0; font-size: 1.1em } hr { display: block; background: #aaa; color: #aaa; width: 100%; height: 1px; border: none } address { font-size: 1.1em; color: #000 } blockqoute { } table { border-top: 1px solid #ccc; border-left: 1px solid #ccc; } th, td { border-bottom: 1px solid #ddd; border-right: 1px solid #ccc } fieldset { border: 1px solid #ccc; } legend { background: #fff; } label { font-size: 1.1em } textarea, input[type='text'], select { border: 1px solid #000; background: #fff; font-size: 11px; color: #000 } div#logo{ float: left; margin: 0 0 40px -15px} div#gallery{ float: right; margin: 0 0 20px 20px} div#mainpage{ float: left; margin: 10px 0 20px 10px; border: 1px #808080 solid; } #gallery img {display: inline; float: left; } div#thumbnail { border: 1px solid #000000; } div#form { margin-top: 40px } /* navigation list */ #navigation { /*border: 1px black solid;*/ margin: 50px 0 0 10px; } #navigation li { list-style: none; margin: 0 0 15px 0;} #navigation a { font-size: 1.3em; } /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 2.1 - main form */ form.main { width: 100%; height: 100%; margin: 0 0 50px 10px; } /* 2.2 - container */ div#container { margin: 0 auto; position: relative; text-align: left; background: #FCFDC7; } /* 2.3 - header */ div#header { position: relative; height: 80px; text-align: center; background: #F3F51D ; margin: 10px 0px 0px 0px} /* 2.4 - wrapper */ div#wrapper { } /* 2.5 - primary content */ div#primary-content { position: relative; float: right; background: #FCFDC7; margin: 10px 0px 0px 0px} /* 2.6 - secondary content */ div#secondary-content { float: left; position: relative; background: #FCFDC7; margin: 10px 0px 0px 0px} /* 2.7 - tertiary content */ div#tertiary-content { float: right; position: relative; background: #FCFDC7; margin: 10px 0px 0px 0px} /* 2.8 - secondary and tertiary content widths */ /* 2.8.1 - container width */ div#container { width: 700px } /* 2.8.2 - secondary content width */ div#primary-content { width: 160px } div#secondary-content { width: 140px } /* 2.8.3 - tertiary content width */ div#tertiary-content { width:400px } /* 2.9 - footer */ div#footer { clear: both; position: relative; text-align: center; background: #F3F51D ; } /* 2.8 - secondary and tertiary content heights */ /* 2.8.1 - container height */ div#container { height: 600px } /* 2.8.2 - secondary content height */ div#primary-content { height: 450px } div#secondary-content { height: 500px } /* 2.8.3 - tertiary content height */ div#tertiary-content { height: 450px } div.thumbnails { margin-bottom: 10px } /* ----------------------------------------------- 4. GLOBAL ELEMENTS / CONTROLS ----------------------------------------------- */ /* 3.1 - accessibility */ ul#skiplinks { display: none } ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position: absolute; left: 0px; top: -500px; width: 1px; height: 1px; overflow: hidden } ul#skiplinks a:active, ul#skiplinks a:focus { position: static; width: auto; height: auto } /* ----------------------------------------------- 5. TEMPLATE/PAGE SPECIFIC ----------------------------------------------- */ /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } .clr { overflow: hidden; clear: both; height: 1px; margin-top: -1px } .la { text-align: left } .ra { text-align: right } .ca { text-align: center } .fl { float: left } .fr { float: right } .vt { vertical-align: top } .vm { vertical-align: middle } .vb { vertical-align: bottom } .nb { border: 0 none }