/******************************************* CREATED FOR TA2RAO DEC 09 AUTHOR: NAIBUKA QARAU DEVELOPMENT BY: KOMUNIQ8 URL: http://komuniq8.com ------------------------------------------- COLOR GUIDE ------------------------------------------- Background - #FFFFFF Foreground - #3E423A Main Nav BG - #E4F6FC Main Nav - #E4F6FC Main Nav Border - #FFFFFF Main Nav Hover - #22C1E8 Secondary Nav - #0066CC Secondary Nav Hover- #FF196B Titles - #B2A409 Content Text - #1F3A40 Image Border - #003340 Image Border Hover - #E4F6FC *******************************************/ @import "reset.css"; /*------------------------------------------- GENERIC STYLES -------------------------------------------*/ body{ font: 13px/1.7em Arial, Helvetica, sans-serif;} html, body { height: 100%;} h1, h2, h3, #footerRightContent h3, h4, h5{ color:#197189; letter-spacing:0.02em; font-family: Georgia, Times New Roman, sans ; display:block; margin-bottom:5px; font-weight:bold;} h1{ font-size: 22px; } h2{ font-size: 19px; } h3{ font-size: 17px; } h4{ font-size:15px;} h5{ font-size:13px;} #footerPan h1, #footerPan h2, #footerPan h3, #footerPan h4 {color: #CBECF6; margin-bottom:10px;} p{ padding:0px 0px 15px;} a{text-decoration:none;} a:link, a:visited {color:#0055CC; text-decoration:none; border:none;} a:hover{ text-decoration:none; color:#FF196B;} a:focus {color:#0055CC} /*------------------------------------------- UTILITY STYLES -------------------------------------------*/ /*--------IMAGE STYLES--------*/ .right { float:right;} .left { float:left; } .leftImage{ float:left; margin: 0px 10px 0px 0px; border: none; overflow:hidden; padding:4px; vertinadi-align:top;} .center { display:block; margin:15px auto; border:1px solid #764A05; padding:4px; background:#efeed9;} input.button{background:#B8934A; float:right; clear:left; width:auto !important; padding: 3px 8px; color:#F4DFB8; border:none; text-transform: lowercase; font-size:1.4em;} input:focus.button{background: none !important; color:#661C00;} .nadiContainer{margin:0px auto; width:960px;} .push{height:420px;} /*THIS IS THE HEIGHT FOR THE FOOTER USED TO CREATE A STICKY FOOTER*/ .required { color: red; } .contentBlock {margin:10px 0px 30px;} .contentBlock ul {padding:0px !important;} span.more{text-align:right; float:right; font-size:11px; font-weight:bold;} .closed {background:#67A7B6 none repeat scroll 0 0; color:#FFFFFF; padding:5px; text-align:center;} .leftPad{padding-left:20px;} /*------------------------------------------- LAYOUT STYLE RULES -------------------------------------------*/ .clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */ div { position:relative } /* This will save you having to declare each div's position as 'relative' and allows you to absolutely position elements inside them */ /*------------------------------------------- STRUCTURE -------------------------------------------*/ #headerPan {width:100%; height: 420px; background: transparent url(../images/headerBG01.png) repeat-x top left;} #headerWrap { height:420px; margin:0px auto; background: transparent url(../images/headerPanelBG2.png) no-repeat top center; overflow:hidden;} #ie #headerWrap { height:420px; margin:0px auto; background-position:center center; background: transparent url(../images/headerPanelBG.png) no-repeat center; overflow:hidden; } #contentPan {width:100%; height: auto; margin-top:20px; background: transparent url(../images/gradientBG1.png) repeat-x bottom left;} #header{ width:1002px; height: 98px; background: transparent url(images/header_bg1.png) scroll no-repeat top center; } #footerPan {height: 420px !important; display:block; color:#E4F6FC; font-size:11px; line-height:1.4em; background: transparent url(../images/footerBG.png) scroll repeat-x top left;} #footerWrap { height:420px; margin:0px auto; } /*------------------------------------------- HEADER -------------------------------------------*/ #headerWrap #logo{height:100px; padding: 0px;} #headerWrap #logo a, #headerWrap #logo a#home:hover {display:block; height:80px; width:460px; text-indent:-3000px; overflow:hidden; background: transparent url(../images/siteTitle.png) scroll no-repeat top left;} #headerWrap #logo a:hover{ height:80px; background-position: 0px -90px;} /*#ie6 #headerWrap #logo{margin-bottom:-3px;}*/ #headerWrap #headerImage {margin-left: 0px; height:300px; top:0px; } #headerWrap #headerPanel{height:300px; width:620px; display:block;} #headerWrap #headerImageThumb {margin: 0px; height:300px; top:0px; float:right; } #headerImageThumb #thumbTop {display:block; } #headerImageThumb #thumbBtm {display:block; padding-top:20px;} #ie6 #headerImageThumb #thumbBtm {display:block; padding-top:17px;} /*PADDING FOR IE*/ #headerImage img, #headerImageThumb #thumbTop img, #headerImageThumb #thumbBtm img{border:10px solid #026c86; } #logoImageThumb { height: 140px; width: 300px; } #logoImageThumb #logoLeft{float:left} #logoImageThumb #logoRight{float:right} #logoImageThumb #logoLeft img {border:10px solid #67a7b6;} #logoImageThumb #logoRight img {border:10px solid #67a7b6;} /*------------------------------------------- MAIN NAVIGATION -------------------------------------------*/ #headerWrap #topNav{width:320px; float:right; height:260px; margin:0px; float:right; background:transparent url(../images/mainNavBG.png) no-repeat bottom center;} #headerWrap ul#mainNav{ width:300px; margin:0 10px; list-style-type:none;} #headerWrap ul#mainNav li{ margin:0px; } #headerWrap ul#mainNav li a:link, #headerWrap ul#mainNav li a:visited {color:#3f727e; font-size:14px; font-weight:bold; text-decoration:none; text-transform:uppercase; display:block; border-bottom:1px solid #FFF; height:30px; line-height:30px; padding:0px 20px 0px; } #headerWrap ul#mainNav li a:hover, #headerWrap ul#mainNav li a.active{color:#FFF; text-decoration:none; background: #22C1E8; /* url(../images/link-hover.png ) no-repeat left center;*/} /*#headerWrap ul#mainNav li a.active{ border-bottom:1px #004c5e solid;} */ /*------------------------------------------- CONTENT AREA STYLES -------------------------------------------*/ #contentPan #contentBottom { margin-top: 30px; padding-bottom:30px;} #contentTop ul {list-style-type:none;} #contentBG {width:100%; min-height:500px; height: auto !important; height: 500px; margin-top:10px; background:url("../images/shadow.png") no-repeat scroll 640px top transparent; padding-bottom:50px;} #nextPrevious ul {display:block; text-align:center; font-weight:bold; font-size:11px; text-transform:uppercase; padding:20px 0px !important;} #nextPrevious ul li {display:inline;} #nextPrevious ul li a#bckToProjects {padding:0px 70px; height:31px;} /*background: transparent url(../images/previous.png) no-repeat center center; } background: transparent url(../images/shadow.png) no-repeat top right;} /*#contentTop .grid_4, #contentBtmRight{padding-left:20px; width:280px;}*/ /*RIGHT SIDE SEC_NAV*/ #secondaryNav {} #secondaryNav .secNav, ul.projectNav {padding:15px 0px; margin-bottom:40px; border-style:solid; border-width:2px 0px; border-color:#67a7b6; } #secondaryNav .secNav li {list-style-type:none; padding-left:10px; } #secondaryNav .secNav li a{background:transparent url(../images/arrow-secnav.gif) no-repeat 0px center; padding-left:10px; } #secondaryNav .secNav li a:hover, #secondaryNav .secNav li a.active {color:#FF196B; background:transparent url(../images/arrow-secnav-hover.gif) no-repeat 0px center;} .secNav {padding-left:20px; list-style-type: disc;} ul#events, ul#recentProjects {padding:15px 0px 15px 20px; margin-bottom:40px; border-style:solid; border-width:2px 0px; border-color:#67a7b6; } ul#recentProjects li {list-style-type: square; color:#0066CC; } ul#recentProjects li:hover {color:#FF196B; } ul#events li {list-style-type: disc; } #notes { font-size:12px; width:300px;} div#projectContent {margin-left:0px;} div#projectContent ul { padding-left:20px;} div#projectContent ul li { list-style:square; } div#projectLogos{margin:0px 0px 0px 10px; } #projectLogos img {border:10px solid #CBECF6;} ul.projectNav{padding:15px 10px;} ul#curProjects li {display:block; border-bottom:1px solid #67A7B6; /*border-top:1px solid #67A7B6; */ padding:20px 15px 20px; } ul#curProjects li.first {padding-top:0px;} /* CONTENT LINK STYLES */ ul#curProjects li:hover {display:block; background:#E4F6FC; } ul#curProjects li a:link, ul li.btmProjects a:link , ul.projectNav li a:link{color:#0055CC; text-decoration:none; border:none;} ul#curProjects li a:hover, ul li.btmProjects a:hover, ul.projectNav li a:hover{ text-decoration:none; color:#FF196B !important;} ul#curProjects li a:visited, ul#curProjects li span.more a:visited, ul li.btmProjects a:visited, ul.projectNav li a:visited{color:#67A7B6;} ul#curProjects li a:focus, ul li.btmProjects a:focus, ul.projectNav li a:focus{color:#0055CC;} ul li.btmProjects {background:#E4F6FC; border-width:1px 0px; border-style:solid; border-color: #FFF; margin-bottom:5px; padding:5px 10px; list-style-type:none !important; } ul li.btmProjects a {display:block; font-weight:bold;} ul li.btmProjects:hover{background:#E4F6F5;} ul#curProjects li.lastProject {display:block; border-bottom:none;} .projectsBlock {display:block;} .block { padding-bottom: 30px;} div.sidebarPics {display:block; margin:0px; text-align:left;} div.sidebarPics img {display:inline; margin-bottom:20px; border: 10px solid #67A7B6;} #video {margin-bottom:40px; border:10px solid #67A7B6;} /* NIP STYLES */ .nipBlock { font-weight:bold; border-bottom: 1px solid #67A7B6; padding:20px 0px 20px 0px; } .nipBlock .nipImage { margin-right:20px; } .nipImage img { border: 5px solid #CBECF6;} .nipBlock .nipContent {width:500px;} .nipBlock .nipPoints .left{margin-left:40px;} .nipBlock .nipContent .right {width: 120px; text-align:right;} .nipBlock .right span {float:left;} .nipBlock .nipContent .left{width: 300px;} .nipBlock .nipContent .aEnvelope, .nipBlock .nipContent .bEnvelope {color:#197189;} .nipBlock ul, .nipBlock ul ul {display:block; clear:both;} .nipBlock ul li {display:block;} .nipBlock ul li ul li { display:inline;} #cookIslandsNIP {padding:0px 0px 0px;} #vanuatuNIP {border:none;} a#forum {background:#22C1E8; display:block; border: 1px solid; text-align:center;} a#forum span {padding:1px; padding:5px; border:1px solid #fff; display:block;} a#forum:hover {background:#fff;} /*------------------------------------------- DROP DOWN STYLES -------------------------------------------*/ /* General */ #cssdropdown {z-index:100; display:block; } #cssdropdown, #cssdropdown ul { list-style: none; } #cssdropdown, #cssdropdown * { padding: 0; margin: 0; } #cssdropdown ul{height:32px;} #cssdropdown ul li, #cssdropdown ul li ul li {height:32px;} #ie6 #cssdropdown ul li ul li {height:32px; margin-bottom:-3px;} /* Head links */ #cssdropdown li.headlink {width: 100%; float: left; } #cssdropdown li.headlink a { display: block; padding: 5px; background: transparent url(../images/dropdown-arrow.gif) no-repeat 7px center;} /* Child lists and links */ #cssdropdown li.headlink ul { display: none; text-align: left; } #cssdropdown li.headlink:hover ul { display: block; } #cssdropdown li.headlink ul li a { background: #CBECF6 ; } #cssdropdown li.headlink a:hover, #cssdropdown li.headlink ul li a:hover {background:#FF196B url(../images/dropdown-arrow-hover.gif) no-repeat 9px center; color:#fff !important; } /* Pretty styling */ #cssdropdown a {display:block; padding-left:10px; } #cssdropdown ul li a:hover { text-decoration: none; } #cssdropdown ul li a:visited {color:#67A7B6;} #cssdropdown li.headlink a { background-color: /*#22C1E8;*/#CBECF6; padding:5px 0px 5px 20px; color:#0066CC; } /*----------------------------------------- FOOTER STYLES -------------------------------------------*/ #footerPan #footerTop {height: 253px; display:block; background: transparent url(../images/flagsPanelBG.png) no-repeat scroll top center; overflow:hidden; padding-top:50px;} #footerTop .flagName {float:left; width: 140px;} #footerTop .flagName img {border: 6px solid #CBECF6; } #footerTop .flagContent {float:left; width:280px; height:190px; margin: 25px 0px 0 0px; padding-left:20px;} #footerTop .flagContent ul {list-style-type:none;} #footerTop .flagContent li a{color:#22C1E8; background:transparent url(../images/arrow.gif) no-repeat 0px center; padding-left:10px; } #footerTop .flagContent li a:hover{color:#E4F6FC; background:transparent url(../images/arrow-hover.gif) no-repeat 0px center;} .flagLinks {position:absolute; bottom:0px;} /*COPYRIGHT*/ #footerPan #footerBottom {height: 100px; display:block; padding-top:10px; color:#197189;} #footerPan #footerBottom a{color:#197189;} #footerPan #footerBottom a:hover {color:#CBECF6;} #footerPan #footerBottom a#top {float:right; width:28px; height:28px; position:absolute; right:0; top:-44px; overflow:hidden; background:transparent url(../images/toTop.png) no-repeat top center; text-indent:-3000px;} #footerPan #footerBottom a:hover#top {background:transparent url(../images/toTop.png) no-repeat bottom center;} #stats img{padding-top:7px;}