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 : 960 px ;
height : 140px ;
margin-left : auto ;
margin-right : auto ;
position : relative ; }
# logo
{ position : absolute ;
top : 21px ;
left : 4px ; }
# search
{ width : 114 px ;
position : absolute ;
right : 0px ;
top : 11px ;
border : 1px solid # f8f8f8 ;
2011-07-15 16:45:21 +00:00
background : url ( / static / images / noel / search-icon . png ) no-repeat right ;
2011-06-25 11:23:32 +00:00
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 : 200 px ;
line-height : 24px ;
margin : 0 ;
position : absolute ;
left : -999em ;
height : auto ; }
# navMenu li li
{ width : 200 px ;
border-bottom : 1px solid # e0e0e0 ;
text-align : justify ; }
# navMenu li li a
{ padding : 4 px 10 px ;
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 : -999 em ; }
# 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 : 960 px ;
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 : 960 px ;
height : 680px ;
margin-right : auto ;
margin-left : auto ;
position : relative ; }
# image
{ position : relative ;
float : left ; }
img # bannerImage
{ -moz- border-radius : 8 px ;
-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 : 300 px ;
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 : 356 px ;
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 : 12 px ;
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 : 230 px ;
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 : 16 px ;
float : left ; }
# slider
{ width : 960 px ;
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 : 4000 px ; }
ul # sliderTabs li
{ float : left ; }
. tabHeader
{ font-size : 24 px ;
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 : 90 px ;
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 : 90 px ;
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 : 960 px ;
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 ;
2011-07-15 16:45:21 +00:00
clear : both ; }