/* homepage */

div#masthead h1 { width: 493px; height: 90px; margin: 10px 0 32px 0; text-indent: -9999px; float: right; }
div#masthead h1 a { width: 100%; height: 100%; display: block; background: transparent url(../images/hp/crasac_title.gif) no-repeat; text-decoration: none; }
div#masthead h2 { width:77px; height: 88px; margin: 9px 0 0 0; float: left; text-indent: -9999px; }
div#masthead h2 a { width: 100%; height: 100%; display: block; background: transparent url(../images/vision_logo.gif) no-repeat; text-decoration: none; }

div#hppanel { width: 768px; background: transparent url(../images/hp/background_gradient.gif) repeat-y; }
div#hpcontent { width: 768px; background: transparent url(../images/hp/background_faded.jpg) no-repeat; clear: both; text-align: left; }
div#leftcol { width: 240px; float: left; }
div#rightcol { width: 518px; float: right; font: 13px Arial, sans-serif; line-height: 13px; font-weight: bold; }
div#hpcontent h3 { width: 151px; height: 44px; margin: 0 0 8px 16px; padding-top: 20px; text-indent: -9999px; }
div#hpcontent h3 a { width: 100%; height: 100%; display: block; background: transparent url(../images/hp/introduction.gif) no-repeat; text-decoration: none; }

div#leftcol a { color: #FFFFFF; text-decoration: none; }
div#leftcol a:hover { text-decoration: underline; }

div#hpcontent h3#confidentiality { width: 132px; height: 22px; margin: 0 0 8px 16px; padding-top: 20px; text-indent: -9999px; }
div#hpcontent h3#confidentiality a { width: 100%; height: 100%; display: block; background: transparent url(../images/title/confidentiality.gif) no-repeat; }

div#hpcontent h3#moreaboutcrasac { width: 196px; height: 67px; margin: 0 0 8px 16px; padding-top: 20px; text-indent: -9999px; }
div#hpcontent h3#moreaboutcrasac a { width: 100%; height: 100%; display: block; background: transparent url(../images/title/more_about_crasac.gif) no-repeat; }

div#hpcontent h3#vision { width: 139px; height: 46px; margin: 0 0 8px 16px; padding-top: 20px; text-indent: -9999px; }
div#hpcontent h3#vision a { width: 100%; height: 100%; display: block; background: transparent url(../images/title/vision_schools_project.gif) no-repeat; text-decoration: none; }

ul#hpnav { list-style: none; margin: 18px 0 0 0; padding: 0; }
ul#hpnav li { width: 112px; height: 112px; float: left; margin: 12px 12px 0 0; padding: 0; overflow: hidden; }
ul#hpnav li a { display: block; padding: 49px 7px 0 7px; text-decoration: none; height: 63px; }

html>body #hpcontent li a { width: auto; }

ul#hpnav li#a a, ul#hpnav li#c a, ul#hpnav li#e a, ul#hpnav li#g a { color: #330153; }
ul#hpnav li#b a, ul#hpnav li#d a, ul#hpnav li#f a, ul#hpnav li#h a { color: #FFFFFF; }
ul#hpnav li#b a:hover, ul#hpnav li#d a:hover, ul#hpnav li#f a:hover, ul#hpnav li#h a:hover { color: #330153; }

li#a { background: transparent url(../images/hp/link_a.gif) no-repeat; }
li#a a:hover { background: #FFFFFF url(../images/hp/link_hover.gif) no-repeat; }
li#b { background: transparent url(../images/hp/link_b.gif) no-repeat; }
li#b a:hover { background: #FFFFFF url(../images/hp/link_hover.gif) no-repeat; }
li#c { background: transparent url(../images/hp/link_c.gif) no-repeat; }
li#c a:hover { background: #FFFFFF url(../images/hp/link_hover.gif) no-repeat; }
li#d { background: transparent url(../images/hp/link_d.gif) no-repeat; }
li#d a:hover { background: #FFFFFF url(../images/hp/link_hover.gif) no-repeat; }
li#e { background: transparent url(../images/hp/link_e.gif) no-repeat; }
li#e a:hover { background: #FFFFFF url(../images/hp/link_hover.gif) no-repeat; }
li#f { background: transparent url(../images/hp/link_f.gif) no-repeat; }
li#f a:hover { background: #FFFFFF url(../images/hp/link_hover.gif) no-repeat; }
li#g { background: transparent url(../images/hp/link_g.gif) no-repeat; }
li#g a:hover { background: #FFFFFF url(../images/hp/link_hover.gif) no-repeat; }
li#h { background: transparent url(../images/hp/link_h.gif) no-repeat; }
li#h a:hover { background: #FFFFFF url(../images/hp/link_hover.gif) no-repeat; }

div#hpcontent p { font: 11px Arial, sans-serif; line-height: 14px; color: #FFFFFF; margin: 0 0 6px 16px; }

div#fundedby { width: 768px; text-align: right; }
div#fundedby p { font: 10px Arial, sans-serif; color: #666666; margin: 2px 0; }
div#fundedby p a { color: #666666; text-decoration: none; }