/* CLIENT NAME */



/* BASIC ELEMENTS  

------------------------------------------------------------------------------------- */

* { margin: 0; padding: 0; }

html { min-height: 100%; margin-bottom: 1px; }



body { text-align: center; font-size: 11px; font-family: georgia, times, serif; color: #333; background: #373737 url(../images/bg.gif) repeat-x;  }

table, th, td { font-size: 11px; font-family: georgia, times, serif; color: #333; }

li {margin-left: 15px;}

option {margin:0 5px 0 3px}



a img, :link img, :visited img { border: none; }



a:link { color: #ac3600; text-decoration: none; font-weight: bold; }

a:visited { color: #d56a3a; text-decoration: none; font-weight: bold; }

a:hover, a:active { color: #e35616; text-decoration: underline; }



.skip { display: none; }

.moreajax	{ position: absolute; top: 7px; right: 0; z-index: 100;}



.container { position: relative; margin: 0 auto; padding: 30px 0; width: 975px; text-align: left; background: url(../images/bg_container.gif) no-repeat 50% 0; }

.header { position: relative; height: 96px; z-index: 50; }



/* NAVIGATION

------------------------------------------------------------------------------------- */

#nav { position: relative; float: left; width: 166px; height: 398px; margin: 14px 0 0;  background: #262626; color: #fff; }

#nav ul { margin: 0 0 24px;}

#nav li {margin: 0; position: relative; height: 35px; list-style: none; font-weight: bold; border-bottom: 1px solid #373737; font-size: 13px; }

#nav li a:link, #nav li a:visited, #nav li div { position: relative; display: block; height: 35px; line-height: 35px; padding: 0 10px; text-decoration: none; color: #ffead5; border-right: 2px solid #000; }

#nav li a:hover	{ background: #111 url(../images/bg_nav_hover.gif) repeat-y top right; color: #fff; border: 0;}

#nav li div { background: #696969 url(../images/bg_nav_on.gif) repeat-y top right; color: #fff; border: 0;}



#nav p	{ padding: 10px 0 0 20px; font-size: 11px;}

	#nav p a:link	{ color: #ffead5; font-weight: normal;}

	#nav p a:visited	{ font-weight: normal;}



/* HOME PAGE

------------------------------------------------------------------------------------- */



.main { position: relative; width: 648px; min-height: 516px; float: left; background: #fff url(../images/bg_main.jpg) no-repeat; font-family: verdana, arial, sans-serif; }

	* html .main	{/*\*/ height: 516px;/**/}

	.main p			{ padding: 0 0 15px; line-height: 18px;}



.h_col1	{ float: left; display: inline; width: 335px; margin: 20px 25px;}              	

	.h_col1 h1	{ font-size: 32px; color: #e35616; line-height: 32px; padding: 0 0 20px;}

	.h_col1 p	{ line-height: 20px;}



.intro			{ border-top: 1px solid #cdcdcd; border-bottom: 1px solid #fff; font-size: 12px; margin: 0 0 20px; font-family: georgia, times, serif;}

	.intro_inside	{ padding: 10px 0 15px; border-bottom: 1px solid #cdcdcd; border-top: 1px solid #fff;}

	.intro ul		{ width: 166px; float: left;}

	.intro li		{ list-style: none;}

	.intro li a:link, .intro li a:visited	{ display: block; height: 1%; padding: 8px 0 0px 15px; background: url(../images/icon_arrow.gif) no-repeat 0 10px; color: #ac3600;}

	.intro p		{ padding: 0;}



.h_col2	{ float: left; display: inline; width: 255px; margin: 7px 0 0; background: url(../images/bg_h_col2.gif) repeat-x;  }

	.h_book	{ position: relative; margin-top: -84px;}

.caption	{ background: url(../images/bg_caption.gif) no-repeat; width: 202px; padding: 10px; margin: 0 0 20px 18px; border-bottom: 5px solid #fff; font-family: georgia, times, serif; }

	* html .caption	{ width: 222px; w\idth: 202px;  }



blockquote	{ position: relative; height: 1%; margin-left: 0px; background: url(../images/icon_quote.gif) no-repeat; font-family: georgia, times, serif; color: #b83900; padding: 0 20px 0 25px; font-weight: bold; line-height: 20px;}

.quote { color: #ac3600; margin-left: 5px;}

blockquote p	{ color: #333; text-align: right; line-height: 120% !important; }

blockquote p span	{ color: #555;  }

	

.sidebar	{ float: left; display: inline; margin-left: 5px; margin-top: 15px; width: 155px; height:500px; background: url(../images/bg_sidebar.gif) 0 198px no-repeat;}

	.sidebar h3	{ color: #fff; text-transform: uppercase; margin: 0px; padding: 8px 10px; background: #bf4107; font-size: 12px; }

	.sidebar a {display:block;}

        .sidebar a:link	{ color: #ffead5; font-weight: normal; margin:0; padding:0;}

	.sidebar a:visited	{ font-weight: normal;}

.h_taketheclass	{ background: #282828;}

	.h_taketheclass li	{ list-style: none; }

	.h_taketheclass li a:link, .h_taketheclass li a:visited	{ display: block; padding: 6px 10px 6px 20px; background: url(../images/dot.gif) no-repeat 10px 10px; text-decoration: none; }

	.h_taketheclass li a:hover	{ background: #191919 url(../images/dot.gif) no-repeat 10px 10px; }

.h_educators	{ background: #282828 url(../images/bg_nav.gif) repeat-x bottom left; height: 200px;}

	.h_educators ul	{ list-style: none; }

	.h_educators li a:link, .h_educators li a:visited	{ display: block; padding: 6px 10px 6px 30px; text-decoration: none; }

	.h_educators li.icon_request a:link, .h_educators li.icon_request a:visited	{ background: url(../images/icon_request.gif) no-repeat 10px 10px; }

	.h_educators li.icon_addclass a:link, .h_educators li.icon_addclass a:visited	{ background: url(../images/icon_addclass.gif) no-repeat 10px 10px; }

	.h_educators li.icon_request a:hover	{ background: #191919 url(../images/icon_request.gif) no-repeat 10px 10px; }

	.h_educators li.icon_addclass a:hover	{ background: #191919 url(../images/icon_addclass.gif) no-repeat 10px 10px; }



.footer				{ position: relative; clear: both; height: 44px; margin: 0 160px 0 166px;}

.logo_osborne		{ position: absolute; top: 10px; left: 10px;}

.logo_pintsponsor	{ position: absolute; top: 10px; left: 200px;}

.logo_bug	{ position: absolute; top: 10px; right: 10px;}



a.icon_arrows:link, a.icon_arrows:visited	{ background: url(../images/icon_arrows.gif) no-repeat top right; padding-right: 12px;}





/* SUB PAGE

------------------------------------------------------------------------------------- */

.content	{ padding: 25px 20px;}

	.content table	{ margin-left: 20px;}

	.content table td { padding-left: 10px;}

	.content p { padding-right: 40px; padding-left: 20px; line-height: 18px;}

	/*.content h1	{ padding-left: 20px; padding-top: 20px;}*/

        .content h4 {padding:0px; font-size:14px;}

	.content h5	{ padding-left: 20px;}

.content ul {list-style:none;}



.ulmajor { padding-right: 40px; padding-left: 30px; }	

.limajor {display: block; height: 1%; padding: 7px 0 5px 15px; background: url(../images/bullet.gif) no-repeat 0 10px;}



.main_examples { position: relative; width: 808px; min-height: 516px; float: left; background: #fff url(../images/bg_main_example.jpg) no-repeat; font-family: verdana, arial, sans-serif; }

	* html .main_examples	{/*\*/ height: 516px;/**/}

	.main_examples p			{ padding: 0 0 15px; line-height: 18px;}



.breadcrumb				{ position: relative; margin: 0 0 20px; background: #ddd; border-top: 1px solid #cdcdcd; border-bottom: 1px solid #fff; font-size: 10px; color: #818181;}

	.breadcrumb_inner	{ padding: 5px; border-bottom: 1px solid #cdcdcd; border-top: 1px solid #fff;}

	.breadcrumb a:link, .breadcrumb a:visited	{ background: url(../images/icon_arrow_crumb.gif) no-repeat top right; padding-right: 9px; margin-right: 7px; font-weight: normal; text-decoration: none; color: #a06c53; }



.downloadthis	{ position: relative; float: right; width: 175px; margin: 0 0 20px 20px; border: 1px solid #a6a6a6; font-size: 10px; font-family: georgia, times, serif; }

	.downloadthis a:link, .downloadthis a:visited	{ display: block; padding: 10px 0 10px 10px; border: 1px solid #fff; text-transform: uppercase; background: url(../images/bg_downloadthis.gif) repeat-y top right; font-weight: normal; text-decoration: none; cursor: pointer;}

	.downloadthis b 	{ font-size: 12px; }

	.downloadthis span 	{ display: block; float: right; width: 54px; padding: 26px 0 0; margin-top: -10px; text-align: center; text-transform: none; background: url(../images/icon_zip.gif) no-repeat 50% 8px; color: #333; font-family: verdana, arial, sans-serif; letter-spacing: -1px;}

	.downloadthis a:hover	{ background: url(../images/bg_downloadthis_hover.gif) repeat-y top right; }

	

.example_outer	{ border: 1px solid #ffc20e; background: #f3e7c3; clear: both; height: 1%; margin: 0 0 20px; }

	.example_inner	{ padding: 10px; border: 1px solid #fff; }

	.liveexample	{ border: 1px solid #f1aa8a; background: #fff; padding: 20px; margin: 0 0 10px; }

	.example_result	{ border: 1px solid #f3c4a4; background: #fbf5e3; padding: 20px }

	

.source	{ background: url(../images/bg_source.gif) no-repeat 0 30px; margin: 50px 0 0;}

	.source form	{ margin: 20px; }

	.sourcetabs		{ height: 31px; margin-top: -31px; border-left: 1px solid #c3c3c3; }

	.sourcetabs li	{ margin: 0; list-style: none; float: left; border: 1px solid #c3c3c3; border-width: 1px 1px 0 0}

	.sourcetabs li a:link, .sourcetabs li a:visited	{ float: left; display: block; height: 29px; line-height: 29px; padding: 0 10px; background: #e1e1e1; }

	.sourcetabs li a:hover	{ background: #eee; }

        .sourcetabs li b { float: left; display: block; height: 30px; line-height: 30px; padding: 0 10px; background: #fff; color: #666;}

	



.rowcolor {background: #ddd;}

/* LINK ICONS

------------------------------------------------------------------------------------- */

.audio { padding: 0 15px 0 0; background: url(images/link_audio.gif) no-repeat 100% 4px; }

.doc { padding: 0 15px 0 0; background: url(images/link_worddoc.gif) no-repeat 100% 4px; }

.excel { padding: 0 15px 0 0; background: url(images/link_excel.gif) no-repeat 100% 4px; }

.external { padding: 0 16px 0 0; background: url(images/link_external.gif) no-repeat 100% 4px; }

.flash { padding: 0 15px 0 0; background: url(images/link_flash.gif) no-repeat 100% 4px; }

.ical { padding: 0 15px 0 0; background: url(images/link_ical.gif) no-repeat 100% 4px; }

.itunes { padding: 0 15px 0 0; background: url(images/link_itunes.gif) no-repeat 100% 4px; }

.outlook { padding: 0 15px 0 0; background: url(images/link_outlook.gif) no-repeat 100% 4px; }

.pdf { padding: 0 14px 0 0; background: url(images/link_pdf.gif) no-repeat 100% 4px; }

.podcast { padding: 0 15px 0 0; background: url(images/link_podcast.gif) no-repeat 100% 4px; }

.popup { padding: 0 16px 0 0; background: url(images/link_popup.gif) no-repeat 100% 4px; }

.ppt { padding: 0 15px 0 0; background: url(images/link_powerpoint.gif) no-repeat 100% 4px; }

.qt { padding: 0 15px 0 0; background: url(images/link_quicktime.gif) no-repeat 100% 4px; }

.rar { padding: 0 16px 0 0; background: url(images/link_rar.gif) no-repeat 100% 4px; }

.rp { padding: 0 16px 0 0; background: url(images/link_realplayer.gif) no-repeat 100% 4px; }

.rss { padding: 0 15px 0 0; background: url(images/link_rss.gif) no-repeat 100% 4px; }

.txt { padding: 0 13px 0 0; background: url(images/link_text.gif) no-repeat 100% 4px; }

.video { padding: 0 15px 0 0; background: url(images/link_video.gif) no-repeat 100% 4px; }

.wmp { padding: 0 16px 0 0; background: url(images/link_wmp.gif) no-repeat 100% 4px; }

.zip { padding: 0 16px 0 0; background: url(images/link_zip.gif) no-repeat 100% 4px; }



/* MISC. CLASSES & IDS

------------------------------------------------------------------------------------- */



h1	{ font-size: 20px; font-weight: normal; line-height: 20px; font-family: georgia, times, serif; color: #b1400d; padding: 0 0 10px;}

	h1 b	{ display: block; text-transform: uppercase; font-size: 11px; }

h2	{ font-size: 18px; font-weight: normal; line-height: 18px; font-family: georgia, times, serif; color: #666; padding: 0 0 10px;}

h3	{ font-size: 18px; line-height: 18px; font-family: georgia, times, serif; color: #666; padding: 0 0 10px;}

h4	{ font-size: 11px; font-weight: normal; color: #b1400d; padding: 0 0 10px; text-transform: uppercase;}

h5	{ font-size: 14px; font-weight: normal; line-height: 18px; font-family: georgia, times, serif; color: #666; padding: 0 0 5px;}



.hide { display: none; }

.clear { clear: both; }

br.clear { line-height: 0; height: 0; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* PLEASE LEAVE BOTH THESE LINES, FIX FOR IE7 */

.clearfix { display: inline-block; }

.clearfix { /*\*/display: block;/**/ }



/* ADD THIS CLASS TO AN ELEMENT TO FIX THE IE ITALICS BUG,

MUST BE THE INNER-MOST BLOCK-LEVEL ELEMENT THAT CONTAINS THE TEXT LIKE p, blockquote OR li

MAY REQUIRE A MORE DIRECT PATH TO THE ELEMENT */

* html .italicsfix { /*\*/overflow: hidden; o\verflow: visible; width: 100%; w\idth: auto; he\ight: 1%;/**/ }



.floatleft { float: left; }

.floatright { float: right; }



img.floatleft { margin: 0 10px 5px 0; position: relative; }

img.floatright { margin: 0 0 5px 10px; position: relative; }



.alignleft { text-align: left; }

.alignright { text-align: right; }

.aligncenter { text-align: center; }

.aligntop { vertical-align: top; }

.alignbottom { vertical-align: bottom; }



.example_inner h3{padding: 10pt 0pt 5px;}



.results 

 {

    padding: 4px;

    margin: 10px;

    background-color: #F1F1D4;

    border: 1px solid #000000;

 }

 

 .results strong

 {

 	margin: 20px 20px 20px 30px;

 }

.row    { background: #F1F1D4; border-top: 1px solid #fff; padding: 3px 5px; }

.rowOn  { background: #e5e5dc; border-top: 1px solid #fff; padding: 3px 5px; }

.row td {padding: 3px;}



th      { text-align: left; font-weight: bold; padding: 3px 5px; }

tr.row  { background: #F1F1D4; border-top: 10px solid #fff; padding: 3px 5px; }

tr.rowOn        { background: #e5e5dc; border-top: 1px solid #fff; padding: 3px 5px; }

tr.rowAdd       { background: #fff; padding: 3px 5px; }

tr.footerRow {background: #F1F1D4;}

tr.footerRow h3 {float: right; padding-right: 20px}

h2 em {font-size: smaller;}



#response span {padding-right: 50px; }



/* for the race condition examples */ 

.value1 {color: blue; font-weight: bold;}

.value2 {color: green; font-weight: bold;}

.error {color: red; font-weight: bold;}





 #status{ color:green;font-size:18px;font-weight:bold;padding-bottom:5px; }

 .status{ color:green;font-size:18px;font-weight:bold;padding-bottom:5px; }



.response       { background-color: #F1F1D4; border-top: 2px solid #d0d0bf; padding: 15px; }

#response span {padding-right: 50px; }

.output { background-color: #F1F1D4; padding: 5px; font-family: Courier, serif; }



.deleteButton {background-color: transparent; color: #990000; font-weight: bold; font-size: larger; border-style: hidden; margin-left: 5px;}



.data

 { background-color: #F1F1D4; padding: 5px; font-family: Courier, serif; }



.cursor {cursor: url("/ch8/images/loading-arrow.ani"), url("/ch8images/network-arrows-cursor.cur"), wait;}

/*.content        { padding: 15px; }*/



legend {font-weight: bold;}

fieldset {padding: 10px;}



#welcome {float: left;}

#logout {float: right;}

#scenarios {padding: 0px; margin: 0 20% 0 20%;  border: 2px solid; background-color: #FFFFFF;}

#scenarios h3 {font-size: large; border-bottom: solid 2px; padding: 5px; background-color: #F0E68C;}

#scenarios p {margin: 10px;}





.tooltip_list{position:absolute;

	     width:325px;

	     padding:5px;

	     background-color:#FFCC66;

	     border:1px solid black;}



.tooltipitem_list { padding:5px; }



/*  Example's List using YUI Data Table

-----------------------------------------------------------------------------------------*/

.yui-dt-hd {display: none;}

.yui-dt-bd table{width:420px; padding:3px; float:left;border:0px; margin:0px 0 40px 0;}

.yui-dt-bd table td{height:30px;}

.yui-dt-bd table th{height:30px;border-bottom: 1px solid #CF3000;}

.yui-dt-bd table th .yui-dt-label{ font-size: 11px; font-weight: normal; color: #b1400d; padding: 0 0 10px; text-transform: uppercase;}

.yui-dt-last{width:50px;}



.example_inner a{line-height:20px;}