/* 960 Grid System ~ Text CSS. Learn more ~ http://960.gs/ Licensed under GPL and MIT. */ /* `Spacing ----------------------------------------------------------------------------------------------------*/ p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset { margin-bottom: 20px; } /* @group StickyFooter */ /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * { margin: 0; padding: 0; } /* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ html, body { height: 100%; margin: 0 0 1px; } #wrap { min-height: 100%; } #main { overflow: auto; padding-bottom: 150px; } /* must be same height as the footer */ #footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear: both; } /*Opera Fix*/ body:before { /* thanks to Maleika (Kohoutec)*/ content: ""; height: 100%; float: left; width: 0; margin-top: -32767px; /* thank you Erik J - negate effect of float*/ } /* IMPORTANT You also need to include this conditional style in the of your HTML file to feed this style to IE 6 and lower and 8 and higher. */ /* @end */ /* @group Text */ body { background: url(background.jpg) repeat; color: #666666; text-shadow: #434552 0 1px 0; font: medium Arial; } #bodytext { text-align: left; margin: 20px 0; } #header { width: 940px; height: 240px; background: transparent url(header.jpg) no-repeat; font-size: 16px; line-height: 20px; } #logo { height: 50px; width: 50px; background: transparent url(logo_light.png) no-repeat; float: left; } #title { line-height: 50px; font-size: 36px; float: left; } #title a { line-height: 50px; font-size: 36px; float: left; color: #999999; text-decoration: none; } #title a:hover { line-height: 50px; font-size: 36px; float: left; text-decoration: none; } .hr { margin: 10px auto; width: 640px; height: 80px; background: url(hr.png) no-repeat; } a { color: #999999; text-shadow: #ffffff 0 1px 0; text-decoration: none; } a:hover { text-decoration: underline; color: #666666; } a:visited { color: #999999; text-decoration: none; } a:focus { outline: 1px dotted #666666; } h1 { font-size: 24px; margin: 20px 0; text-align: center; } p { border: 1px solid #666666; overflow: hidden; padding: 10px 0; text-align: center; } /* @end */ /* @group Menu */ #menu { float: left; height: 50px; line-height: 50px; vertical-align: middle; padding-right: 10px; } #menu img { vertical-align: middle; } #menu ul { list-style-type: none; display: block; } #menu ul li { display: inline; margin-left: 15px; } #menu ul li a { color: #999999; text-shadow: #ffffff 0 1px 0; text-decoration: none; } #menu ul li a:hover { color: #666666; border-bottom: 2px solid #666666; } /* @end */ /* @group Login */ #login { float: right; height: 50px; line-height: 50px; vertical-align: middle; padding-right: 10px; font-size: smaller; } #login a { } #login a:hover { } /* @end */ /* @group Footer */ #footer { font-size: 12px; height: 150px; line-height: 25px; vertical-align: bottom; background: url(footer.png) no-repeat center bottom; } #footer a { color: #999999; text-shadow: #ffffff 0 1px 0; text-decoration: none; } #footer a:hover { text-decoration: underline; color: #666666; } #footer #left { float: left; } #footer #right { float: right; } /* @end */ /* @group Sites */ #sites h1 { text-align: center; margin: 20px 0; } #sites ul { list-style-type: none; margin: 0; padding: 0; text-indent: 0; } #sites ul li { display: block; height: 32px; line-height: 32px; vertical-align: middle; } #sites ul li img { width: 32px; height: 32px; float: left; } /* @end */ /* @group Form */ #form { width: 380px; margin: 0 auto; } #form div { clear: both; } img { vertical-align: middle; } .label { font-size: 14px; float: left; line-height: 36px; vertical-align: middle; width: 120px; } .input { float: left; font-size: 18px; vertical-align: middle; width: 240px; height: 30px; color: #999999; margin: 2px; background: transparent; border: 1px #ccc solid; line-height: 30px; } .input:hover, .input:active { border: 1px #fff solid; } .input:focus { border: 1px #fff solid; background: rgba(51,102,153,0.5); } .message { height: 100px; } .btn_reset { float: right; background: #369 url('http://www.hawksmoorcs.co.uk/img/arrow_undo.png') no-repeat 6px 6px; border: 1px #ccc solid; height: 30px; line-height: 30px; vertical-align: middle; color: #999999; margin: 2px; text-decoration: none; font-size: 12px; width: auto; right: 0; text-align: left; padding: 0 10px 0 28px; } .btn_reset:hover, .btn_submit:focus { background: #369 url('http://www.hawksmoorcs.co.uk/img/arrow_undo.png') no-repeat 6px 6px; border: 1px solid #fff; } .btn_reset:active { background: #369 url('http://www.hawksmoorcs.co.uk/img/arrow_undo.png') no-repeat 6px 6px; border: 1px solid #fff; } .btn_submit { float: right; background: #369 url('http://www.hawksmoorcs.co.uk/img/arrow_right.png') no-repeat 6px 6px; border: 1px #ccc solid; height: 30px; line-height: 30px; vertical-align: middle; color: #999999; margin: 2px; text-decoration: none; font-size: 12px; width: auto; right: 0; text-align: left; padding: 0 10px 0 28px; margin-right: 15px; } .btn_submit:hover, .btn_submit:focus { background: #369 url('http://www.hawksmoorcs.co.uk/img/arrow_right.png') no-repeat 6px 6px; border: 1px solid #fff; } .btn_submit:active { background: #369 url('http://www.hawksmoorcs.co.uk/img/arrow_right.png') no-repeat 6px 6px; border: 1px solid #fff; } .error { background: #FBE3E4 url(http://www.hawksmoorcs.co.uk/img/cross.png) no-repeat 7px 50%; color: #8a1f11; border: 1px solid #FBC2C4; height: 30px; line-height: 30px; padding-left: 28px; margin-bottom: 5px; } .notice { background: #FFF6BF url(http://www.hawksmoorcs.co.uk/img/exclamation.png) no-repeat 7px 50%; color: #514721; border-color: #FFD324; height: 30px; line-height: 30px; vertical-align: middle; margin: 2px; width: 200px; right: 0; text-align: left; display: inline; } .success { background: #E6EFC2 url(http://www.hawksmoorcs.co.uk/img/accept.png) no-repeat 7px 50%; color: #264409; border: 1px solid #C6D880; height: 30px; line-height: 30px; padding-left: 28px; margin-bottom: 5px; } .error a { color: #8a1f11; } .notice a { color: #514721; } .success a { color: #264409; } /* @end */ .highlight_pink{ background-color: pink; } .highlight_yellow{ background-color: yellow; } .highlight_green{ background-color: green; } /* @group Social */ .soc_facebook { height: 64px; width: 140px; vertical-align: middle; text-indent: 70px; background: url(facebook.png) no-repeat left; } .soc_skype { height: 64px; width: auto; vertical-align: middle; text-indent: 70px; background: url(skype.png) no-repeat left; } .soc_twitter { height: 64px; width: auto; vertical-align: middle; text-indent: 70px; background: url(twitter.png) no-repeat left; } .soc_lastfm { height: 64px; width: auto; vertical-align: middle; text-indent: 70px; background: url(lastfm.png) no-repeat left; } .soc_youtube { height: 64px; width: auto; vertical-align: middle; text-indent: 70px; background: url(youtube.png) no-repeat left; } .soc_wordpress { height: 64px; width: 100px; vertical-align: middle; text-indent: 70px; background: url(wordpress.png) no-repeat left; } /* @end */ /* @group dropdownone */ #pad {height:140px;} /* ================================================================ 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. =================================================================== */ #mainmenu {padding:0; margin:0; list-style:none; height:40px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;} #mainmenu li {float:left; margin-right:1px;} #mainmenu li a {display:block; float:left; height:40px; line-height:40px; background:#666666; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 30px 0 20px;} #mainmenu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* Default link styling */ /* Style the list OR link hover. Depends on which browser is used */ #mainmenu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;} #mainmenu li:hover {position:relative; z-index:200;} #mainmenu li:hover > a {color:#fff; background:#c60;} #mainmenu li:hover > a.sub {color:#fff; background-color:#c60;} #mainmenu li.current a {color:#fff; background:#840;} #mainmenu li a.sub {background: #666666 url(down-arrow.gif) no-repeat right center;} #mainmenu li.current a.sub {color:#fff; background:#840 url(down-arrow.gif) no-repeat right center;;} #mainmenu :hover ul {left:0; top:40px; width:120px; background:#444;} /* keep the 'next' level invisible by placing it off screen. */ #mainmenu ul, #mainmenu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #mainmenu :hover ul :hover ul {left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;} #mainmenu :hover ul li {margin:0; border-top:1px solid #666666;} #mainmenu :hover ul li a {width:120px; padding:0; text-indent:10px; background:#666666; color:#ccc; height:30px; line-height:30px;} #mainmenu :hover ul li a.fly {background:#666666 url(right-arrow.gif) no-repeat right center;} #mainmenu :hover ul :hover {background-color:#c60; color:#fff;} #mainmenu :hover ul :hover a.fly {background-color:#c60; color:#fff;} #mainmenu :hover ul li.currentsub a {background:#840; color:#fff;} #mainmenu :hover ul li.currentsub a.fly {background:#840 url(right-arrow.gif) no-repeat right center; color:#fff;} #mainmenu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;} #mainmenu :hover ul :hover ul :hover {background-color:#d70; color:#fff;} #mainmenu :hover ul :hover ul li.currentfly a, #mainmenu :hover ul :hover ul li.currentfly a:hover {background:#840; color:#fff;} /* @end */