/*====================================================================== *Author: Leonie Lindo *Project: Capita Annual Report 2009 *Description: Global Stylesheet layout code for: 1. RESET MARGINS/PADDINGS 2. GENERIC LAYOUT AND PRESENTATION 2.1 Prevent Firefox Scrollbar Jump 2.2 link style 3. GENERIC TYPOGRAPHY 4. ACCESSIBILITY 5. STRUCTURAL LAYOUT 5.1 Header 5.1.1 header links 5.1.2 header title 5.1.3 header search 6. BREADCRUMB 7. NAVIGATION 8. SUB-NAVIGATION 9. MAIN SECTION 9.1 Main content 9.1.2 Main content wide 9.1.3 Landing 9.1.4 Sub Landing 9.2 Secondary content 10. FOOTER *Start date:16/02/2010 ========================================================================*/ /*============================================== 1. RESET MARGINS/PADDINGS ================================================*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {margin:0; padding:0; line-height:1;} table {border-collapse:collapse; border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,th,var {font-style:normal; font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-weight:normal;} abbr,acronym {border:0;} /*============================================== 2. GENERIC LAYOUT AND PRESENTATION ================================================*/ body {margin:0; padding:0; font:62.5% Arial, Helvetica, sans-serif; color:#505253; background:url(../images/body-bg.gif) left top ;} /* using "font size 62.5%" sets 1.0em = 10px makes matching font-size and line-heights to designs simpler 1.5em = 15px */ /*------2.1 Prevent Firefox Scrollbar Jump ----------*/ html{ overflow-y:scroll; overflow-x:hidden;} .clear{clear:both;} /*----- 2.2 link style -----*/ a {outline:none; text-decoration:none; color:#006fc4;} a:hover {text-decoration:underline; color:#983222;} * :focus {outline:none;}/*[THIS GETS RID OF THE DOTTED OUTLINE FROM AROUND ANY LINK ON FOCUS]*/ * :active {outline:none; -moz-outline: 0 none;}/*[THIS GETS RID OF THE DOTTED OUTLINE FROM AROUND ANY LINK ON FOCUS ON OLDER FIREFOX AND MOZILLA BROWSERS]*/ a img {border:none;} sub {margin:-10px 0 0 0; padding:0; display:inline-block;} /*============================================== 3. GENERIC TYPOGRAPHY ================================================*/ h1 {border-bottom:1px solid #e6e6e6; color:#983222; font-weight:bold; font-size:2.5em; margin-bottom:16px; padding-bottom:14px;} h1.orange-hdg {color:#ff5800;} h1#sectors em{display:block;} h2 {color:#983222; font-weight:bold; font-size:1.3em; } h3 {font-weight:bold; font-size:1em;} h4 {font-weight:normal; font-size:1em;} h5 {font-weight:normal; font-size:1em;} h6 {font-weight:normal; font-size:1em;} /*============================================== 4. ACCESSIBILITY ================================================*/ #accessibility { position:absolute; left:-1000px; top:-1000px; overflow:hidden; padding:0; margin:0;} #accessibility a {text-decoration:underline;} #accessibility a:hover {text-decoration: underline;} .hide {display:none}/* use this class for objects you wish to hide from the DOM*/ .offscreen {position:absolute; top:-1000px; left:-1000px;}/* use this class for objects you wish to hide offscreen but intent to be read by a screen reader*/ #top {padding:5px 0 20px 0; margin:0 ; position:absolute; top:-1000px; left:-1000px;} /*============================================== 5. STRUCTURAL LAYOUT ================================================*/ #wrapper {width:100%; float:left;} #wrapper-content {width:980px; margin:0 auto;} #primary-content {width:980px; float:left;} /*-------------------------------- 5.1 Header ---------------------------------*/ #header {width:980px; float:left; } /*-------------------------------- 5.1.1 header-links ---------------------------------*/ #header-links {float:right; width:730px; margin-bottom:9px;} /*----- header internal link -----*/ #header-internal-links {float:left; width:330px;} #header-internal-links li{width:auto; float:left; background:url(../images/header-link-divider.gif) right 7px no-repeat; padding:9px 13px 0 11px;} #header-internal-links li.first {padding-left:0;} #header-internal-links li.last-item {background:none;} #header-internal-links li a{display:block} #header-internal-links #inline1 {display:none;} #view-basket {float:left; width:auto; margin-right:5px;} /*----- header external link -----*/ #header-external-links {float:right; width:380px;} #header-external-links li{width:auto; background:url(../images/hd-link-left-bg.gif) left bottom no-repeat; margin-right:2px; float:left;} #header-external-links li.last{margin-right:0;} #header-external-links li span {width:auto; background:url(../images/hd-link-right-bg.gif) right bottom no-repeat; display:block; padding:9px 20px 7px 8px;} /*-------------------------------- 5.1.2 header-title ---------------------------------*/ #header-title-wrap {width:980px; float:left; margin-bottom:} #header-title {float:left; width:654px;} #header-title img {float:left; width:127px;} #header-title p {font-size:1.6em; font-weight:bold; margin-left:122px; float:left; width:auto; padding-top:13px; } /*-------------------------------- 5.1.3 header-search ---------------------------------*/ #header-search {float:right; width:257px; padding-top:5px;} #header-search label{float:left; width:auto; color:#666666; font-size:1.3em; font-weight:bold; padding:5px 5px 0 0; } #header-search #search-box {float:left; width:178px; padding-right:2px;} #header-search #search-box input{border:1px solid #cccccc; width:172px; padding:2px 3px;} #header-search #search-btn {border:none; width:24px; float:right;} /*-------------------------------- 6. BREADCRUMB ---------------------------------*/ #breadcrumb {width:980px; float:left; margin:9px 0 13px 0; z-index:1000; position:relative;} #breadcrumb ul {float:left; width:auto; margin-left:-4px;} #breadcrumb ul li{float:left; width:auto; margin-left:4px; font-size:1.1em;} #breadcrumb ul li a{background:url(../images/breadcrumb-icon.gif) right 0 no-repeat; display:block; padding-right:13px; } #breadcrumb span#ctl00_siteMapPath {float:left; width:auto; display:block; font-size:1.0em; } #breadcrumb span#ctl00_siteMapPath span {margin-left:2px; float:left; width:auto;} #breadcrumb span#ctl00_siteMapPath a {background:url(../images/breadcrumb-icon.gif) right 0 no-repeat; display:inline-block; padding:0 11px 3px 0; } /*#breadcrumb span a{background:url(../images/breadcrumb-icon.gif) right 0 no-repeat; display:block; padding-right:13px; ;} #breadcrumb span#ctl00 a{background:url(../images/breadcrumb-icon.gif) right 0 no-repeat; display:block; padding-right:13px; }*/ /*-------------------------------- 7. NAVIGATION ---------------------------------*/ #nav {width:980px; float:left; background:url(../images/nav-bg.gif) repeat-x left bottom;} #nav ul {width:978px; float:left; } #nav ul li{width:auto; float:left; background:url(../images/nav-divider.gif) right 10px no-repeat;} #nav ul li a {padding:13px 10px 14px 10px; display:block; margin-left:-1px; font-size:1.4em; font-weight:bold; text-decoration:none;} #nav ul li a:hover {padding:10px 10px 12px 10px; display:block; border-top:3px solid #983222; background:#fff;} #nav ul li a.selected {padding:10px 10px 12px 10px; display:block; border-top:3px solid #983222; background:#fff; color:#983222;} #nav ul li.last-nav{background:none; } /*-------------------------------- 8. SUB-NAVIGATION ---------------------------------*/ #sub-nav {width:159px; float:left; } #sub-nav p {font-size:1.5em; font-weight:bold; background-color:#f9f9f9; border-left:1px solid #f0f0f0; border-right:1px solid #f0f0f0; padding: 8px 10px 10px 10px; } /*---- 1st level ------*/ #sub-nav ul { background-color:#f9f9f9; border-bottom:1px solid #bbbbbb;} #sub-nav ul li{border-left:1px solid #f0f0f0; border-right:1px solid #f0f0f0; line-height:1.5em;} #sub-nav ul li a span {margin:0 10px; width:138px; padding-top:5px; padding-bottom:8px; border-top:1px solid #e1e1e1; display:inline-block; cursor:pointer;} #sub-nav ul li.last-item span {border-bottom:none; padding-bottom:18px;} #sub-nav ul li a {display:inline-block; font-size:1.4em; padding:3px 0 0 0;} #sub-nav ul li a:hover {padding:0; display:inline-block; border-top:3px solid #983222; background-color:#fff; text-decoration:none;} /*---- 1st level on ------*/ #sub-nav ul li.on-link {padding:0; display:inline-block; border-top:3px solid #983222; background-color:#fff; } #sub-nav ul li.on-link span {border-top:none; color:#983222;} #sub-nav ul li.on-link a:hover {padding:0; display:inline-block; border-top:none; background:#fff; padding:3px 0 0 0;} /*---- 1st level on ------ #sub-nav ul li.first {padding:0; display:inline-block; border-top:3px solid #983222; background-color:#fff; } #sub-nav ul li.first span {border-bottom:none; color:#983222;} #sub-nav ul li.first a:hover {padding:0; display:inline-block; border-top:none; background:#fff; padding:3px 0 0 0;} */ /*---- 2nd level ------*/ #sub-nav ul li ul {background-color:#fff; padding-bottom:14px; margin-top:-8px; margin-bottom:-5px;/*margin-top:0;*/} #sub-nav ul li ul li{border-left:none; border-right:none; padding:0 0 0 10px; margin-top:-6px; line-height:1.7;/**/} #sub-nav ul li ul li a{ background:url(../images/link-icon.gif) 0 8px no-repeat; border-bottom:none; font-size:1.1em; padding:5px 0 0 18px; } /*---- 2nd level on ------*/ #sub-nav ul li ul li.first { margin-top:0;} #sub-nav ul li ul li.on-link {border:none; background:none; margin-left:10px;} #sub-nav ul li ul li.on-link a{ background:url(../images/link-icon.gif) 0 8px no-repeat; border-bottom:none; font-size:1.1em; padding:5px 0 0 18px; color:#983222;} #sub-nav ul li ul li.on-link a span {border:none; } #sub-nav ul li.on-link ul li a:hover{background:url(../images/link-icon.gif) 0 8px no-repeat; border-bottom:none; padding:5px 0 0 18px;} #sub-nav ul li ul li.sub-on a{color:#983222;} #sub-nav ul li.on-link a span {border-top:none;} #sub-nav ul li.on-link ul li a {display:block;} #sub-nav ul li.on-link ul li a span {color:#006fc4; display:block;} #sub-nav ul li.on-link ul li a span:hover {color:#983222;} /*-----------2nd level on state----------------*/ #sub-nav ul li.on-link ul li.on-link a span {color:#983222; display:block;} #sub-nav ul li ul li a span {margin:0; width:100%; padding:0; border-top:none; display:inline-block; cursor:pointer; background:none;} #sub-nav ul li ul li a:hover{padding:0; /*display:inline-block;*/ border-top:none; background:url(../images/link-icon.gif) 0 8px no-repeat; text-decoration:none; padding:5px 0 0 18px;} #sub-nav ul li ul li.on-link a:hover{padding:0; /*display:inline-block;*/ border-top:none; background:url(../images/link-icon.gif) 0 8px no-repeat; text-decoration:none; padding:5px 0 0 18px;} #sub-nav ul li ul li.on-link span {margin:0 10; padding:0; background:none;} /*-------------------------------- 9. MAIN SECTION ---------------------------------*/ #main {width:816px; float:right; font-size:1.2em; line-height:1.3; margin-bottom:27px;} #main-2 {width:980px; float:right; font-size:1.2em; line-height:1.3; margin-bottom:27px;} /*-------------------------------- 9.1 Main content ---------------------------------*/ #main-content {background: url(../images/maincontent-bg.gif) left bottom no-repeat #fff; float:left; padding:0 10px 30px 10px; width:521px;} /*----------- 9.1.2 Main content wide -------*/ #main-content.wide {background: url(../images/maincontent-wide-bg.gif) left bottom no-repeat #fff; float:left; padding:0 10px 30px 10px; width:787px;} /*------------9.1.3 Landing ----------------*/ #landing {float:left; width:100%; background:#fff; float:left; padding:0 0 0 0; position:relative; font-size:1.1em;} #landing.wide-content {background:url(../images/wide-content-btm.gif) left bottom #fff no-repeat; margin-bottom:26px;} #landing.strategy {width:800px!important; margin-left:10px; margin-bottom:30px; float:left!important;} /*---------- 9.1.4 Sub Landing ---------------*/ #sub-landing {float:left; position:relative; width:100%; background:#fff; float:left; padding:0;} /*-------------------------------- 9.2 Secondary content ---------------------------------*/ #secondary-content {width:246px; float:right;} /*================================ 10. FOOTER =================================*/ #footer-outer-wrapper {background:url(../images/footer-bg.gif) repeat-x 0 0; clear:both; padding:28px 0 81px 0; width:100%; } #footer-inner-wrapper {background:#fff; border-top:1px solid #c7c2ba; float:left; padding-top:5px; width:100%;} #footer{width:980px; margin:0 auto; font-size:1.1em;} #footer p { padding-bottom:8px; margin-left:21px; float:left; width:643px; display:inline;/* FOR IE6 */} p#copyright { color:#9e9e9e; padding-top:18px; float:left; width:100%; display:inline;/* FOR IE6 */ text-align:center; border-top:1px solid #c7c2ba; } #footer ul {float:left; width:312px; } #footer ul li {float:left; width:auto; background:url(../images/footer-divider.gif) right 0 no-repeat; } #footer ul li.ft-last-item {background:none;} #footer ul li a {display:block; padding:0 8px 0 8px;}