/* * build 46 * * Table of Contents * ================= * 1. Common Styling * 2. Positioning header/body * 3. Header Styling * 4. a. Content/Main Styling * b. Content/sub-nav Styling * c. Content/modules Styling * 5. Forms * 6. Footer Styling */ /** * 1) Common Styling * ============== * * Standard link behaviour * * normal: red #CC0033 * hover: blue #003366 * * Text elements stay underlined * Navigation elements not * * Default font definition: 11px verdana with gray color (#656565) */ body {font: 11px verdana, sans-serif; color: #656565; margin: 0; padding: 0; width: 100%;} body {background: url(/_images/css-reg_body_bg.jpg) no-repeat 0 91px;} body.homepage{background: url(/_images/css-reg_body_bg-homepage.jpg) no-repeat 0 91px;} .arabic {direction: rtl;} /* body.green{background: url(/_images/css-reg_body_bg_green.jpg) no-repeat 0 91px;} body.green.homepage{background: url(/_images/css-reg_body_bg-homepage_green.jpg) no-repeat 0 91px;} */ * {font-size: 100%; padding: 0; margin: 0;} img{border: none} a{color: #CC0033} a:hover{color: #003366;} .green a:hover{color: #019A98} /* browser housekeeping */ div, ul, ol, li, table, td, th, tr, p, blockquote{margin: 0; padding: 0; border: none} /* to clear floated elements */ .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .clearfix {display:inline-block;} /* Hide from IE Mac \*/ .clearfix {display:block;} /* End hide from IE Mac */ #container{width: 1002px; padding-bottom: 20px; text-align: left; position: relative; /* to keep opera and safari in control */} .arabic #container{text-align: right;} #container, #content-container{overflow: hidden} #content-container{position: relative} /** * 2) Positioning header/body * ======================= */ #header{position: absolute; top: 0; left: 0; } #content-body{margin-top: 314px;} .homepage #content-body{margin-top: 397px;} /** * 3) Header * ====== * * colors: * * red: #CC0033 * blue: #003366 * * arabic notes: white space offset to the left = 35px */ /*** positioning & borders */ #logo{float: right; width: 229px; height: 50px; padding-top: 24px; padding-right: 2px; } #logo img{float: right} .arabic #logo{width: 209px; padding-right: 20px;} #header{height: 314px;} .homepage #header{height: 397px;} #search, #language-nav, #service-nav{float: left;} #search, #language-nav{height: 31px;} #search{float: left; width: 229px; padding-top: 57px; text-align: right; line-height: 20px; overflow: hidden;} #search input, #search label{display: block; float: left; margin-left: 3px; margin-top: 0px; } #search label{margin-top: 3px; margin-left: 6px; } #search input.input-txt{height: 15px; width: 86px; vertical-align: baseline; } .arabic #search{text-align: left; } .arabic #search input, .arabic #search label{float: right; margin-left: 0; margin-right: 3px; } .arabic #search label{margin-left: 0px; margin-right: 6px;} #language-nav{padding-top: 63px; /* padding-top from search + margin-top label */ width: 542px;} #language-nav ul{list-style : none;} #language-nav ul li{float: left; border-right: 1px solid #003366; padding-right : 5px; margin-right: 5px} #language-nav ul li.last{border-right: none;} .arabic #language-nav ul li{float: right; border-right: none; border-left: 1px solid #003366; padding-right : 0; padding-left: 5px; margin-right: 0px; margin-left: 5px;} .arabic #language-nav ul li.last{border-left: none;} #service-nav{width: 773px; height: 42px; float: left; margin-left: 229px; padding-top: 0px;} #service-nav ul{list-style : none; padding-top: 17px;} #service-nav ul li{float: left; border-right: 1px solid #FFFFFF; padding-right : 5px; margin-right: 5px;} #service-nav ul li.last{border-right: none;} .arabic #service-nav{margin-left: 0px; margin-right: 231px;} .arabic #service-nav ul li{float: right; border-right: none; border-left: 1px solid #FFFFFF; padding-right : 0; padding-left: 5px; margin-right: 0px; margin-left: 5px;} .arabic #service-nav ul li.last{border-left: none;} #banner-container{width: 1004px;} #banner-container, #campaign, #banner, #specials{min-height: 178px;} .homepage #banner-container, .homepage #campaign, .homepage #banner, .homepage #specials{min-height: 261px;} #campaign{float:left; width: 229px; overflow: hidden;} #campaign p{width: 180px; margin-left: 29px; margin-right: 20px} #banner{float: right; width: 772px /* + margin-right 1px (border from content-container) = 774px */; margin-right: 3px; height: 10px; overflow: hidden;} #banner #specials{width: 231px; position: absolute; right: 3px; top: 136px; } .arabic #campaign{float:right} .arabic #banner{float:left; margin-right: 0; margin-left: 1px; } .arabic #banner #specials{width: 231px; position: absolute; left: 1px; right: auto; top: 136px; } .arabic #campaign p{margin-left: 20px; margin-right: 29px} /*** styling */ #search label{color: #003366} #language-nav a, #language-nav a:hover{color: #003366; text-decoration: none;} .green #search label{color: #019A98} .green #language-nav a, .green #language-nav a:hover{color: #019A98} #campaign{color: #FFFFFF; text-align: right} #campaign span.quote{padding-left: 20px; } #campaign span.arrows{display: inline;} #campaign span.arrows img{padding-right: 5px; } #campaign span.arrows-ar{display: none;} .arabic #campaign{text-align: left; } .arabic #campaign span.quote{display: block; padding-right: 20px; padding-left: 0;} .arabic #campaign span.arrows{display: none;} .arabic #campaign span.arrows-ar{display: inline;} .arabic #campaign span.arrows-ar img{padding-left: 5px; } #service-nav, #service-nav li a, #service-nav li a:hover{color: #FFFFFF; text-decoration: none;} #specials.region-selector{background: url(/_images/css-reg_specials_countryselect-map.jpg) no-repeat 0px 0px;} /** * 4a) Main * ==== * * colors: * * red: #CC0033 * blue: #003366 * gray border: #D0D0D0 */ /*** positioning & borders: general */ #content-body{background: transparent; } #content-container{width: 772px /* + 2px from borders - 1px from padding subnav = 773px*/; float: right; padding: 0; border-left: 1px solid #D0D0D0; border-right: 1px solid #D0D0D0;} #three-col #content-container{background: transparent url(/_images/css-reg_content-container-bg.gif) repeat-y 542px 0px;} #three-col #main{width: 501px /* + padding + 1px border from content-container = 542px */ ; float: left; padding: 20px; } #three-col #modules{width: 191px /* + 1px border from content-container + padding = 231px */; float: right; padding: 25px 20px;} #three-col #sub-nav{width: 209px; float: left; padding: 0 9px 0 10px;} #three-col.arabic #content-container{float: left; background: transparent url(/_images/css-reg_content-container-bg.gif) repeat-y 229px 0px;} #three-col.arabic #main{float: right;} #three-col.arabic #modules{float: left;} #three-col.arabic #sub-nav{float: right; padding: 0 10px 0 9px;} #two-col-subnav #main{width: 732px; float: left; padding: 20px; } #two-col-subnav #modules{clear:both; width: 732px; padding: 0 20px;} #two-col-subnav #sub-nav{width: 209px; float: left; padding: 0 9px 0 10px;} #two-col-subnav.arabic #content-container{float: left;} #two-col-subnav.arabic #main{float: left;} #two-col-subnav.arabic #sub-nav{float: right;} #two-col-modules #content-container{background: transparent url(/_images/css-reg_content-container-bg.gif) repeat-y 542px 0px;} #two-col-modules #main{width: 501px /* + padding + 1px border from content-container = 542px */ ; float: left; padding: 20px; } #two-col-modules #modules{width: 191px /* + 1px border from content-container + padding = 231px */; float: right; padding: 25px 20px;} #two-col-modules.arabic #content-container{float: left; background: transparent url(/_images/css-reg_content-container-bg.gif) repeat-y 229px 0px;} #two-col-modules.arabic #main{float: right;} #two-col-modules.arabic #modules{float: left;} #one-col #main{width: 732px; float: left; padding: 20px; } /* one-col only exists for sanity reasons */ #one-col #sub-nav, #one-col #modules{clear:both} #one-col #modules{width: 732px; padding: 0 20px;} #one-col.arabic #content-container{float: left;} #theme-nav{float: left; width: 742px; padding: 17px 10px 17px 20px; min-height: 12px; background: #FFFFFF url(/_images/css-reg_themenav-bg.gif) repeat-x 0px 100%;} #theme-nav ul{list-style : none;} #theme-nav ul li{float: left; padding-right : 2px; margin-right: 2px; border-right: 1px solid #cfcfcf; white-space: nowrap} #theme-nav ul li.last{border-right: none; padding-right: 0; margin-right: 0;} .arabic #theme-nav{float: right; padding: 17px 20px 17px 10px; } .arabic #theme-nav ul li{float: right; padding-right : 0; padding-left: 2px; margin-right: 0; margin-left: 2px; border-right: none; border-left: 1px solid #cfcfcf; } .arabic #theme-nav ul li.last{border-left: none; padding-left: 0; margin-left: 0;} #main{min-height: 523px;} /*** styling: general */ #theme-nav, #theme-nav li a, #theme-nav li a:hover{text-transform:uppercase; font-size: 10px; font-weight: bold; color: #CC0033; text-decoration: none; } #theme-nav li a:hover{color: #003366} #theme-nav li.active a, #theme-nav li.active a:hover{color: #003366} .green #theme-nav li a:hover{color: #019A98} .green #theme-nav li.active a, .green #theme-nav li.active a:hover{color: #019A98} #crumb-trail, #crumb-trail a, #crumb-trail a:hover{color: #8C8C8C} #main h1{color: #003366; margin-bottom: 35px; } .homepage #main h1{margin-bottom: 10px;} #main h2{color: #003366; margin-bottom: 25px;} #main h3{color: #003366; margin-bottom: 15px;} #main h2 a{color: #003366; text-decoration: none;} #main h3 a{color: #003366; text-decoration: none;} .green #main h1, .green #main h2, .green #main h3, .green #main h2 a, .green #main h3 a{color: #019A98;} #main p{padding-bottom: 15px;} #main h1{font-size: 18px; padding-left: 20px; background: url(/_images/css-reg_icon-arrow-triple_red.gif) no-repeat 0px 10px } #main h2{font-size: 14px; clear: left;} #main h3{font-size: 12px; clear: left; padding-left: 12px; background: url(/_images/css-reg_icon-arrow_red-round.gif) no-repeat 0px 3px } #main ul, #main ol{clear: left; margin: 0 10px 10px 17px;} #main ul{list-style: none url(/_images/css-reg_icon-arrow_grey-round.gif) outside;} #main ol{margin-left: 20px} #main ul.linklist{margin: 0 10px 10px 0px;} #main ul.linklist li{list-style: none;} #main .fixedimage, #main .fixedimage.left{float: left; margin: 0 10px 10px 0;} #main .fixedimage.right{float: right; margin: 0 0 10px 10px;} #main .emphasize{padding-right: 10px; border-right: 1px dashed #D2D2D2; margin-right: 10px; } /*** styling: tables */ /*** currently defined inside FormatAreaStyles: **** 8< start cutting here >8 **** table.fixed, table.alternate-col_fixed {table-layout: fixed; border-collapse: collapse;} table.alternate-col{border-collapse: collapse;} col.alternate-col{background: #EEF1F6;} tr.alternate-row{background: #FFFFFF;} **** 8< stop cutting here >8 **** */ #main table{border: 0; margin: 0 0 15px 0; border-collapse: collapse; text-align: center;} #main table th, #main table td{padding: 7px 10px;} #main table th{background : #5772A3; font-weight: bold; color: #FFFFFF; } #main table td{vertical-align: top; background-color: #D5DBE7;} #main table.alternate-columns td{background-color: transparent;} #main table.alternate-columns col{background: #D5DBE7;} #main table.alternate-columns col.alternate-col{background: #EEF1F6;} #main table tr.alternate-row td{background: #8FA2C3; color: #FFFFFF} /*** styling: [block] noformat table */ #main table.noformat * {color: #000000; background: transparent; padding: 0;} /*** styling: [block] crumb */ #main #crumb-trail{margin-bottom: 20px; } #main #crumb-trail p{margin: 0; padding: 0;} /*** styling: [block] icons */ .jpg, .gif, .eps, .doc, .psd, .ppt, .png, .pdf, .mp3{display: inline /* if set to block: image will hide below fixedimage */; padding: 3px 0 3px 35px; line-height: 20px; margin-bottom: 2px; } .new{display: block; padding-left: 35px;} .back{display: block; padding-left: 10px;} .jpg{background: url(/_images/css-reg_icon-jpg.gif) no-repeat 0px 0px} .gif{background: url(/_images/css-reg_icon-gif.gif) no-repeat 0px 0px} .eps{background: url(/_images/css-reg_icon-eps.gif) no-repeat 0px 0px} .doc{background: url(/_images/css-reg_icon-doc.gif) no-repeat 0px 0px} .psd{background: url(/_images/css-reg_icon-psd.gif) no-repeat 0px 0px} .ppt{background: url(/_images/css-reg_icon-ppt.gif) no-repeat 0px 0px} .png{background: url(/_images/css-reg_icon-png.gif) no-repeat 0px 0px} .pdf{background: url(/_images/css-reg_icon-pdf.gif) no-repeat 0px 0px} .mp3{background: url(/_images/css-reg_icon-mp3.gif) no-repeat 0px 0px} .new{background: url(/_images/css-reg_icon-new.gif) no-repeat 2px 1px} .back{background: url(/_images/css-ar_icon-arrow_grey-dotted.gif) no-repeat 0px 5px} .arabic .jpg, .arabic .gif, .arabic .eps, .arabic .doc, .arabic .psd, .arabic .ppt, .arabic .png, .arabic .pdf, .arabic .mp3{display: inline /* if set to block: image will hide below fixedimage */; padding: 3px 35px 3px 0; line-height: 20px; margin-bottom: 2px; } .arabic .new{display: block; padding-left: 0; padding-right: 35px;} .arabic .back{display: block; padding-left: 0; padding-right: 10px;} /*** styling: [block] search filter */ #main div.filter{padding: 0; margin-bottom: 25px; width: 500px; height: 48px; background: url(/_images/css-reg_filter-small-bg.jpg) repeat-x 0px 0px; color: #FFFFFF; position: relative;} #main div.filter p{padding-bottom: 0; line-height: 48px;} #main div.filter label, #main div.filter input, #main div.filter select, #main div.filter img {margin-right: 2px; display: block; float: left;} #main div.filter label.first{clear: left; min-width: 80px; padding: 0 10px 0 5px; margin-right: 0; text-align: left; font-weight: bold; white-space: nowrap;} #main div.filter a{color: #FFFFFF} #main div.filter.advanced{height: 104px; background: url(/_images/css-reg_filter-large-bg.jpg) repeat-x 0px 0px; } #main div.filter.advanced p{line-height: 34px;} .arabic #main div.filter label, .arabic #main div.filter input, .arabic #main div.filter select, .arabic #main div.filter img {margin-left: 2px; margin-right: 0px; float: right;} .arabic #main div.filter label.first{clear: right; text-align: right; padding: 0 5px 0 10px; margin-left: 0;} #main div.filter input{height: 15px; margin-top: 15px;} /* inputs as block and line-height don't play together */ #main div.filter.advanced input{margin-top: 9px;} /*** styling: [block] archive links */ #main div.archive{margin-top: 40px} #main div.archive ul{list-style: none; margin-left: 0;} #main div.archive ul li{float: left; padding-left: 20px; margin-right: 15px; background: url(/_images/css-reg_icon-arrow_grey-dotted.gif) no-repeat 0px 4px;} /*** styling: [block] paging links */ #main div.paging{margin-bottom: 40px;} #main div.paging span.active{font-weight: bold} #main div.paging a{color: #656565;} /*** styling; [block] date */ #main span.date{display: block; font-size: 11px; font-weight: bold; color: #003366; margin-bottom: 5px; } .green #main span.date{color: #019A98;} /*** styling: [block] overview-item */ #main div.overview-item {margin-bottom: 15px;}/* + 15px from p = 30px */ #main div.overview-item h2{margin-bottom: 15px;} /*** styling: [block] result overview */ #main div.result-overview{color: #003366; margin-bottom: 20px;}/* + 15px from p = 35px */ #main div.result-overview span.current, #main div.result-overview span.terms, #main div.result-overview span.count{font-weight: bold} .green #main div.result-overview{color: #019A98;} /*** styling: [block] columns */ #main div.column{float: left; width: 48%; margin-right: 1%} .arabic #main div.column{float: right; width: 48%; margin-right: 0; margin-left: 1%} /*** styling: [block] print icon next to pagetitle */ #main div.pagetitle-container {margin-bottom: 40px;} #main div.pagetitle-container h1{display: inline; padding-left: 0; background: none; /* this will be taken care of by a span tag, since i'm inline now */} #main div.pagetitle-container h1 span{display: block; padding-left: 20px; background: url(/_images/css-reg_icon-arrow-triple_red.gif) no-repeat 0px 10px } #main div.pagetitle-container span.print{display: inline; float: right; background: url(/_images/css-reg_icon-print_footer.gif) no-repeat 0px 0px; font-size: 11px; padding-left: 24px; padding-top: 2px; margin-top: 5px; } #main div.pagetitle-container span.print a{color: #6a6a6a; text-decoration: none;} /*** styling: [block] horizontal line */ #main hr{clear: both; border: 0; width: 772px /* width without modules on the right */; margin-left: -20px; margin-right: -20px; margin-bottom: 15px; height: 2px; background: #FFFFFF url(/_images/css-reg_themenav-bg.gif) repeat-x 0px 100%; } #two-col-modules #main hr, #three-col #main hr{width: 542px; } /*** styling: [block] ASP calendar */ #main div.calendar{position: absolute; width: 250px; height: 200px;} /*** styling: [block] form elements (site wide!!!)*/ input.input-btn{border: none; height: 19px; background-color: #eaeaea; background-image: url(/_images/css-reg_button_bg.jpg); background-repeat: repeat-x; background-position: 0px 100%; color: #7c7b7b; font-weight: bold; padding: 0 5px; } /*** styling: [ct] region-selector */ #specials.region-selector{position: relative} #specials.region-selector div.selector{position: absolute; bottom: 20px; left: 0; width: 192px; padding: 0 20px; text-align: center;} #specials.region-selector span.input-container{line-height: 19px; margin: 0 auto;} #specials.region-selector select, #specials.region-selector input{float: left} #specials.region-selector select{width: 140px; margin-right: 10px; } #specials.region-selector img.title{margin-left: 1px; } .arabic #specials.region-selector select, .arabic #specials.region-selector input{float: right} .arabic #specials.region-selector select{margin-right: 0px; margin-left: 10px; } .arabic #specials.region-selector img.title{margin-left: 0; margin-right: 1px; } /*** styling: [ct] article */ #main div.article{} #main div.article div.paragraph{} /*** styling: [ct] news */ #main div.news{} #main div.news div.overview-item h2{font-size: 12px;} #main div.news div.overview-item h2 a{color: #003366; text-decoration: none;} .green #main div.news div.overview-item h2 a{color: #019A98; } /*** styling: [ct] speeches */ #main div.speech{} #main div.speech div.overview-item h2{font-size: 12px;} #main div.speech p.abstract{color: #003366;} #main div.speech p.abstract span{display: block;} .green #main div.speech p.abstract{color: #019A98;} /*** styling: [ct] events */ #main div.event{} #main div.event div.filter label{min-width: 100px;} #main div.event div.overview-item h2{font-size: 12px; margin-bottom: 10px} #main div.event div.overview-item h2 a{color: #003366; text-decoration: none;} .green #main div.event div.overview-item h2 a{color: #019A98; text-decoration: none;} /*** styling: [ct] publications */ #main div.publication{} #main div.publication div.filter label{min-width: 100px;} #main div.publication div.overview-item h2{font-size: 12px; margin-bottom: 10px} #main div.publication div.overview-item h2 a{color: #003366; text-decoration: none;} .green #main div.publication div.overview-item h2 a{color: #019A98; text-decoration: none;} /*** styling: [ct] contacts */ #main div.contacts{} #main div.contacts div.contact-block{width: 356px; margin-bottom: 10px;} #three-col #main div.contacts div.contact-block{width: 245px;} #main div.contacts div.contact-block.column1{float: left; clear: left;} #main div.contacts div.contact-block.column2{float: right; clear: right;} .arabic #main div.contacts div.contact-block.column1{float: right; clear: right;} .arabic #main div.contacts div.contact-block.column2{float: left; clear: left;} #main div.contacts div.contact-block div.header{color: #FFFFFF; background: #C9C9C9 url(/_images/css-reg_contacts_contact-block_header_bg.gif) repeat-x bottom left; font-weight: bold;} #main div.contacts div.contact-block div.header, #main div.contacts div.contact-block div.header li{min-height: 10px;} #main div.contacts div.contact-block div.header span.city-name{display: block; float: left; overflow: hidden; width: 186px; padding: 2px 10px;} #main div.contacts div.contact-block div.header ul{clear: none; display: inline; margin: 0; float:left;} #main div.contacts div.contact-block div.header ul li {width: 74px; display: block;float: left; text-transform: uppercase; text-align: center; border-left: 1px solid #ffffff; padding: 2px 0} #main div.contacts div.contact-block div.header a{color: #FFFFFF; text-decoration: none; display: block; width: 100%} #main div.contacts div.contact-block div.details{border: 1px solid #C2C2C2; border-top: 1px solid #8E8E8E; padding: 10px 10px;} #main div.contacts div.contact-block div.details span{display: block; } .arabic #main div.contacts div.contact-block div.header span.city-name{float: right;} .arabic #main div.contacts div.contact-block div.header ul{float:right;} .arabic #main div.contacts div.contact-block div.header ul li {border-left: 0; border-right: 1px solid #ffffff;} /*** styling: [ct] faq */ #main div.faq h2, #main div.faq h3{background: none; padding-left: 0; padding-right: 0;} #main div.faq h2{font-size: 11px;} #main div.faq ul{list-style: none; margin-left: 0;} #main div.faq ul{margin-bottom: 30px;}/* + margin-bottom li = 40px */ #main div.faq ul li {padding-bottom: 10px;} #main div.faq ul a{color: #656565} #main div.faq ul.specs{color: #A3A3A3; font-size: 10px; margin-bottom: 25px;} /*** styling: [ct] search results */ #main div.search div.overview-item{margin-bottom: 0px;}/* + 15px from p = 15px */ #main div.search h2{font-size: 11px;} #main div.search div.overview-item h2{margin-bottom: 0; font-size: 12px; font-weight: normal} #main div.search div.overview-item h2 a{color: #606060;} #main div.search div.filter label{min-width: 50px;} #main div.search div.tips table{width: 500px; table-layout: fixed;} /*** styling: [ct] product */ #main div.product.detail h2{color: #CC0033; padding-left: 12px; background: url(/_images/css-reg_icon-arrow_red-round.gif) no-repeat 0px 5px } #main div.product.detail h3{clear:both; padding-left: 0; background: none } #main div.product.finder h3{clear:both; padding-left: 0; background: none; } #main div.product.finder div.category-nav{margin-bottom: 15px;} #main div.product.finder div.category-nav h3{display: inline;} #main div.product.finder div.category-nav ul{float: right; display: inline; list-style: none; } #main div.product.finder div.category-nav ul li{float: left; margin-right: 5px; padding-right: 5px;} .arabic #main div.product.finder div.category-nav ul{float: left; display: inline; list-style: none; } .arabic #main div.product.finder div.category-nav ul li{float: right; margin-right: 0px; margin-left: 5px; padding-right: 0px; padding-left: 5px; } #main div.product.finder ul.results{list-style: none; margin-left: 0px; margin-top: 25px; padding-bottom: 40px; } #main div.product.finder ul.results li {margin-bottom: 20px; } #main div.product.finder ul.results li, #main div.product.finder ul.results li a{color: #003366; font-weight: bold; } #main div.product.finder ul.results li span.sbu{display: block; font-weight: normal; color: #606060;} .green #main div.product.finder ul.results li, .green #main div.product.finder ul.results li a{color: #019A98; font-weight: bold; } #main div.product div.formula img{border-right: 1px solid #D4D4D4} /*** styling: [ct] sitemap */ #main div.sitemap h2{margin-bottom: 15px;} #main div.sitemap ul{list-style: none; margin-left: 0;} #main div.sitemap ul li{list-style-image: none; } #main div.sitemap ul li, #main div.sitemap ul li a{color: #0D1218} #main div.sitemap div.column{width: 30%; margin-right: 2%} .arabic #main div.sitemap div.column{margin-right: 0; margin-left: 2%} #main div.sitemap div.overview-item{background: #E6EBF1} #main div.sitemap div.overview-item h2, #main div.sitemap div.overview-item h2 a{color: white; padding: 0 5px 0 12px; margin-bottom: 0; font-size: 11px;} #main div.sitemap div.overview-item h2{background: #5872A3 url(/_images/css-reg_icon-arrow_white-round.gif) no-repeat 9px 11px; line-height: 30px;} #main div.sitemap div.overview-item ul{margin-top: 10px; margin-left: 22px; } #main div.sitemap div.overview-item ul li{list-style: none url(/_images/css-reg_icon-dash.gif) outside ; } #main div.sitemap div.overview-item ul li a{color: #0D1218} /*** styling: [ct] multimedia */ #main div.multimedia h2{font-size: 11px; margin-bottom: 15px; color: #456890;} #main div.multimedia div.column{width: 32.34%; margin-right: 1%; margin-bottom: 15px; overflow: hidden; /* 3 columns */} #main div.multimedia div.category-container div.column{width: 24%; margin-right: 1%; /* 4 columns */} .arabic #main div.multimedia div.column{margin-right: 0; margin-left: 1%;} .arabic #main div.multimedia div.category-container div.column{margin-right: 0; margin-left: 1%;} #main div.multimedia div.item ul{list-style: none; margin-left: 0; margin-top: 5px; } /** * 4b) Modules * ======= * colors: * * red: #CC0033 * blue: #003366 */ /*** positioning & borders */ #modules{} /*** styling */ #modules{overflow:hidden; } #modules h2, #modules h3, #modules h2 a, #modules h3 a{font-size: 11px; color: #003366; text-decoration: none;} .green #modules h2, .green #modules h3, .green #modules h2 a, .green #modules h3 a{color: #019A98;} #modules h2{background: url(/_images/css-reg_icon-arrow-triple_red.gif) no-repeat 0px 4px; padding-left: 20px;} #modules h2, #modules div.event-selection, #modules div.news-selection, #modules div.related-article-selection{padding-bottom: 15px} #modules div.event-selection div.event, #modules div.news-selection div.news, #modules div.related-article-selection div.related-article{padding-bottom: 10px;} /*** styling: [block] news selection*/ #modules div.news-selection{} /*** styling: [block] events selection */ #modules div.event-selection{} #modules div.event-selection span.date{display: block;} /*** styling: [block] related articles selection*/ /*** styling: [block] subscription dialog */ #modules div.subscription{text-align: left; width: 169px; height: 64px; padding: 0 10px; background: url(/_images/css-reg_subscribe-bg.jpg) no-repeat 0px 100%} /* modules = 189px wide - see above */ #modules div.subscription label{display: block; margin-left: -10px; margin-bottom: 10px; padding: 0 5px; height: 27px; line-height: 27px; font-weight: bold; color: #FFFFFF;} #modules div.subscription input.input-txt{float: left; } #modules div.subscription input.input-btn{float: right;} .arabic #modules div.subscription{text-align: right;} .arabic #modules div.subscription input.input-txt{float: right; } .arabic #modules div.subscription input.input-btn{float: left;} /*** styling: [block] rss */ #modules div.rss{width: 180px; height: 17px; padding: 0; position: absolute; right: 25px; bottom: 45px; text-align: left; background: #ECECEE;} #modules div.rss a{display: block; float: left; margin-left: 7px; margin-top: 2px; color: #616161;} #modules div.rss a.icon{margin-left: 2px;} .arabic #modules div.rss{right: 0; left: 25px; text-align: right; } .arabic #modules div.rss a{float: right; margin-left: 0; margin-right: 7px;} .arabic #modules div.rss a.icon{margin-left: 0; margin-right: 2px;} /** * 4c) Subnavigation * ============= * colors: * * red: #CC0033 * blue: #003366 */ /*** positioning & borders */ #sub-nav{overflow: hidden;} #sub-nav .page-nav{width: 100%; padding: 17px 0; text-align: left;} .arabic #sub-nav .page-nav{text-align: right;} /*** styling */ #sub-nav .page-nav h2{background: url(/_images/css-reg_icon-tree_top.gif) no-repeat 0px 0px; text-transform:uppercase; font-size: 10px; font-weight: bold; color: #003366; padding: 0 5px 17px 15px; margin-left: 0px} .green #sub-nav .page-nav h2{color: #019A98;} #sub-nav .page-nav ul {margin: 0; padding: 0} #sub-nav .page-nav ul li{background: url(/_images/css-reg_icon-tree_middle.gif) no-repeat 0px 0px; padding: 3px 20px 6px 15px; line-height: 13px; list-style: none;} #sub-nav .page-nav ul li.last{background: url(/_images/css-reg_icon-tree_bottom.gif) no-repeat 0px 0px;} #sub-nav .page-nav ul li a{color: #000000; text-decoration: none; background: url(/_images/css-reg_icon-arrow-double_red.gif) no-repeat 0px 3px; padding-left: 20px; display:block; width: auto} #sub-nav .page-nav ul li.active a, #sub-nav .page-nav ul li a:hover{color: #003366; background: url(/_images/css-reg_icon-arrow-double_blue.gif) no-repeat 0px 3px;} #sub-nav .page-nav ul li.active a{font-weight: bold} .green #sub-nav .page-nav ul li.active a, .green #sub-nav .page-nav ul li a:hover{background: url(/_images/css-reg_icon-arrow-double_green.gif) no-repeat 0px 3px; color: #019A98;} #sub-nav .page-nav ul li ul{margin-left: -15px; margin-top: 6px; margin-bottom: -6px; /* compensate for margins set on ul li */} #sub-nav .page-nav ul li ul li, #sub-nav .page-nav ul li ul li.last{background: url(/_images/css-reg_icon-tree_middle-alt.gif) no-repeat 0px 0px; padding: 3px 20px 6px 15px; list-style: none;} #sub-nav .page-nav ul li.last ul li{background: none;} #sub-nav .page-nav ul li ul li a, #sub-nav .page-nav ul li.active ul li a{background: url(/_images/css-reg_icon-arrow_red-square.gif) no-repeat 5px 3px; color: #000000; font-weight: normal} #sub-nav .page-nav ul li ul li.active a, #sub-nav .page-nav ul li ul li a:hover{background: url(/_images/css-reg_icon-arrow_blue-square.gif) no-repeat 5px 3px; color: #003366} .green #sub-nav .page-nav ul li ul li a, .green #sub-nav .page-nav ul li.active ul li a{background: url(/_images/css-reg_icon-arrow_red-square.gif) no-repeat 5px 3px; color: #000000; font-weight: normal} .green #sub-nav .page-nav ul li ul li.active a, .green #sub-nav .page-nav ul li ul li a:hover{background: url(/_images/css-reg_icon-arrow_green-square.gif) no-repeat 5px 3px; color: #019A98;} #sub-nav .page-nav ul li ul li ul li{padding-left: 24px;} /** * 5) Forms * ===== */ /*** positioning & borders */ /*** styling */ /** * 6. Footer * ====== * * colors: * * gray text: #6A6A6A * gray border: #C8C8C8 * gray background: #D9D9D9 */ /*** positioning & borders */ #footer{width: 100%; clear: both;} #footer div.webfooter{width: 100%; background: #D9D9D9} #footer div.webfooter p, #footer div.webfooter ul li{padding-top: 9px ; padding-bottom: 5px;} #footer div.webfooter p{float: left; width: 501px; padding-left: 20px;} #footer div.webfooter ul{float: right; width: 230px; list-style : none; } #footer div.webfooter ul li{float: left; border-left: 1px solid #C8C8C8; padding-left: 5px; padding-right: 5px; margin-right: 5px} .arabic #footer div.webfooter p{float: right; padding-left: 0px; padding-right: 20px} .arabic #footer div.webfooter ul{float: left;} .arabic #footer div.webfooter ul li{float: right; border-left: none; border-right: 1px solid #C8C8C8; margin-right: 0px; margin-left: 5px} #printfooter{display: none; } /*** styling */ /* #footer div.webfooter{background: #D9D9D9} */ #footer div.webfooter p, #footer div.webfooter ul li a, #footer div.webfooter ul li a:hover{color: #6a6a6a; text-decoration: none;} #footer div.webfooter .email{display: block; padding-left: 20px; padding-top: 2px; background: url(/_images/css-reg_icon-email_footer.gif) no-repeat 0px 0px;} #footer div.webfooter .print{display: block; padding-left: 24px; padding-top: 2px; background: url(/_images/css-reg_icon-print_footer.gif) no-repeat 0px 0px;} .arabic #footer div.webfooter .email{padding-left: 0px; padding-right: 20px; background: url(/_images/css-reg_icon-email_footer.gif) no-repeat 100% 0px;} .arabic #footer div.webfooter .print{padding-left: 0px; padding-right: 24px; padding-top: 2px; background: url(/_images/css-reg_icon-print_footer.gif) no-repeat 100% 0px;}