/* GLOBAL */

body, td, select {font: normal 12px arial, helvetica, sans-serif; color: #666; margin: 0; padding: 0;}
body {
      background-color: #E8E7E7;
	  SCROLLBAR-FACE-COLOR: #e4e4e4; 
	  SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; 
	  SCROLLBAR-SHADOW-COLOR: #808080; 
	  SCROLLBAR-3DLIGHT-COLOR: #e4e4e4; 
	  SCROLLBAR-ARROW-COLOR: #2f6681; 
	  SCROLLBAR-TRACK-COLOR: #e4e4e4; 
	  SCROLLBAR-DARKSHADOW-COLOR: #404040;}
div{line-height:16px}
#left div{line-height:18px}
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 {margin-left: 1px;}
.textbox {border: solid 1px #999; width: 168px; height: 18px; font: normal 12px arial; 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;} 
.pad-1{padding-bottom:15px}
.pad-2{padding-top:5px}




/* LEFT SIDE */

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

#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;}

#larrow {text-align:left;margin: 0px 2px 0 0;}
#larrow a {background: url(../images/icon_arrow_blue.gif) no-repeat right top; padding: 0 10px 0 0;text-align:left;}
#larrow a:hover {background-image: url(../images/icon_arrow_green.gif);text-align:left;}

#arrow {text-align:right; margin: 0px 2px 0 0;}
#arrow a {background: url(../images/icon_arrow_blue.gif) no-repeat right top; padding: 0 10px 0 0;text-align:right;}
#arrow a:hover {background-image: url(../images/icon_arrow_green.gif);text-align:right;}
#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 {}
#left .module #link a:hover {background-image: url(../images/icon_arrow_green.gif);}
#left .mov{float:right;font-size:12px}
#mov a {background: url(../images/icon_film_blue1.gif) no-repeat right bottom; padding:0 10px 0 0;white-space: nowrap; display: inline-block;}
#mov a:hover {background: url(../images/icon_film_green1.gif) no-repeat right bottom; padding:0 10px 0 0;white-space: nowrap; display:} 


/* CENTER MODULE */

#center-frame {float: left; width: 450px; margin-bottom: 12px;overflow:hidden}
#center {width: 450px; background: url(../images/mod_top_c.gif) no-repeat; padding: 10px 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: 580px; background: url(../images/mod_mid_c.gif) repeat-y; padding: 0 14px 0 6px;}
*html #center #mod-center {height: 580px;}
#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 15px 0 10px; line-height: 16px}
#center #story #scroll{height: 337px; overflow: auto; padding-right: 5px;}
*html #center #story #scroll {width: 400px;height:240px}
#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 15px 0 10px; line-height: 16px;}
#center #prod #scroll {width: 380px; height: 267px; 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;}
#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; 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 #mai {height:355px; background: url(../images/mod_mid_c.gif) repeat-y; padding: 0 14px 0 6px;}

#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: 16px;}


/* 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:200px; }
	#modules-play {position:relative; top: 400px;}
	#modules-learn {position:relative; top: 0px;}
	#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-learn-01,#mod-learn-02,#mod-learn-03,#mod-learn-04{left:12px}
	#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 {background: url(../images/hdr_dots.gif) repeat-x; height:10px;}
.mod-container {position:absolute; top:0px; left:0px; visibility:visible; z-index: 300;}
.module {min-height: 180px; background: url(../images/mod_mid_r.gif) repeat-y; padding: 0 14px 0 8px;}
*html .module {height: 180px;}
#modules-learn .module{height:208px}
.module p{line-height:18px}
.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;width: 179px;font-size:12px;}
.module #link a {padding: 0 2px 0 0;}
.fademodule {background: #fff; position:absolute; top: 10px; left: 8px; visibility:hidden; z-index: 500; opacity:0; filter:alpha(opacity=0);}

div #topnav{background:url(http://www.cisco.com/web/CN/human/images/topnav_BG.gif) no-repeat}
.dothr{background: url(../images/dots_horiz.gif) repeat-x top;line-height:1px; height:1px}
.gray{color:#666}
.next{float:right}
.next,.prev{font-size:12px}
.next a {background: url(../images/icon_arrow_blue.gif) no-repeat right top; padding: 0 10px 0 0;}
.next a:hover {background-image: url(../images/icon_arrow_green.gif);}
.prev a {background: url(../images/icon_arrow_blue_l.gif) no-repeat left top; padding: 0 0 0 10px;}
.prev a:hover {background-image: url(../images/icon_arrow_green_l.gif);}



//.desc a {background: url(../images/icon_film_blue.gif) no-repeat right bottom; padding:0 17px 0 0; font-weight: bold; white-space: nowrap; display: inline-block;}
//.desc a:hover {background: url(../images/icon_film_green.gif) no-repeat right bottom; padding:0 17px 0 0; font-weight: bold; white-space: nowrap; display: inline-block;}


.module div.sbr,*.sbr{line-height:6px;}
.sml{font-size:9px;font-weight:normal}
#player{position:absolute;top:15px;left:60px;padding:0;display:none;width:320px;height:180px}
#video{position:absolute;top:25px;left:60px;padding:0;display:inline;width:320px;height:180px}
*.desc{color:#2f6681;margin:10px 0 0 100px;cursor:pointer}
*.desc2{color:#2f6681;margin:0 0 0 100px;cursor:pointer}
*.vt td{padding:6px 0 6px 0}
*.vt td img{cursor:pointer} 
#img{text-align:center}
.active{background:url(../images/video_active.gif) no-repeat left center}
.activelong{background:url(../images/video_activelong.gif) no-repeat left center}
.sc_cnt_out{width:375px;height:245px;overflow:auto!important;overflow:hidden;position:absolute}
.sc_cnt_in{width:auto;height:245px;position:absolute;}
//.scroller{}
.scroller{display:none!important;display:inline;background:url(../images/scroller_lack.gif);}