/*------------------------------------------BODY---------------------*/
/*Define Body, so that the WYISWYG has a default font color and size */
/*-------------------------------------------------------------------*/

body {
	background: #fff;
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
}

/*------------------------------------------LAYOUT DIVS---------------------*/
/*These are completely up to you... use your own layout divs if you want to */
/*-- see styles for menus below.. these are built assuming they are in the  */
/*-- sidebar DIV... so if you change that, change them too                  */
/*--------------------------------------------------------------------------*/

#container{
	width: 800px;
	margin: 0 auto 30px auto;
	}

#header {
	background: #fff;
	width: 800px;
	height: 90px;
	}

#content {
	background: url(images/content_bg_2.png);
	width: 800px;
	}

#content_one_column {
	background-color: #fff;
	width: 790px;
	padding: 5px 5px 5px 0;
	border-top: 1px solid #999;
	}

#sidebar {
	width: 200px;
	float: left;
	margin: 5px 0px;
	}

#main{
	width: 580px; 
	float: right; 
	margin: 0px 5px 5px 0;
	}

#footer {
	width: 780px;
	margin: auto;
	text-align: center;
	padding: 10px;
	border-top: 1px solid #999;
	font-size: 10px;
	background: #fff;
	}

#header img {
	display: block;
	}
	
.clear{
	clear: both
	}

/*-------------------------GENERIC DESIGN OPTIONS for WYSIWYG -------------------------*/
/*You have to define these so that when people style content with the WYISWYG, it works*/
/*also, some common definitions needed by all designs, like <a> link colors            */
/*-------------------------------------------------------------------------------------*/

p, .text, .smalltext, h1, .head1, h2, .head2, h3, .head3,h4, h5, h6, .head4, ol, ul, li {
  color: #666;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0px 0px 5px 0px;
}

div.text, div.smalltext, div.head1, div.head2, div.head3, div.head4 {
  margin:0px;
}

.smalltext{
   color: #666;
   font-size: 10px;
}

h1, .head1, h2, .head2, h3, .head3,h4, h5, h6, .head4 {
  font-weight: bold;
}

h1, .head1 {
   color: #646464;
   font-size: 19px;
}
h2, .head2 {
   color: #646464;
   font-size: 17px;
}
h3, .head3 {
   color: #646464;
   font-size: 15px;
}
h4, h5, h6, .head4 {
   color: #646464;
   font-size: 13px;
}

a:link, a:visited, a:active {color:#0066CC;text-decoration:underline;}
a:hover {color:#333333;text-decoration:none;}

/*----------------------------------EO2 SITE CLASSES--------------------------------*/
/*Define these classes and IDs to control the look of reg site content generated by */
/*Carl's PHP programming... lists of webinars, shopping cart, checkout forms, etc.  */
/*--------------------------------------------------------------------------------- */

/* -------- series .. may contain a list of sessions ----------*/
div.series{
   border: dotted 1px #666;
   padding: 10px;
   margin-bottom: 5px;
}

div.series_title {
   color: #0066CC;
   font-size: 17px;
   font-weight: bold;
   padding-bottom: 5px;
   border-bottom: dotted 1px #666;
}

div.series_summary{
   font-size: 12px;
   font-weight: normal;
   padding: 15px 0px;
}

/* ------------------- session listings ------------------- */
div.session_list{
	padding: 0px;
}

div.session{
	margin: 5px 0px;
	padding: 0px 0px 10px 0px;
	border-bottom: 1px dotted #666;
}

div.solo_session_title {
   color: #666666;
   font-size: 14px;
   font-weight: bold;
}

div.session_title{
   font-size:14px;
   font-weight:bold;
}
.session_datetime{
	font-style: italic;
	padding-top: 3px;
}
div.session_summary{
   padding: 10px 0px;
}


/*--title bars used for "Upcoming webinars, Archived webianrs, and View Cart, Checkout, etc..--*/
.title_bar{
	padding: 5px 0px;
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 17px;
	font-weight: bold;
	color: #0066CC;
	margin: 5px auto;
	}

/*--buttons--
These are some styles that can make a div look like a button...
Maybe we can use these instead of buttons, because IE SUCKS and makes any
real button STUPIDLY WIDE. We have to use these and then do javascript
to make them act like buttons. Once again IE wastes more of our time.

We can make these rounded with jquery.corners.

CRAP.. to make these shrink to the width of the content, we have to
make them either position obsolute or float, which breaks them out of the 
page flow, so it doesn't push down the next div... so I have to follow it with a div
clear both... what a pain in the ass, just because IE sucks at buttons.
*/
.buttondiv{
   float: left;
   background: url(images/button_bg_off.gif) 0 100% repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
   color:#fff;
	padding: 4px 6px;
   border:0px;
   cursor: pointer;
   margin-bottom: 10px
}

.buttondiv:hover{
   background: url(images/button_bg_on.gif) 0 100% repeat-x;
   color:#000;
}

/*-- We also have some Button Styles  in the file round-button.css now 
They're nice, but require editing of a great big graphic to change the appearance,
and the CSS is really nasty looking and hard to edit, because it has to have differnt
settings for each browser... I don't trust it not to break someday.
Plus you have to do this stupid thing with a span classed as button
surrounding a button classed as button... WTF is up with that?
Again, none of this would be necesary if IE didn't SUCK.
--*/

/*--Cart table colors --*/
div.cart_table table {background-color: #ffffff;}
div.cart_table table tr.row_title td {background-color: #0066CC; color: #FFFFFF;}
div.cart_table table tr.row_odd td {background-color: #EEEEEE; color: #000}
div.cart_table table tr.row_even td {backsground-color: #FFFFFF; color: #000}
div.cart_table table tr.row_total td {background-color: #0066CC; color: #FFFFFF;}
div.cart_table table tr.row_bottom td {background-color: #0066CC; color: #FFFFFF;}

/*--Checkout table colors --*/
div.checkout_form table {background-color: #ffffff;}
div.checkout_form table td.col_label {font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #666666; color: #FFFFFF; font-weight: bold; text-align: right; padding-right: 5px;}
td.col_label_req {font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #0066CC; color: #FFFFFF; font-weight: bold; text-align: right; padding-right: 5px;}
div.checkout_form input,select {background-color: #efefef; color: #000000; border: solid 1px #666666; padding: 2px; margin: 0px;}

/*sidebar ul li and a are used for menus */
#sidebar ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#sidebar li{
margin: 0px 0px;
padding: 0px;
}
#sidebar a{
display: block;
font-size: 12px;
font-weight: bold;
padding: 5px 10px;
margin: 0px;
}
#sidebar a:link, #sidebar a:visited{text-decoration: none;}

/*--Sidebar link not current or roll-over--*/
#sidebar a:link, #sidebar a:visited {
	background: #e9eaed;
	width: 180px;
	color: #333333;
	}
	
/*--Sidebar link roll-over color--*/
#sidebar a:active, #sidebar a:hover {
	background: #0066CC;
	color: #FFFFFF;
	}

/*--Sidebar current link color--*/
#sidebar li.current a:link{
	background: #0066CC;
	color: #FFFFFF;
	width:180px;
	}
#sidebar li.current a:visited{
	background: #0066CC;
	color: #FFFFFF;
	width:180px;
	}