/*CONTENTS0- BASIC STYLES1- MAIN DIVS2- HEADER DIVS3- CONTENT DIVS4- FOOTER DIVS *//* ===== BASIC STYLES ===== */html{}/* all the text on the page will use this font */body{	font-family:arial, helvetica, sans-serif; 	font-size:12px;	background-color:#141414;	width:100%;}/* need to specify the font the input boxes will use (search box) */input{	font-family:arial, helvetica, sans-serif; }

img{	border:0px;
	padding: 5px 5px 5px 5px;
   }

p {	margin:8px 0; color:#black;	line-height:15px;}/* only h1 is currently being used for "profit hot 50 rife with digital media". feel free to change these header styles */h1{	font-size:26px;	color:#E92D24;}h2{	font-size:20px;	color:#E92D24;}h3{	font-size:18px;	color:#E92D24;}h4{	font-size:16px;	color:#E92D24;}h5{	font-size:14px;	color:#E92D24;}h6{	font-size:12px;	color:#E92D24;}/* links */a{	color:#E92D24;	font-weight:bold;	text-decoration:none;}a:hover, a:active{	text-decoration:underline;}.clear1{	float:left;	clear:both;	width:100%;	height:1px;	line-height:1px;}
.scrollable { 
    width: 1000px; 
    height: 190px; 
    overflow: auto; 
	/*background:url('../images/cdmn_mainbg.png') repeat-x;*/
} 

/* ===================== *//* ===== MAIN DIVS ===== *//* ===================== *//* these divs hold all the content. the page is slip up into three main divs (wrappers), each of them have a content div within it. the wrapper spans the whole width of the page (for the background), and the content divs are only 970px wide and have no backgrounds. */#wrapper-header{	float:left;	width:100%;	min-width:970px;	height:110px;	background:url('images/cdmn_headerbg.png') repeat-x;}	#content-header{		margin:0 auto;		width:970px;	}#wrapper-main{	float:left;	width:100%;	min-width:970px;	height:640px;	background:url('images/cdmn_mainbg.png') repeat-x;}#wrapper-alternate{
	float:left;
	width:100%;
	min-width:970px;
	/*height:640px;*/
	background:black; /*url('../images/cdmn_mainbg.png') repeat-x;*/
}
	#content-main{		margin:0 auto;		width:970px;	}#wrapper-footer{	float:left;	width:100%;	min-width:970px;	height:72px;	background:#FFFFFF;}	#content-footer{		margin:0 auto;		width:970px;	}/* ======================= *//* ===== HEADER DIVS ===== *//* ======================= *//* the following divs are all used within the header wrapper div */#header-logo{	float:left;	width:350px;	height:110px;	background:url('images/cdmn_headerlogo.png') no-repeat;}#header-topbar{	float:left;	width:620px;	height:40px;}	#header-topbar-inner{		float:right;		height:40px;		margin:6px 0 0 0;	}	/* only used as a spacer between the search box and menu bar */#header-menubar-spacer{	float:left;	width:620px;	height:20px;}#header-menubar{	float:right;	height:40px;	margin:0 14px 0 0;}	#header-menubar li{ /* we shape the menu to be side by side links */		list-style:none;		display:inline;		margin:0 0 0 12px;		font-size:13px;	}		#header-menubar li a{ /* links for the menu items */			color:white;			text-decoration:none;		}		#header-menubar li a:hover, #header-menubar li a:active{			color:#E92D24;			text-decoration:none;		}.searchbox{ /* the search box input textfield thingy */	border:0;	width:142px;	padding:8px 5px 6px 5px;	font-family:arial, helvetica, sans-serif;	color:grey;	background:url('images/cdmn_searchbox.png') repeat-y;}/* ======================== *//* ===== CONTENT DIVS ===== *//* ======================== *//* the following divs are all used within the main wrapper div */#content-wrapper-top{	height:284px;	width:100%;}#content-wrapper-top-alternate{
	/*height:284px;*/
	width:100%;
background-color:white;
}
	#greybox{ /* the MAIN box that holds the youtube video and related divs */		float:left;		width:350px;	}		#greybox-main{ /* the box that holds the youtube video div */			float:left;			width:350px;			height:258px;			background:url('images/cdmn_greybg.png') repeat-y;		}		#greybox-footer{ /* the box that has the shadow underneath the youtube video */			float:left;			width:350px;			height:25px;			background:url('images/cdmn_greybottom.png') no-repeat;		}		#greybox-youtube{ /* the actual div that directly holds the youtube video */			width:320px;			height:265px;			margin:0 auto;			background-color:grey;			overflow:hidden;		}	.header-infobox{ /* the two sections at the top use this: 'what is digital media' and 'need help get connected */		float:left;		width:295px;		height:260px;		margin:0 5px;	}
    	.header-infobox-wide{ /* the two sections at the top use this: 'what is digital media' and 'need help get connected */
		float:left;
		width:600px;
		height:260px;
		margin:0 5px;
		color:white;
	}
	.header-infobox-full{ /* the two sections at the top use this: 'what is digital media' and 'need help get connected */
		float:left;
		width:1000px;
		height:260px;
		margin:0 5px;
		color:white;
	}
	.header-infobox-full-alternate{ /* the two sections at the top use this: 'what is digital media' and 'need help get connected */
		float:left;
		width:1000px;
		/*height:260px;*/
		margin:0 5px;
		color:white;
	}
		.header-infobox-redline{ /* red lines */			float:left;			clear:both;			width:100%;			height:1px;			line-height:1px;			margin:2px 0 5px 0;			background-color:#E92D24;		}		.header-infobox p{ /*the text within the info boxes at the top */			color:grey;		}
        span{
            color:red;
        }#content-wrapper-middle{ /* this div holds all the divs on the gray bar in the middle of the page */	height:210px;	width:100%;}	.middle-title{ /* this is the section at the left only */		float:left;		width:325px;		height:210px;		overflow:hidden;		margin:0 20px 0 15px;	}	.middle-infobox{ /* these are the 'recent events' and 'upcoming events' */		float:left;		width:295px;		height:210px;		margin:0 5px;	}		.middle-infobox-image{ /* all those dummy images under the events */			float:left;			width:50px;			height:50px;			margin:3px 5px 3px 0;		}		.middle-infobox-text{ /* the div that holds the text under the events */			float:left;			width:236px;			height:50px;			margin:3px 0;			overflow:hidden;		}			.middle-infobox-text p{ /* appearance of the text in the events */				font-size:11px;				line-height:12px;				margin:0;			}		.middle-infobox-greyline{ /* grey line in the events divs */			float:left;			clear:both;			width:100%;			height:1px;			line-height:1px;			background-color:grey;		}#content-wrapper-bottom{ /* this holds all the twitter elements in the red section at the bottom */	height:140px;	width:100%;}	#twitter-title{  /* the 'who's talking' graphic on the left */		float:left;		width:182px;		height:76px;		margin:36px 23px 0 20px;	}	#tweet{ /* this holds all the twitter feeds bubbles */		float:left;		height:130px;	}	#tweet li{ /* the twitter feeds are in form of a list. we shape that list to look like side by side bubbles */		font-size:11px;		line-height:13px;		display:block;		float:left;		width:158px;		height:100px;		padding:8px;		background:url('images/cdmn_twitterbubble.png') no-repeat;		margin:15px 10px 0 0;	}/* ======================= *//* ===== FOOTER DIVS ===== *//* ======================= */#footer-menu{	float:left;	padding:14px 0 0 0;	margin:0 0 0 20px;}	#footer-menu p{		font-size:11px;		color:grey;	}	#footer-menu li{ /* we shape the footer menu to be side by side links */		list-style:none;		display:inline;		margin:0 8px 0 0;		font-size:11px;	}		#footer-menu li a{			font-weight:normal;			color:white;			text-decoration:none;		}		#footer-menu li a:hover, #footer-menu li a:active{			font-weight:normal;			color:grey;			text-decoration:none;		}#footer-logos{	float:right;	padding:10px 0 0 0;}