/* colour swatches; ececec - light grey d8d8d8 - dark grey container widths: total container width 960px, 24col, 10px gutter on each column (and therefore also 10px gutter on total container) total available width without left and right gutters = 940px so each container column is 30px (content) + 10px gutters (5px each side) = 40px total widths columns 950 24 30 910 1-23 70 870 2-22 110 830 3-21 150 790 4-20 190 750 5-19 230 710 6-18 270 670 7-17 310 630 8-16 350 590 9-15 390 550 10-14 430 510 11-13 470 470 12-12 content widths: but if you add 1px margin left and right to each cell, deduct 2px from container width available for content 1 30px - 2px = 28px 2 70px - 2px = 68px 3 110px - 2px = 108px 4 150px - 2px = 148px 5 190px - 2px = 188px 6 230px - 2px = 228px 7 270px - 2px = 268px 8 310px - 2px = 308px 9 350px - 2px = 348px 10 390px - 2px = 388px 11 430px - 2px = 428px 12 470px - 2px = 468px ... */ body { background: #569bc4; color: #383838; height: auto; padding-top: 10px; padding-bottom: 20px; background-image: url('../images/background.jpg'); background-repeat: repeat-x; background-position: top; } /* structure styles */ .container_24 { margin-bottom: 0px; margin-top: 15px; } .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, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 { } .clear { } .right { float: right; } .left { float: left; } img.right { margin: 0px 10px 10px 10px; clear: right; } a img.right { border: 3px solid #ffffff; } a:hover img.right { border: 3px solid #3bb0f9; } /* text styles */ a { color: blue; text-decoration: underline; } a:hover { } h1,h2,h3,h4,h5 { margin: 10px; padding: 0px; } h1 { font-family: Georgia, serif; font-weight: normal; } h2 { font-family: Georgia, serif; font-weight: normal; } p { overflow: hidden; padding: 0px; margin: 10px; } table.prices { margin: 10px; } table.prices td { padding: 6px; } div#banner { margin-bottom: 5px; margin-top: 5px; } div.container_24 { background-color: #f0f0ff; } div#footer { color: #666; } div#credits { text-align: center; margin-bottom: 8px; } div#credits a { color: #666; text-decoration: none; } div#credits a:hover { text-decoration: underline; } /* liner styles - style internal liner divs rather than styling the 960gs divs directly */ .liner { background-color: #f0f0f0; border: 1px solid #aaa; margin-bottom: 10px; } /* full width divs - styles the whole 100% of screen width - use as wrapper around standard container_24 */ div.fullwidth { width: 100%; } div.fullwidth strong { font-size: 130%; } /* horizontal navigation menu */ div#hnavcontainer { float: right; margin: 5px 5px 5px 0px; /* right 5px: account for right gutter */ } div#hnavcontainer ul { margin: 0px; padding: 0px; white-space: nowrap; } div#hnavcontainer ul li { display: inline; list-style-type: none; margin: 0px; } div#hnavcontainer ul a { color: #fff; padding: 3px 10px; margin: 0px 0px 0px 5px; font-size: 130%; } div#hnavcontainer ul a:link, div#hnavcontainer ul a:visited { color: #fff; background-color: #d8d8d8; text-decoration: none; } div#hnavcontainer ul a:hover, div#hnavcontainer ul a.current { color: #fff; background-color: #c8c8c8; text-decoration: none; } div#vnavcontainer { width: 200px; } div#vnavcontainer ul { margin-left: 0; padding-left: 0; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } div#vnavcontainer a { display: block; padding: 3px; width: 160px; font-size: 130%; } div#vnavcontainer a:link, div#vnavcontainer a:visited { color: #fff; background-color: #d8d8d8; text-decoration: none; border-bottom: 1px solid #eee; } div#vnavcontainer a:hover { color: #fff; background-color: #c8c8c8; } /* horizontal navigation menu - dropdown just software solutions */ .navmenu, .navmenu ul, .navmenu li { padding: 0px; margin: 0px; } .navmenu > li { float: left; } .navmenu li { list-style-type: none; border: 1px solid #888888; color: #ffffff; background-color: #666666; padding: 2px; } .navmenu ul { display: none; position: absolute; margin-left: -3px; margin-top: 2px; } .navmenu li:hover > ul { display: block; } .navmenu ul.parent_hover { display: block; } .navmenu a { color: #ffffff; background: none; display: block; width: 100%; text-decoration: none; } .navmenu li:hover { color: #ffffff; background-color: #333333; } .navmenu li.hover, .navmenu a:hover { color: black; background-color: #555555; } .navmenu li:hover li { color: #ffffff; background-color: #333333; } .navmenu ul ul { margin-top: -1.2em; left: 99%; } .navmenu span { display: block; } .navmenu { float: left; width: 100%; color: #ffffff; background-color: #666666; } #verytopmostbar { background-color: #222222; color: #dddddd; } #uppermostverticalnavigation { margin-bottom: 15px; background-color: #666666; color: #ffffff; } #absolutelyuppermostverticalnavigation { margin-bottom: 15px; background-color: #666666; color: #ffffff; } /***************************************************************************************************************************** EQUAL COLUMN LENGTH HACKS - fix a minheight for that row - set up cross-platform (except IE6) css-only version http://stackoverflow.com/questions/5176827/how-do-i-make-a-trickless-cross-platform-css-based-same-column-height *****************************************************************************************************************************/ /* minheight - can set all liners in a row simultaneously div.minheight div.liner { min-height: 380px; height: auto !important; height: 380px; } */ /* equalheights - adds unnecessary divs to structure but achieves equal-height columns with css-only no-JS in IE7+, FF, etc*/ div.equalheights{ position: relative; overflow: hidden; margin: 0px 0px 10px 0px; /*explicitly set bottom margin */ } div.equalheights .liner { position: absolute; height: 99.5%; /* not 100%, so a 1px border-bottom is visible */ /* problem is that with very long columns the .5% shortfall leads to a noticeable gap */ /* with a smaller shortfall then the bottom border disappears when short */ z-index: -1; background-color: #f5f0f5; } div.equalheights .grid_1, div.equalheights .grid_2, div.equalheights .grid_3, div.equalheights .grid_4, div.equalheights .grid_5, div.equalheights .grid_6, div.equalheights .grid_7, div.equalheights .grid_8, div.equalheights .grid_9, div.equalheights .grid_10, div.equalheights .grid_11, div.equalheights .grid_12, div.equalheights .grid_13, div.equalheights .grid_14, div.equalheights .grid_15, div.equalheights .grid_16, div.equalheights .grid_17, div.equalheights .grid_18, div.equalheights .grid_19, div.equalheights .grid_20, div.equalheights .grid_21, div.equalheights .grid_22, div.equalheights .grid_23, div.equalheights .grid_24 { overflow: hidden; padding-bottom: 20px; /* add enough padding at bottom so that very long content doesn't appear to overflow from 99% height liner */ } /* div.equalheights .grid_1 .liner, div.equalheights .grid_2 .liner, div.equalheights .grid_3 .liner, div.equalheights .grid_4 .liner, div.equalheights .grid_5 .liner, div.equalheights .grid_6 .liner, div.equalheights .grid_7 .liner, div.equalheights .grid_8 .liner, div.equalheights .grid_9 .liner, div.equalheights .grid_10 .liner, div.equalheights .grid_11 .liner, div.equalheights .grid_12 .liner, div.equalheights .grid_13 .liner, div.equalheights .grid_14 .liner, div.equalheights .grid_15 .liner, div.equalheights .grid_16 .liner, div.equalheights .grid_17 .liner, div.equalheights .grid_18 .liner, div.equalheights .grid_19 .liner, div.equalheights .grid_20 .liner, div.equalheights .grid_21 .liner, div.equalheights .grid_22 .liner, div.equalheights .grid_23 .liner, div.equalheights .grid_24 { left: 5px; } */ /* set an explicit left position for absolutely positioned liners - for benefit of IE7*/ div.equalheights .colstoleft_0 { left: 5px; } div.equalheights .colstoleft_1 { left: 45px; } div.equalheights .colstoleft_2 { left: 85px; } div.equalheights .colstoleft_3 { left: 125px; } div.equalheights .colstoleft_4 { left: 165px; } div.equalheights .colstoleft_5 { left: 205px; } div.equalheights .colstoleft_6 { left: 245px; } div.equalheights .colstoleft_7 { left: 285px; } div.equalheights .colstoleft_8 { left: 325px; } div.equalheights .colstoleft_9 { left: 365px; } div.equalheights .colstoleft_10 { left: 405px; } div.equalheights .colstoleft_11 { left: 445px; } div.equalheights .colstoleft_12 { left: 485px; } div.equalheights .colstoleft_13 { left: 525px; } div.equalheights .colstoleft_14 { left: 565px; } div.equalheights .colstoleft_15 { left: 605px; } div.equalheights .colstoleft_16 { left: 645px; } div.equalheights .colstoleft_17 { left: 685px; } div.equalheights .colstoleft_18 { left: 725px; } div.equalheights .colstoleft_19 { left: 765px; } div.equalheights .colstoleft_20 { left: 805px; } div.equalheights .colstoleft_21 { left: 845px; } div.equalheights .colstoleft_22 { left: 885px; } div.equalheights .colstoleft_23 { left: 925px; } /* explicitly set the width (grid - 2 x 1px borders )of the liner div within equalheights blocks, because the liner doesn't contain any content to naturally fill it*/ div.equalheights .grid_1 .liner{ width: 28px; } div.equalheights .grid_2 .liner{ width: 68px; } div.equalheights .grid_3 .liner{ width: 108px; } div.equalheights .grid_4 .liner{ width: 148px; } div.equalheights .grid_5 .liner{ width: 188px; } div.equalheights .grid_6 .liner{ width: 228px; } div.equalheights .grid_7 .liner{ width: 268px; } div.equalheights .grid_8 .liner{ width: 308px; } div.equalheights .grid_9 .liner{ width: 348px; } div.equalheights .grid_10 .liner{ width: 388px; } div.equalheights .grid_11 .liner{ width: 428px; } div.equalheights .grid_12 .liner{ width: 468px; } div.equalheights .grid_13 .liner{ width: 508px; } div.equalheights .grid_14 .liner{ width: 548px; } div.equalheights .grid_15 .liner{ width: 588px; } div.equalheights .grid_16 .liner{ width: 628px; } div.equalheights .grid_17 .liner{ width: 668px; } div.equalheights .grid_18 .liner{ width: 708px; } div.equalheights .grid_19 .liner{ width: 748px; } div.equalheights .grid_20 .liner{ width: 788px; } div.equalheights .grid_21 .liner{ width: 828px; } div.equalheights .grid_22 .liner{ width: 868px; } div.equalheights .grid_23 .liner{ width: 908px; } div.equalheights .grid_24 .liner{ width: 948px; } /* ================================================================================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssmenus.co.uk Copyright (c) 2009- Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================================================================================== */ /* main structural styles */ .horizontalmenu {padding:0; margin:0; list-style:none; position:relative; z-index:500; } .horizontalmenu li {float:left; } .horizontalmenu li a {display:block; float:left; margin: 0px; } .horizontalmenu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* main link styles - Style the list OR link hover. Depends on which browser is used */ .horizontalmenu li a:hover {z-index:200; position:relative; } .horizontalmenu li:hover {position:relative; z-index:200; } .horizontalmenu :hover ul {left:0;} /* keep the 'next' level invisible by placing it off screen. */ .horizontalmenu ul, .horizontalmenu :hover ul ul { position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none; } .horizontalmenu :hover ul :hover ul {top:-1px; white-space:nowrap; z-index:200; height:auto;} .horizontalmenu :hover ul li {margin:0;} /* default heights and vertical centering for main links */ .horizontalmenu { height:30px; } /* menu height */ .horizontalmenu li a { height:30px; line-height:30px; } /* main links height */ .horizontalmenu :hover ul { top:30px; } /* secondary ul "top" has to be same as main menu / link height */ /* default heights and vertical centering for secondary and tertiary links */ .horizontalmenu :hover ul li a { height:30px; line-height:30px; } /* secondary height */ .horizontalmenu :hover ul :hover ul li a { height:25px; line-height:25px; } /* tertiary height */ /* default widths for sub and fly menus */ .horizontalmenu :hover ul { width:150px; } .horizontalmenu :hover ul :hover ul {left:150px; width:150px; } .horizontalmenu :hover ul li a {width:150px; } .horizontalmenu :hover ul :hover ul li a {width:150px; } /* tertiary width */ /* default margins and padding */ .horizontalmenu li {margin: 0px 1px 0px 0px;} .horizontalmenu li a { padding:0 30px 0 20px; } .horizontalmenu :hover ul li a {padding:0; text-indent:10px; } .horizontalmenu :hover ul :hover ul li a { padding:0; text-indent:10px; } /* default styles */ .horizontalmenu li a, .horizontalmenu :hover ul li a, .horizontalmenu :hover ul :hover ul li a { font-size:13px; font-weight:bold; font-family:arial, verdana, sans-serif; background-color:#555555; color:#ffffff; text-decoration:none; } .horizontalmenu :hover ul li {border-top:1px solid #666;} /* sub styles - main menu item that contains submenu */ .horizontalmenu li a.sub, .horizontalmenu li.current a.sub { background-image: url("down-arrow.gif"); background-repeat: no-repeat; background-position: right center; } /* fly styles - sub menu item that contains flyout menu*/ .horizontalmenu :hover ul li a.fly, .horizontalmenu :hover ul li.current a.fly { background-image: url("right-arrow.gif"); background-repeat: no-repeat; background-position: right center; } /* current styles - currently selected main / sub / fly menu item */ .horizontalmenu :hover ul :hover ul li.current a, .horizontalmenu li.current a.sub, .horizontalmenu :hover ul li.current a, .horizontalmenu :hover ul li.current a.fly { background-color:#222222; color:#fff; } /* hover styles - split into two declarations because IE6 doesn't understand > child selector */ .horizontalmenu li a:hover, .horizontalmenu :hover ul :hover, .horizontalmenu :hover ul :hover ul, .horizontalmenu :hover ul li a.fly:hover, .horizontalmenu :hover ul :hover ul :hover, .horizontalmenu :hover ul :hover ul li.current a:hover { background-color:#884444; color:#fff; } .horizontalmenu li:hover > a, .horizontalmenu li:hover > a.sub { /*IE6 doesn't understand > child selector */ background-color:#884444; color:#fff; } /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssmenus.co.uk Copyright (c) 2009- Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /* main structural styles */ .verticalmenu {float:left; padding:0; margin:0; list-style:none; position:relative; z-index: 10;} .verticalmenu ul {padding:0; margin:0; list-style:none; height:auto; background: url(trans.gif); position:absolute; left:-9999px; top:0; z-index: 10;} .verticalmenu table {border-collapse:collapse; width:0; height:0; margin:-1px -10px; z-index: 10;} .verticalmenu li {float:left; margin: 0px 0px 1px 0px; z-index: 10;} .verticalmenu li a { display:block; float:left; } .verticalmenu li:hover, .verticalmenu li a:hover {position:relative; } .verticalmenu :hover ul ul, .verticalmenu :hover ul :hover ul ul {left:-9999px;} /* default margins and padding */ .verticalmenu { margin: 0px; } /* width (and left-hand offset) */ .verticalmenu, .verticalmenu ul, .verticalmenu li a { width:188px; } .verticalmenu :hover ul, .verticalmenu :hover ul :hover ul, .verticalmenu :hover ul :hover ul :hover ul { left:188px; } /* height */ .verticalmenu li a {height:30px; line-height:30px;} /* default styles - for levels 1,2,3,4*/ .verticalmenu li a {background:#afafbf; color:#000000; font-family:arial, sans-serif; font-size:13px; text-indent:10px; text-decoration: none !important; } .verticalmenu ul li a {background:#dfdfdf; } .verticalmenu ul ul li a {background:#cccccc; } .verticalmenu ul ul ul li a {background:#dddddd;} /* fly styles - sub menu item that contains flyout menu*/ .verticalmenu li a.fly, .verticalmenu ul li a.fly, .verticalmenu ul ul li a.fly { background-image: url("right-arrow.gif"); background-repeat: no-repeat; background-position: right center; } /* current styles - currently selected main / sub / fly menu item */ .verticalmenu li a.current, .verticalmenu ul li a.current, .verticalmenu ul ul li a.current, .verticalmenu ul ul ul li a.current { background-color:#c40; color:#fff; } /* hover styles - split into two declarations because IE6 doesn't understand > child selector */ .verticalmenu li a:hover { background-color:#569bc4; color:#fff; } .verticalmenu li:hover > a, .verticalmenu ul li:hover > a, .verticalmenu ul ul li:hover > a { background-color:#569bc4; color:#fff; } /* lighter style for tour site links */ .verticalmenu li a.site {background:#efefef; text-indent:20px; } .verticalmenu li a.site:hover {background:#254117; }