/*============================================================================ [Screen Stylesheet] ============================================================================== Project: WEB DE HIDROTERM INGENIERIA Version: 1.0 Last Modified: 05/05/2011 Assigned to: HTOPIAS Primary use: Page Layouts - one, two colum & three layouts ==============================================================================*/ /*============================================================================= [Table of Contents] =============================================================================== A. Global Reset B. Global Formatting C. Layout 1. Body 1.1. Skip to content / a#skip 2. Layout wrapper / div#wrapper 2.1. Header / div#header 2.1.1 Logo / #loto h1 2.1.2. Text /#text 2.1.3. Search /#searchBox 2.1.4 Global navigation / div#globalNav 2.1.5 Request Quoest /div#requestQuote 2.2. Banner section / div#banners (home page only) 2.3. Subpage Title / div#pageTitle 2.4. Middle section / div#middle 2.4.1 Primary column / div#primeCol 2.4.1.1 Main content 2.4.1.1.1 About V-BID /.about 2.4.1.1.2 Publications /.publications 2.4.2 Second column / div#secondCol 2.4.2.1 News /.news 2.4.2.2 Healthy Policy & Reform /.policies 2.4.2.3. Sign Up for Updates /.signUp 2.4.2.4. Stay Connected /.stayConnected 2.4.2.5. Subnav /#subNav 2.4.3 Third column / div#thirdCol 2.4.3.1 Potos/.photos 2.4.3.2. The Facts /.theFacts 2.4.3.3. Testimonials/.testimonials 2.5 Footer / div#footer 2.5.1. Footer logo / .logo 2.5.2. Footer right info /.info 2.5.2.1. Footer navigation / ul#footNav 2.5.2.2. Address 2.5.2.3. Copyright/.copyright ===============================================================================*/ /*============================================================================== [Color codes] ================================================================================ #000000 black (body text color) #ffffff white (main content bg, globalnav text) #416898 blue (body bg) #336699 blue (default links ) #6395c7 blue (about V-BID heading, blue heading) #6699cc blue (page title bg) #1b3964 blue (global nav hover/dropdown bg) #6395c7 yellow (sub/local nav title, News heading, dropdown hover) #ffe992 biege (sub/local nav bg) #ffe992 grey (sub/local nav hover) ==================================================================================*/ /*================================================================================= A. GLOBAL RESET ===================================================================================*/ body {font: 62.5%/1.3 Arial,verdana,Helvetica,sans-serif; background: #fff; color: #000; margin: 0; padding: 0;} p, h1, h2, h3, h4, h5, h6, fieldset, form, label, input, textarea, legend, dl, dt, dd, table, caption, th, td, blockquote, cite { margin: 0; padding: 0; font-size: 1em; } ul, ol, li, ul *, ol * {font-size: 1em;} input, textarea {font-family: Arial,Verdana,Helvetica,sans-serif;} textarea {overflow: auto;} table {border-collapse: collapse; margin-bottom: 2em;} td, th {padding: 0.1em 1em; border: 1px solid #999; } a img {border: 0;} acronym, abbr {border-bottom: 1px dotted; cursor: help;} cite {font-style: normal;} :focus {outline: 0;} /*==================================================================================== B. GLOBAL FORMATTING =====================================================================================*/ .clear {clear: both; height: .001em; font-size: .001em;} .left { float: left; display: inline; padding-bottom: 10px; } .right {float: right; display: inline;} .center {text-align: center;} .block {display: block;} .bld {font-weight: bold;} .biggerTxt {font-size: 1.15em;} .smallerTxt {font-size: .9em;} .imgRight {float: right; margin: 5px 0 8px 8px;} .imgLeft {float: left; margin: 5px 8px 8px 0;} .blackTxt {color: #000!important;} .blueTxt {color: #255795;} .greyTxt {color: #504b4b;} a {color: #336699; text-decoration: none; font-weight: bold;} a:hover {text-decoration: underline;} a:visited {color:#6633CC;} h1 {font-size: 1.4em;line-height: 120%;} h2 {font-size: 1.3em;line-height: 120%;} .about h2 a:link, .about h2 a:visited {color:#fff;} .publications h2 a:link, .publications h2 a:visited {color:#fff;} h3 {font-size: 1.2em; } h4 {font-size: 1.1em;} h5 {font-size: 1em;} h6 {font-size: 0.9em;} h1, h2, h3, h4, h5, h6 {margin-bottom: 1em;} hr {border: none; margin: 15px 0; background: #868581; padding: 0; height: 1px;} /*====================================================================================== C. LAYOUT * =======================================================================================*/ /*-------------------------------------------------------------------------------------------- 1. Body / body ----------------------------------------------------------------------------------------------*/ body {background: #416898 url(body_bg0.jpg) repeat-x 50% 0; } /* 1.1. Skip to content / a#skip */ #skip {position: absolute; top: -1000px;} /*------------------------------------------------------------------------------------------ 2. Layout Wrapper ---------------------------------------------------------------------------------------------*/ #wrapper{color: #000; font-family: arial,verdana,sans-serif; font-size: 1.3em; margin: 20px auto; width: 960px; overflow: hidden;} #corners {background: #fff; margin:auto;overflow: hidden;} #cornerContent{background: #fff; padding: 0px 10px; overflow: hidden; } #cornerTopLeft {background: url(body_cor.gif) no-repeat top left; height: 10px;} #cornerTopRight {background: url(body_cos.gif) no-repeat top right; height: 10px;} #cornerBottomLeft {background: url(body_cot.gif) no-repeat bottom left; height: 10px;} #cornerBottomRight {background: url(body_cou.gif) no-repeat bottom right; height: 10px;} #wrapper p {margin-bottom: 1em;} /*......................................................................... 2.1. Header / div#header ...........................................................................*/ #header {width: 100%; z-index: 9999; background: #1b3964 url(header_b.jpg) no-repeat 0 0; padding: 0; margin: 0 0 10px 0px;} /* 2.1.1 vbid logo / #logo */ #logo {float: left; width: 185px; margin: 0 5px 10px 10px; padding: 0px; overflow: hidden; } #logo h1 {height: 80px; width: 185px; margin: 0; padding: 0; background: url(http://www.hidroterm.com.ve/index2_files/vbid_log.jpg) no-repeat; margin: 0; text-indent: -9000px; float: left; } #logo h1 a:hover {border-bottom: none;} /* 2.1.2 vbid text / #text */ #text {float: left; text-align: left; width: 480px; margin: 10px 5px 10px 0; padding: 0px; overflow: hidden; } #text h1 {height: 66px; width: 480px; margin: 0; padding: 0; background: url(http://www.hidroterm.com.ve/index2_files/vbid_tex.png) no-repeat; margin: 0; text-indent: -9000px; float: left; } #text h1 a:hover {border-bottom: none;} /*2.1.3 search box */ #searchBox {float: right;width: 225px; font-size: .95em; text-align: left; color: #fff; margin: 25px 5px 10px 10px;} #searchBox form {margin: 0;} #searchBox .query {vertical-align: middle; background: #fff url(http://www.hidroterm.com.ve/index2_files/magnifie.gif) no-repeat 0 50%; padding: 3px 2px 3px 25px; width: 160px; margin-right: 5px; border: 1px solid #ccc7c7;} #searchBox input {vertical-align: middle;} /* 2.1.4. Global navigation / div#globalNav */ #globalNav {font-size: 11px; z-index: 9999; font-family:Arial,verdana, Helvetica,sans-serif; margin: 5px 0px 0px 0px; display: block; padding: 0px 4px; background: url(global_n.jpg) repeat-x 0 0; float: none; width: 932px;} #globalNav ul {padding: 0 0 0 1px; margin: 0; float: left; } #globalNav ul a {display: block; } #globalNav ul li {float: left; width: 131px; display: inline; padding: 0 2px 0 0; margin: 0;} #globalNav ul li a{background: url(global_n.gif) no-repeat 0 0; display: block; vertical-align: middle; padding: 12px 5px 9px 5px;font-weight: bold; color: #fff; text-align: center; } /* 2.1.4.1 Global nav dropdown menu / ul.dropdown */ .dropdown{position: absolute; left: -999em; width: 200px; margin: 0px !important; overflow: hidden; z-index: 1000; overflow: hidden; float: none; } #globalNav ul li ul {margin: 0; padding: 5px 0px 0px 0px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; background: #1b3964 url(dropdown.jpg) no-repeat 100% 0%;} /*#globalNav ul li.current ul {background: #1b3964 url(../images/navs/dropdown_top_current.jpg) no-repeat 100% 0%;}*/ #globalNav ul li ul.dropdown li {float: none; padding: 0; margin: 0;} #globalNav ul li:hover ul, #globalNav li.sfhover ul { left: auto; } #globalNav ul li ul.dropdown li a, #globalNav ul li.current ul.dropdown li a {font: normal 13px arial,verdana,sans-serif; display: block; color: #fff; text-align: left; background: #1b3964 url(dropdowo.jpg) repeat-x 0 100%; border-right: 3px solid #fff; margin: 0px; padding: 10px 10px 5px 10px; line-height: 120%; } /*.......................................................................................... 2.2. Banner section / div#banners ............................................................................................. */ #banners {width: 940px; margin-bottom: 10px; padding:0px; overflow: hidden;} #banners img {} /* do not remove this; otherwise there will be a gap on the bottom of the photo on the firefox */ #banners #photos {float: left; margin: 0; padding: 0; width: 640px; height: 274px; overflow: hidden;background: #fff;} #photos li{} /*................................................................................................ 2.3. Sub Page Title / div#pageTitle ..................................................................................................*/ h1#pageTitle {margin: 0; padding: 7px 10px; color: #fff; text-transform: uppercase; font-size: 14px; background: #6395c7 url(corner_b.jpg) no-repeat 100% 100%;} /*................................................................................................ 2.4. Middle section / div#middleOuter, #middleInner ..................................................................................................*/ #middle {float: left; margin: 0px; overflow: hidden; width: 100%; background: transparent; } .twoCol #middleOuter, #home .twoCol #middleOuter {border-right: none;} .twoCol #thirdCol, #home .twoCol #thirdCol {display: none;} .oneCol #middleOuter, #home .oneCol #middleOuter {border: none;} .oneCol #secondCol, #home .oneCol #secondCol {display: none;} .oneCol #middleInner, #home .oneCol #middleInner {border:none;} /* 2.4.1 Primary column / div#primeCol */ #primeCol {float: left; margin: 0px; padding: 0; width: 460px; overflow: hidden; /*position: relative; z-index: 12;*/} #home #primeCol {width: 640px;} .twoCol #primeCol {width: 700px;} .oneCol #primeCol {width: 940px;} /* 2.4.1.1 Main content */ #primeCol #mainContent {margin: 20px 15px 0 10px; padding: 0px 0 15px 0; display: block; overflow: hidden; } #home #primeCol #mainContent {margin: 0px; } /* 2.4.1.1. /about V-BID */ .about {margin-bottom: 10px; width: 100%; overflow: hidden;} .about h2 {font-size: 14px; color: #fff; padding: 10px; background: #6395c7 url(corner_b.jpg) no-repeat 100% 100%;} .about .inner {} .about .text {float: left; padding: 10px; width: 335px; } .about .text .heading {font-size: .95em; color: #336699; font-weight: bold;} .about .video {float: right; padding: 10px 10px 10px 0; width: 260px; max-width: 260px;} /* 2.4.1.2. /Publications */ .publications {color: #336699; width: 100%; margin-bottom: 10px; overflow: hidden;} .publications h2 {font-size: 14px; color: #fff; padding: 10px; background: #6395c7 url(corner_b.jpg) no-repeat 100% 100%;} .publications .inner {} .publications .panel {float: left; padding: 10px 15px 10px 15px; width: 270px; } .publications .panel .heading {font-size: .95em; color: #336699; font-weight: bold;} .publications .panel img { float: left; margin-top: 0; margin-right: 10px; margin-bottom: 40px; margin-left: 0; } .publications .border {border-right: 1px dotted #7dabf1;} .publications .left {margin-right: 15px;} /* 2.4.1.3 Site Index .sitemap*/ .sitemap {} .sitemap ul {margin-left: 0; padding-left: 0px; } .sitemap ul li {list-style: none; margin-left: 0; } .sitemap ul li a {background: #e5e7e8; margin-bottom: 8px;display: block;padding: 5px 10px; } .sitemap ul ul {margin-left: 20px;padding-left: 15px;} .sitemap ul li ul li {list-style: disc;} .sitemap ul li ul li a{ margin-left: 0px; margin-bottom: 5px; background: none; list-style: disc;} /* 2.4.1.4 Staff */ .staffPhoto { float: left; width: 120px; margin: 0 10px 30px 0; } .staffPhoto img {width: 110px; border: 1px solid #ccc;} /* 2.4.1.5. Symposium */ .symposium {border: 1px dotted #ccc; margin-bottom: 20px; background: #fbfcfd; padding: 8px;} /*2.4.1.6 Lists */ ul.linkList {margin: 0 0 15px 0; list-style-type: none; } ul.linkListNoArrow li{padding-left: 20px; list-style-type:none; list-style-position:outside;margin-left:-10px; } ul.link, ul.linkListNoArrow {margin: 0 0 15px 0; padding: 0; font-size: .95em;} ul.linkListNoArrow li {border-bottom:1px solid #ccc; padding-bottom: 2em;;} ul.link li a, ul.linkListNoArrow li a {} ul.link ul {margin-top: 10px;} ul.link ul li, ul.linkListNoArrow li {background: none; padding-left: 10px;} ul.dots {margin: 0 0 15px 0; padding: 0; font-size: .95em; list-style-type: none;} ul.dots li a {} ul.dots ul li {background: none; list-style: disc; padding-left: 10px;} ul.border li {border-bottom: 1px dotted #ccc; padding-bottom: 10px;} ul.faculty {list-style:none; margin: 0; padding: 0;} ul.faculty li{margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px dotted #dfe2e5;} /* 2.4.2 Second column / div#secondCol */ #secondCol {background:#fff;width: 220px; margin-right: 20px; padding: 0px; float: left; overflow: hidden;} #home #secondCol {width: 280px; float: left; } /*2.4.2.1 News sidebar .news*/ .news{ margin-bottom: 10px; overflow: hidden;} .news h2 {font-size: 15px; text-transform: uppercase; background: #C0C0C0 url(corner_t.jpg) no-repeat 100% 0; color: #000; margin: 0; padding: 8px 8px 8px 15px;} .news h2 a:visited {color:#000;} .news .inner {margin: 10px;} .news ul {margin: 0px; padding: 0;} .news ul li {color: #336699; list-style-type: none; margin: 0 0 10px 0; padding: 0; border-bottom: 1px dotted #1a3763;} .news .newsTitle {display: block; font-weight: normal;} /*2.4.2.2 Healthy Policy & Reform .healthy*/ .healthy{ margin-bottom: 10px; overflow: hidden;} .healthy h2 {font-size: 15px; text-transform: uppercase; background: #6395c7 url(corner_t.jpg) no-repeat 100% 0; color: #000; margin: 0; padding: 8px 8px 8px 15px;} .healthy .inner {margin: 10px;} .healthy ul {margin: 10px; padding: 0;} .healthy ul li {color: #336699; list-style-type: none; margin: 0 0 10px 0; padding: 0;} .healthy .healthyTitle {display: block; font-weight: bold;} /*2.4.2.3 Sign Up for Updates */ .signUp {color: #1a3763; margin-bottom:10px; padding-bottom: 10px; background: #e1ebf5 url(corner_c.jpg) no-repeat 100% 100%;} .signUp .inner {padding: 10px 10px 5px 15px; background: #e1ebf5 url(corner_u.jpg) no-repeat 100% 0;} .signUp h2 span { border-bottom: 1px solid #7dabf1; padding: 5px 5px 5px 0;} .signUp input {vertical-align: middle;} .signUp form {margin: 5px 0;} .signUp .email {border: 1px solid #ccc7c7; width: 200px; padding: 3px 2px; margin-right: 5px;} /* 2.4.2.4 Stay Connected */ .stayConnected {padding: 0px 0 0px 0; background: #e1ebf5; overflow:hidden; width: 100%;} .stayConnected .inner {padding: 15px 5px 0px 10px; width: 100%; float: left; overflow: hidden;} .stayConnected h2 { float: left; padding: 10px 10px 5px 0; text-transform: uppercase; font-size: 13px;} .stayConnected img {margin-right: 15px;} .stayConnected .icons {margin: 5px 0px 5px 5px; float: left; vertical-align: middle; overflow: hidden;} .stayConnected .bottomLeft {height: 10px; background: url(corner_d.jpg) no-repeat 0 100%;} .stayConnected .bottomRight {height: 10px; background: url(corner_c.jpg) no-repeat 100% 100%;} /* 2.4.2.5 sub/local navigation /div#subNav */ #subNav h2 {font-size: 15px; padding: 8px 10px 8px 15px; margin: 0; color: #000; text-transform: uppercase; background: #C0C0C0 url(http://www.hidroterm.com.ve/index2_files/cornergray.jpg) no-repeat 100% 0;} #subNav ul {padding: 0px; margin: 0; background: #ffe992;} #subNav ul a {border-bottom: 1px dotted #336699;} #subNav li a:hover, #subNav .current a {text-decoration: none; color: #0c2141; background: #d1d2bb url(http://www.hidroterm.com.ve/index2_files/dots.gif) no-repeat 15px 50%; } #subNav ul li {display: inline; line-height: 120%;} /* 2.4.2.6 sidebar */ .sidebar {margin-bottom: 10px; min-height: 30px; padding: 10px 0;} /* 2.4.3 Third column / div#thirdCol */ #thirdCol {width: 220px; margin-left: 20px; float: right; } #home #thirdCol {display: none;} /* 2.4.3.1page poto .pagePhoto */ .pagePhoto {overflow: hidden; width: 220px; margin-bottom: 20px;} .pagePhoto img {margin: auto; max-width: 220px;} /*2.4.3.2. The facts .facts */ .theFacts {background: #fff; color: #1a3763; width: 100%; overflow: hidden; margin-bottom: 20px; border-bottom: 1px solid #e1ebf5;} .theFacts h2 {font-size: 16px; margin: 0; padding: 5px 12px; background: #e1ebf5 url(corner_c.jpg) no-repeat 100% 100%;} .theFacts .content{background: #fff; padding: 0px; overflow: hidden; border: 1px solid #e1ebf5; } .theFacts .inner {margin: 0; padding: 15px 12px 0 12px;} html>body .theFacts .content {border-bottom: none;} /*2.4.3.3.Testimonials */ .testimonials {color: #336699; font-size: 14px; padding-top: 15px; background: #e1ebf5 url(corner_u.jpg) no-repeat 100% 0;} .testimonials .inner {padding: 0 12px 3px 12px; background: #e1ebf5 url(corner_c.jpg) no-repeat 100% 100%;} /*.................................................................................. 2.5. Footer / div#footer .................................................................................*/ #footer {color: #fffeea; overflow: hidden; margin: 0 0 10px 0; padding: 10px; width: 100%;} /* 2.5.1.Footer SPH logo/ div.logo */ #footer .logo {float: left; width: 142px; margin: 10px; overflow: hidden;} #footer .apex {float: left; width: 50px; margin: 5px 5px 5px 20px; overflow: hidden;} /*2.5.2. Footer info / .info */ #footer .info {color: #fff; font-size: 12px; float: left; text-align: center;width: 680px;} /* 2.5.2 .1Footer navigation / ul#footNav */ #footNav {overflow: hidden; text-align: center;} #footNav ul {list-style-type: none; color: #b9dcff; text-align: center; margin: 10px 0px 10px 0; padding:0; } #footNav ul li {display: inline; padding: 5px 10px; } #footNav ul li.last {background: none;} #footNav ul li a {font-size: 12px; font-weight:bold; color: #b9dcff; padding: 0px 10px 0 0px; margin: 0;} #footNav ul li a:hover, #footNav ul li.current a {text-decoration: none; color: #febd01;} /* 2.5.2.2. Footer address info / div.address*/ #footer .address {margin: 0px 0px 5px 0; overflow: hidden;} /* 2.5.2.3 Footer copyright / div.copyright */ #footer .copyright {margin: 0px 0px 5px 0; overflow: hidden;} #footer .copyright a {color: #b9dcff;} /*.............................extra styles....................................... */