it/itf/static/css/noel/main.css

382 lines
9.5 KiB
CSS
Raw Normal View History

2011-06-25 11:23:32 +00:00
html, body
{height:100%;
width:100%;} /*font-squirrel font to be added*/
body
{font-family:'Century Gothic', Helvetica, Arial, 'DejaVu Sans', sans-serif;}/*helvetica put as second font*/
#header
{width:960px;
height:140px;
margin-left:auto;
margin-right:auto;
position:relative;}
#logo
{position:absolute;
top:21px;
left:4px;}
#search
{width:114px;
position:absolute;
right:0px;
top:11px;
border:1px solid #f8f8f8;
background:url(img/search-icon.png) no-repeat right;
padding:2px;
font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif;
font-size:12px;
color:#7d7d7d;-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:inset 2px 2px 6px #d7d7d7;
-webkit-box-shadow:inset 2px 2px 6px #d7d7d7;
box-shadow:inset 2px 2px 6px #d7d7d7;} /*webkit browsers giving a border on active need to remove. placeholder input text supported by html5 for FF3.7 and webkit, add a shiv? also, search box is sooper light in IE*/
#homeIcon
{display:block;
position:absolute;
left:391px;
top:69px;
cursor:pointer;}
#navMenu
{background-color:#FFF;
font-size:17px;
position:absolute;
top:64px;
right:0px;
z-index:30;
cursor:pointer;}
#navMenu, #navMenu ul
{list-style:none;
line-height:30px;
padding:0;
margin:0;
float:left;}
#navMenu a
{display:block;
color:#737373;
text-decoration:none;
padding:0px 15px;}
#navMenu li
{padding:0;
float:left;}
#navMenu ul
{width:200px;
line-height:24px;
margin:0;
position:absolute;
left:-999em;
height:auto;}
#navMenu li li
{width:200px;
border-bottom:1px solid #e0e0e0;
text-align:justify;}
#navMenu li li a
{padding:4px 10px;
color:#737373;} /*menu may break in IE, add JS hack and one for navigation by keyboard*/
#navMenu li li:hover
{background-color:#e77400;
background:-moz-linear-gradient(top, #e77400 0%, #feb200);
background:-webkit-gradient(linear, left top, left bottom, from(#e77400), to(#feb200));} /*w/o prefix not mentioned here for a reason?*/
#navMenu li ul li:hover a, #navMenu li ul li li:hover a, #navMenu li ul li li li:hover a, #navMenu li ul li li li:hover a
{color:#ebe9e9;}
#navMenu li:hover a, #navMenu li.sfhover a
{color:#ebe9e9;}
#navMenu li:hover li a, #navMenu li li:hover li a, #navMenu li li li:hover li a, #navMenu li li li li:hover li a
{color:#737373;}
#navMenu li:hover ul ul, #navMenu li:hover ul ul ul, #navMenu li:hover ul ul ul ul, #navMenu li.sfhover ul ul, #navMenu li.sfhover ul ul ul, #navMenu li.sfhover ul ul ul ul
{left:-999em;}
#navMenu li:hover ul, #navMenu li li:hover ul, #navMenu li li li:hover ul, #navMenu li li li li:hover ul, #navMenu li.sfhover ul, #navMenu li li.sfhover ul, #navMenu li li li.sfhover ul, #navMenu li li li li.sfhover ul
{left:auto;
background-color:#FFF;}
#navMenu li:hover, #navMenu li.sfhover
{background-color:#e77400;
background:-moz-linear-gradient(top, #e77400 0%, #feb200);
background:-webkit-gradient(linear, left top, left bottom, from(#e77400), to(#feb200));
} /*w/o prefix not mentioned here for a reason???*/
#loginMenu
{list-style:none;
background-color:#FFF;
font-size:13px; /*font list ok?, will break if user increases font size?*/
color:#ff8400;
font-weight:normal;
position:absolute;
bottom:5px;
right:0px;
cursor:pointer;
z-index:2;
clear:both;}
#loginMenu li
{display:inline;
background-color:#FFF;
padding:2px 4px 2px 4px;
border:1px solid #e7e7e7;
-moz-border-radius-topright:8px;
-webkit-border-top-right-radius:8px;
border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-webkit-border-top-left-radius:8px;
border-top-left-radius:8px;
-moz-box-shadow:0px -1px 3px #d4d4d4;
-webkit-box-shadow:0px -1px 3px #d4d4d4;
box-shadow:0px -1px 3px #d4d4d4;}/*not converted to links*/
#loginMenu li:hover
{font-weight:bold;
-moz-box-shadow:-4px -2px 8px #d4d4d4;
-webkit-box-shadow:-4px -2px 8px #d4d4d4;
box-shadow:-4px -2px 8px #d4d4d4;}
#center
{width:100%;
height:680px;
background:url(img/wood.jpg) repeat;} /*looks different from the PSD*/
#shadow
{width:960px;
height:8px;
-moz-box-shadow:10px -20px 40px #cccaca;
-webkit-box-shadow:10px -20px 40px #cccaca;
box-shadow:10px -20px 40px #cccaca;}/*shadow looks darker in safari and of course, doesn't show in IE*/
.centerContent
{width:960px;
height:680px;
margin-right:auto;
margin-left:auto;
position:relative;}
#image
{position:relative;
float:left;}
img#bannerImage
{-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
margin-top:16px;
margin-left:9px;
-moz-box-shadow:2px 3px 20px #252425;
-webkit-box-shadow:2px 3px 20px #252425;
box-shadow: 2px 3px 20px #252425;}/*FF showing top image borders, because of FF 3.6 bug*/
#textTop
{width:300px;
font-size:30px; /*character limit? also break in text to be considered*/
color:#FFF;
line-height:40px;
text-align:left;
position:absolute;
top:116px;
padding-left:30px;
z-index:3;} /*z-index required?*/
#textBottom
{width:356px;
font-size:16px; /*character limit to be specified in js*/
line-height:1.4;
color:#000;
padding:4px 18px;
background-color:rgb(234, 234, 234); /*fallback for old browsers*/
background-color:rgba(234, 234, 234, 0.7);
position:absolute;
bottom:20px;
margin-left:9px;
z-index:4;} /*z-index required?*/
#buttonBanner
{position:absolute;
left:438px;
bottom:24px;}
.buttons
{width:12px;
height:12px;
background-color:transparent !important; /*is this right?*/
opacity:0.6;
z-index:4;
margin-top:8px;
border:2px inset #FFF;
cursor:pointer;}
.buttons:hover
{opacity:0.9;}
.buttonsSelected
{background-color:#e3e2e0;
opacity:0.6;}
.tab
{width:230px;
height:282px;
background-color:#FFF;
position:relative;
-moz-border-radius:8px;
border-radius:8px; /*ok if i don't use webkit prefix? because it works without it on safari/chrome.*/
margin-left:9px;
-moz-box-shadow:2px 3px 20px #252425;
-webkit-box-shadow:2px 3px 20px #252425;
box-shadow:2px 3px 20px #252425;}
#news, #events
{margin-top:16px;
float:left;}
#slider
{width:960px;
height:296px;
clear:both;
margin-left:auto;
margin-right:auto;
padding-top:37px;
overflow:hidden;
clear:both;}
#sliderTabs /*at 800 res, we have different probs in different browsers with the tabs, ok to give position absolute to the ul?*/
{width:4000px;}
ul#sliderTabs li
{float:left;}
.tabHeader
{font-size:24px;
color:#ffb400;
text-align:center;
margin-top:10px;
position:relative;
z-index:1;}
.tabHeader span
{font-weight:bold;}
.textTab
{font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif;
font-size:12px;
color:#000;
text-align:justify;
padding-left:20px;
padding-right:20px;
position:absolute;
top:178px;}
a.buttonTab
{width:90px;
font-size:14px; /*if someone increases their font size, then what?*/
color:#FFF;
text-align:center;
text-decoration:none;
padding:2px 3px 5px 3px;
background-color:#feb200; /*fallback for old browsers*/
background:-moz-linear-gradient(top, #e77400 0%, #feb200);
background:-webkit-gradient(linear, left top, left bottom, from(#e77400), to(#feb200)); /*w/o prefix not mentioned here for a reason???*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:1px 2px 2px rgba(000,000,000,0.7), inset 0px 0px 1px rgba(255,255,255,0.7);
-webkit-box-shadow:1px 2px 2px rgba(000,000,000,0.7), inset 0px 0px 1px rgba(255,255,255,0.7);
box-shadow:1px 2px 2px rgba(000,000,000,0.7), inset 0px 0px 1px rgba(255,255,255,0.7);
text-shadow:0px 0px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3);
position:absolute;
bottom:20px;
right:20px;
cursor:pointer;
z-index:3;}/*looks poor in IE*/
a.buttonTab:link, a.buttonTab:visited
{text-decoration:none;
color:#FFF;}
a.buttonTab:hover
{width:90px;
font-size:14px;
color:#FFF;
text-decoration:none;
padding:2px 3px 5px 3px;
text-align:center;
background-color:#e77400; /*fallback for old browsers*/
background:-moz-linear-gradient(top, #feb200 0%, #e77400);
background:-webkit-gradient(linear, left top, left bottom, from(#feb200), to(#e77400));
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0px 3px 10px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
-webkit-box-shadow:0px 3px 10px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
box-shadow:0px 3px 10px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.7);
text-shadow:0px 0px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3);
position:absolute;
bottom:20px;
right:20px;
cursor:pointer;}/*needs to made into a link, looks poor IE*/
a.buttonTab:active
{text-decoration:none;
color:#FFF;}
#scriptArchive
{background-image:url(img/script-tab.jpg);}
#itfProjects
{background-image:url(img/itf-tab.png);}
#eRang
{background-image:url(img/erang-tab.jpg) no-repeat;}
#bestPractice
{background-image:url(img/best-tab.jpg) no-repeat;}
#footer
{width:960px;
margin-left:auto;
margin-right:auto;
padding-bottom:8px;}
.footerList
{list-style:none;
font-family:Arial, 'Century Gothic', 'DejaVu Sans', sans-serif; /*should test the arial font to see how it looks*/
font-size:13px;
color:#7b7b7b;
line-height:16px;
padding:14px 24px 46px 24px;
float:left;}
.footerList li
{display:block;}
.footerList a:link, .footerList a:visited
{text-decoration:none;
color:#7b7b7b;}
.footerList a:hover
{text-decoration:none;
color:#515050;}
.footerList a:active
{text-decoration:none;}
#copyright
{font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif;
font-size:12px;
color:#ffb400;
text-align:left;
padding-left:22px;
clear:both;}