/* GLOBAL */

body, td, select {font: normal 11px/13px arial, helvetica, sans-serif; color: #999; margin: 0; padding: 0;}
body {background-color: #E8E7E7;}
a {color: #2F6681; outline: none; text-decoration: none;}
a:hover {color: #948746;}
a img {border: none;}
h1, h2, h3, h4, h5, h6, p, ul, li, form, img, input {margin: 0; padding: 0;}
p {padding-bottom: 10px; margin-left: 1px;}
.textbox {border: solid 1px #999; width: 168px; height: 18px; font: normal 11px/16px arial, helvetica, sans-serif; color: #999; padding-left: 3px;}
select {color: #2F6681;}

#container {width: 898px; text-align: left; margin-left: 10px;}
*html #container {width: 901px;}

h2 {background: #FFF url(../images/mod_hdr_dots.gif) repeat-x; padding: 0 0 3px 0;}
h3 {font-weight: bold; font-size: 12px; color: #2F6681; padding: 0 0 6px 0;}
h5 {font-weight: normal; font-size: 11px; color: #2F6681; padding: 0 0 2px 0;} 




/* LEFT SIDE */

#left {float: left; width: 245px; margin-bottom: 15px;}
#left #mod-left {min-height: 392px; background: url(../images/mod_mid_l.gif) repeat-y; padding: 0 18px 0 11px;}
*html #left #mod-left {height: 392px;}

#left #mod-left #stories a img {margin: 0 2px 2px 0; border: solid 1px #999; width: 32px; height: 32px;}
#left #mod-left #stories a:hover img {border: solid 1px #000;}
*html #left #mod-left #stories a:hover {border-color: #000;}
#left #mod-left #viewall {background: url(../images/dots_horiz.gif) repeat-x bottom; padding: 0 0 15px 0; margin: 4px 0 15px 0;}
#left #mod-left #viewall #link a {padding: 0 10px 0 0; background: url(../images/icon_arrow_blue.gif) no-repeat right top;}
#left #mod-left #viewall #link a:hover {background-image: url(../images/icon_arrow_green.gif);}
#left #mod-left #fieldname {padding: 0 0 5px 0; line-height: 19px;}
#left #mod-left #field {text-align: right; padding: 0 0 5px 0;}
#left #mod-left #continue {text-align: right; margin: 6px 2px 0 0; font-weight: bold;}
#left #mod-left #continue a {background: url(../images/icon_arrow_blue.gif) no-repeat right top; padding: 0 10px 0 0;}
#left #mod-left #continue a:hover {background-image: url(../images/icon_arrow_green.gif);}
#left .module {background: url(../images/mod_mid_l.gif) repeat-y; padding: 0 18px 0 11px;}
#left .module #link {width: 214px;}
#left .module #link a {padding: 0 10px 0 0; background: url(../images/icon_arrow_blue.gif) no-repeat right top;}
#left .module #link a:hover {background-image: url(../images/icon_arrow_green.gif);}


/* CENTER MODULE */

#center-frame {float: left; width: 450px; margin-bottom: 15px;}
#center {width: 450px; background: url(../images/mod_top_c.gif) no-repeat; padding: 5px 0 0 0; color: #666;}
#center #close {position: absolute; margin: 8px 0 0 378px; background: url(../images/icon_closebox.gif) no-repeat right bottom;} *html #center #close {background-position: right center;}
#center #close a {padding: 0 15px 0 0; color: #666;}
#center #close.white {background-image: url(../images/icon_closebox_white.gif);}
#center #close.white a {color: #FFF;}
#center #close.blue {background-image: url(../images/icon_closebox_blue.gif);}
#center #close.blue a {color: #2F6681;}
#center #mod-center {min-height: 535px; background: url(../images/mod_mid_c.gif) repeat-y; padding: 0 14px 0 6px;}
*html #center #mod-center {height: 535px;}
#center #mod-center #intro {height: 330px; overflow: auto; padding: 0 22px 12px 22px; font-size: 16px; line-height: 19px; color: #707070;}
#center #mod-center p.dark {color: #4C4C4C;}
#center #main {padding-bottom: 20px;}
#center #story {padding: 0 22px 0 22px; line-height: 16px;}
#center #story #scroll {width: 380px; height: 337px; overflow: auto; padding-right: 20px;}
*html #center #story #scroll {width: 400px;}
#center #story h1 {padding: 0 0 8px 0;}
#center #story #links {padding: 0 22px 10px 0;}
#center #story #links a {font-weight: bold; color: #2F6681; background: url(../images/icon_arrow_blue.gif) no-repeat right top; padding: 0 12px 0 0; line-height: 22px;}
#center #story #links a:hover {color: #948746; background-image: url(../images/icon_arrow_green.gif);}
#center #story #links a.normal {font-weight: normal;}
#center #share {background: #ADC3CD url(../images/share_mid.gif) repeat-x; min-height: 527px; padding: 0 0 0 22px;}
*html #center #share {height: 527px;}
#center #share h3 {font-weight: bold; font-size: 14px; line-height: 17px; color: #2F6681; padding: 30px 20px 20px 0;}
#center #share p {line-height: 16px;}
#center #share #fieldname {padding: 0 15px 5px 0; line-height: 19px; color: #333;}
#center #share #field {padding: 0 0 5px 0; color: #333;}
#center #share #toptable {margin-bottom: 15px; width: 355px;}
#center #share #toptable .textbox {color: #333; width: 320px;}
#center #share #question {padding: 0 5px 5px 0; color: #333; text-indent: -12px; margin-left: 13px;}
#center #share #answer .textbox {color: #333; width: 385px; margin-bottom: 13px;}
#center #share #submit {text-align: right; margin: 6px 30px 15px 0; font-weight: bold; font-size: 14px;}
#center #share #submit a {padding: 0 11px 0 0; background: url(../images/icon_arrow_blue.gif) no-repeat right 1px;}
#center #share #submit a:hover {background-image: url(../images/icon_arrow_white.gif); color: #FFF;}
#center #share #scroll {width: 400px; height: 410px; overflow: auto;}
#center #share #scroll #field .textbox {width: 310px;}
#center #share #scroll .textbox {width: 365px;}
#center #prod {padding: 0 22px 0 22px; line-height: 16px;}
#center #prod #scroll {width: 380px; height: 280px; overflow: auto; padding-right: 20px;}
*html #center #prod #scroll {width: 400px;}
#center #prod #select select {width: 330px; margin-bottom: 15px;}
#center #prod h5 {font-weight: bold; color: #666;}
#center #prod #links {background: url(../images/dots_horiz.gif) repeat-x bottom; padding: 0 0 15px 0; margin: 0 0 13px 0; line-height: 22px;}
#center #prod #links span {margin: 0 2px 0 0; font-weight: bold;}
#center #prod #links span a {background: url(../images/icon_arrow_blue.gif) no-repeat right top; padding: 0 12px 0 0;}
#center #prod #links span a:hover {background-image: url(../images/icon_arrow_green.gif);}
#center #prod #storylink a {background: url(../images/icon_arrow_blue.gif) no-repeat right 2px; padding: 0 12px 0 0; font-weight: bold; white-space: nowrap; display: inline-block;}
#center #prod #storylink a:hover {background-image: url(../images/icon_arrow_green.gif);}
#center #policy {background: #FFF; min-height: 527px; padding: 0 0px 0 22px;}
#center #policy h3 {font-weight: bold; font-size: 14px; line-height: 17px; color: #2F6681; padding: 30px 0 15px 0;}

#center #policy #scroll {width: 377px; height: 457px; overflow: auto; padding-right: 20px;}
*html #center #policy #scroll {width: 397px;}
#center #policy #submit {text-align: right; margin: 0 5px 0 0; font-weight: bold; font-size: 14px;}
#center #policy #submit a {padding: 0 11px 0 0; background: url(../images/icon_arrow_blue.gif) no-repeat right 1px;}
#center #policy #submit a:hover {background-image: url(../images/icon_arrow_green.gif);}

#center #archive {padding: 0 22px 0 22px; line-height: 16px;}
#center #archive #scroll {clear: both; width: 380px; height: 288px; overflow: auto; padding-right: 20px;}
*html #center #archive #scroll {width: 400px;}
#center #archive h1 {padding: 0 0 8px 0;}
		#archive a.story {clear: both; width: 364px; display: block; background: #FFF; height: 34px; cursor: pointer; margin-bottom: 2px;}
		#archive a.story:hover {background-color: #F8F8F8;}
		#archive .story img {float: left; border: solid 1px #999; width: 32px; height: 32px; padding: 0; margin: 0;}
		*html #archive .story img {margin-left: -3px;}
		#archive .story .text {width: 240px; float: left;}
		*html #archive .story .text {width: 237px; float: left;}
		#archive .story .text h4 {padding: 3px 20px 0 13px; font-size: 11px; font-weight: normal; line-height: 13px; color: #2F6681; margin-left: 1px;}
		#archive .story .name {width: 70px; float: left;}
		#archive .story .name h5 {padding: 3px 3px 0 0; font-size: 11px; font-weight: normal; line-height: 13px; color: #999; margin-left: 1px;}
		#archive #popular {float: left; padding-top: 3px;}
		#archive #popular #link a {padding: 0 10px 0 0; background: url(../images/icon_arrow_blue.gif) no-repeat right top;}
		#archive #popular #link a:hover {background-image: url(../images/icon_arrow_green.gif);}


/* RIGHT SIDE */

#right {float: left; width: 203px; margin-bottom: 15px;}
#right .module #middle img {margin: 0 0 2px 0;}
#right .module #middle p {padding: 0 0 0 4px; line-height: 12px;}


/* FOOTER */

#footer {clear: both; color: #333; margin-bottom: 12px; padding-left: 2px;}
#footer #topline {margin-bottom: 3px;}
#footer span {margin: 0 3px 0 3px; color: #4C4C4C;}
#footer span#copyright {margin: 0;}


	#modules-work {position:relative;}
	#modules-live {position:relative; top:138px; }
	#modules-play {position:relative; top: 276px;}
	#modules-learn {position:relative; top:414px;}
	#mod-work-01 {filter:alpha(opacity=100); opacity:1; visibility:visible; z-index: 501;}
	#mod-learn-01 {filter:alpha(opacity=100); opacity:1; visibility:visible; z-index: 501;}
	#mod-live-01 {filter:alpha(opacity=100); opacity:1; visibility:visible; z-index: 501;}
	#mod-play-01 {filter:alpha(opacity=100); opacity:1; visibility:visible; z-index: 501;}

	/* GLOBAL MODULE */
#modtop {height:10px;}
.mod-container {position:absolute; top:0px; left:0px; visibility:visible; z-index: 300;}
.module {min-height: 116px; background: url(../images/mod_mid_r.gif) repeat-y; padding: 0 14px 0 8px;}
*html .module {height: 116px;}
.module #middle {min-height: 82px; width: 181px;}
*html .module #middle {height: 82px;}
#left .module #middle {width: 216px;}
.module #link {text-align: right; margin: 0 2px 0 0; font-weight: bold; width: 179px;}
.module #link a {padding: 0 2px 0 0;}
.fademodule {background: #fff; position:absolute; top: 28px; left: 8px; visibility:hidden; cursor: pointer; z-index: 500; opacity:0; filter:alpha(opacity=0);}