/*----------------------------------------------------------------------------------------------------------------------------------------------------------- CSS for Grafham Water Centre - Main Stylesheet Author: Alison Lee (alisonlee@silktide.com) / Silktide Ltd Created: 11/04/2008 -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Global Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* commented backslash hack \*/ html, body { height: 100%; } /* end hack */ body { background: #014a77 url("templatefiles/body-bg.jpg") repeat-x 0 0; font: 75% "trebuchet ms", verdana, arial, helvetica, sans-serif; text-align: center; color: #fff; padding: 0; margin: 0;} h1 { font: bold 2.0em "base 02", "trebuchet ms", arial, verdana, helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 15px; } h2 { font: bold 1.4em "trebuchet ms", arial, verdana, helvetica, sans-serif; margin: 10px 0 0; } h3 { font: bold 1.2em "trebuchet ms", arial, verdana, helvetica, sans-serif; margin: 10px 0 0; } p, li { font-size: 1.0em; line-height: 1.5em; color: #fff; } .altcolor { color: #F9B315; } .altcolor span { color: #fff; } ul li { list-style-type: square; } a, a:visited { color: #F9B315; text-decoration: none; } a:hover, a:active { color: #fff; text-decoration: none; } hr { height: 1px; background-color: #e8e8e8; color: #e8e8e8; border: 0; margin: 5px 0; } img { border: 0; } form, table { background: transparent; font-size: 1.0em; } legend { font-size: 1.4em; color: #fff; } .tablestyle { border-collapse: collapse; } .tablestyle td, .tablestyle th { vertical-align: top; padding: 5px 5px 5px 0; } .tableborder td, .tableborder th { vertical-align: top; padding: 5px; border: 1px solid #e8e8e8; } .clear { height: 0; clear: both; font-size: 0.1em; line-height: 0.1em; padding: 0; margin: 0; } .right { float: right; } .left { float: left; } .centerimg { text-align: center; } .centerimg img { margin-left: auto; margin-right: auto; } .widthwrapper { width: 100%; } .padding { padding: 5px 15px; } #accessibility { display: none; } /* Layout Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #container { width: 866px; min-height: 100%; height: auto; position: relative; background: #01446e url("templatefiles/container-bg.jpg"); text-align: left; margin: 0 auto -30px; } /* margin-bottom to match #clearfooter */ * html #container { height: 100%; } .nosidecol #container { background-image: url("templatefiles/container-bg-ns.jpg"); } #splash { position: absolute; top: 0; left: -72px; } #header { height: 90px; position: relative; background: #01446e url("templatefiles/header-bg.jpg") repeat-x 0 0; padding-left: 5px; border-bottom: 2px solid #fff; margin: 0 2px 0 3px; } #topnav { background: #014069 url("templatefiles/topnav-bg.jpg"); border-bottom: 2px solid #fff; margin: 0 2px 0 3px; } #banner { min-height: 200px; background: url("templatefiles/stripe-blue.jpg"); border-bottom: 2px solid #fff; margin: 0 2px 0 3px; } #contentwrapper { clear: both; } #content { margin-left: 3px; margin-right: 258px; } .nosidecol #content { margin-right: 3px; } #sidecol { width: 254px; float: right; margin-right: 2px; } #clearfooter { clear: both; height: 30px;} /* height to match height + padding + margin etc in #footer */ #footer { width: 866px; height: 30px; position: relative; clear: both; margin: 0 auto; } /* Header & Search Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #grafhamlogo { margin-top: 15px; } #search .button { height: 24px; background: #fff; font-size: 0.8em; text-transform: uppercase; color: #1b5d8d; padding: 0; border: 1px solid #1b5d8d; margin-left: 10px; } img#ccc { position: absolute; top: 25px; right: 22px; display: block; } #header #search { width: 250px; position: absolute; top: 25px; right: 175px; /*float: right;*/ text-align: right; /*margin: 55px 5px 0 0;*/ } /* Navigation Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ p#breadcrumb { font-size: 0.95em; margin: 5px 0 0 10px; } p#breadcrumb a, p#breadcrumb a:visited { color: #fff; text-decoration: none; } p#breadcrumb a:hover, p#breadcrumb a:active { text-decoration: underline; } .azmenunav { text-align: center; } .azmenunav span { margin-left: 3px!important; margin-right: 3px!important; } #topnav ul { padding: 8px 0; margin: 0 5px; } #topnav ul li { list-style-type: none; display: inline; text-transform: uppercase; } #topnav ul li a, #topnav ul li a:visited { background-color: #01446e; text-decoration: none; color: #fff; padding: 3px 5px; border: 1px solid #467b9b; } #topnav ul li a:hover, #topnav ul li a:active, #topnav ul li.selected a{ background-color: #467b9b; } #subnav { padding: 0; margin: 0; } #subnav li { font-weight: bold; list-style-type: none; text-transform: uppercase; border-bottom: 1px solid #FCCF5A; } #subnav li a, #subnav li a:visited { width: 234px; display: block; color: #000; text-decoration: none; padding: 5px 10px; } #subnav li a:hover, #subnav li a:active, #subnav li.selected a { background: url("templatefiles/stripe-yellow.jpg"); color: #467b9b; } #subnav ul { padding: 0; margin: 0; } #subnav li ul li { font-size: 0.9em; border-top: 1px solid #FCCF5A; border-bottom: 0; } #subnav li ul li a, #subnav li ul li a:visited { width: 214px; color: #000; padding-left: 30px; } #subnav li ul li a:hover, #subnav li ul li a:active, #subnav li ul li.selected a { background: url("templatefiles/stripe-orange2.jpg"); color: #fff; } #subnav .selected ul li { font-size: 0.9em; border-top: 1px solid #FCCF5A; border-bottom: 0; } #subnav .selected ul li a, #subnav .selected ul li a:visited { width: 214px; color: #000; padding-left: 30px; } #subnav .selected ul li a:hover, #subnav .selected ul li a:active, #subnav .selected ul li.selected a { background: url("templatefiles/stripe-orange2.jpg"); color: #fff; } /* Banner Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #banner .padding { padding: 10px; } #banner .padding p { font-size: 1.1em; color: #01426b; margin-top: 15px; } #banner .padding li { font-size: 1.1em; color: #01426b; margin-top: 0; } #banner .padding li li { font-size: 1.0em; } #banner .readmore { float: right; margin-top: -20px; } #banner img { display: block; } #banner .requestbrochure img { margin: 50px 0!important; } #banner .files { width:400px; } #banner .files a { color:#01446e; } /* Col Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #sidecol * { color: #000; } #sidecol .padding { padding: 15px 15px 30px; } #sidecol .title { margin-left: -15px; } #sidecol address { text-transform: uppercase; font-style: normal; margin-bottom: 10px; } #sidecol #viewmore { margin: -65px 10px 0 0; } .orange { background: url("templatefiles/stripe-orange.jpg"); } .yellow { background: url("templatefiles/stripe-yellow.jpg"); } .pink { background: url("templatefiles/stripe-pink.jpg"); } .lime { background: url("templatefiles/stripe-lime.jpg"); } #content .halfcol { width: 281px; float: left; padding: 10px; border-top: 0; border-bottom: 2px solid #fff; } #content .halfcol.pink { border-right: 3px solid #fff; } .halfcol.lime p { color: #013860; } /* Gallery Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .gallery { width: 570px; } .gallery td { vertical-align: middle; } .gallery td img { padding: 5px; border: 1px solid #fff; } .gallery td h2 { font-size: 1.2em; text-align: center; } /* News Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .news { width: 570px; } .news td { vertical-align: top; } .news td img { padding: 5px; border: 1px solid #fff; margin-right: 10px; margin-bottom: 40px; } .news td img.right { border: 0; margin: 0; } .news td h2 { font-size: 1.2em; margin: 0; } /* Courses Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #import p, #import li { color: #000; } #import b { color: #fff; } #coursemenu h2 { background-color: #FBCE59; font-size: 1.2em; color: #000; padding: 5px; margin-bottom: 0; } #coursemenu h2 a { color: #000; } #coursemenu p { min-height: 60px; margin: 5px 20px; } #coursemenu .right { margin: 15px; } .courselisting { width: 100%; margin-bottom: 20px; } .courselisting th { background-color: #FBCE59; vertical-align: middle; font-weight: bold; text-transform: uppercase; text-align: center; color: #000; } .courselisting td { vertical-align: middle; } .courselisting .date { } .courselisting .duration { width: 120px; text-align: center; } .courselisting .price { width: 120px; text-align: center; } .courselisting .available { width: 120px; text-align: center; } * Homepage -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #home #banner { min-height: 240px; } #home .files { width:200px; margin: 0 auto; } /* Items for Sale Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #forsale h2 { background-color: #FBCE59; font-size: 1.2em; color: #000; padding: 5px; } #forsale h2 span { float: right; } /* Footer Styles -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #footer div { height: 29px; background-color: #01446e; border-top: 1px solid #fff; margin: 0 2px 0 3px; } #footer p { font-size: 0.8em; text-transform: uppercase; text-align: left; color: #75b1d6; padding: 7px 10px 0; margin: 0 2px 0 3px; } #footer p a, #footer p a:visited { color: #75b1d6; text-decoration: none; } #footer p a:hover, #footer p a:active { color: #fff; } #footer .yellow { width: 224px; height: 87px; position: absolute; top: -100px; right: 0; border-bottom: 2px solid #fff; } /* -------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #records .taosUiTable { color: #777; } #records a, #records a:visited { color: #F9B315; text-decoration: none; } #records a:hover, #records a:active { color: #000; text-decoration: none; }