/*
CONTENTS

0- BASIC STYLES
1- MAIN DIVS
2- HEADER DIVS
3- CONTENT DIVS
4- 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; 
}

p{
	margin:8px 0;
	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:#141414;
}
	#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;*/
	background:url('images/dmc_logo.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%;
}
	#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:black; /*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:black; /*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:black; /*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;
}