/* @override http://cdmn.ca/css/cdmn.css */

/*
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%;
    color: gray;
}

/* need to specify the font the input boxes will use (search box) */
input{
	font-family:arial, helvetica, sans-serif; 
}

a img.canada30{border: 2px solid black;
}

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:44px;
	color:#ffffff;
		margin:-10px 5px 5px 0px;
		font:Helvetica, arial, sans-serif;
		font-variant:small-caps;
}
h3{
	font-size:20px;
	font:Arial, Helvetica, sans-serif;
	color:#E92D24;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:0px;}
h4{
	font-size:24px;
	color:#FFFFFF;
	padding:10px 10px 10px 0;
}
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, #headerwrapper {
	float:left;
	text-align: center;
	width:100%;
	min-width:970px;
	height:110px;
	background:url('../images/cdmn_headerbg.png') repeat-x;
}
	#content-header{
		margin:0 auto;
		width:970px;
		text-align: left;
	}
#wrapper-main{
	float:left;
	text-align: center;
	width:100%;
	min-width:970px;
	height:670px;
	background:url('../images/cdmn_mainbg.png') repeat-x;
}
#wrapper-alternate{
	float:left;
	text-align: center;
	width:100%;
	min-width:970px;
	/*height:640px;*/
	background:black; /*url('../images/cdmn_mainbg.png') repeat-x;*/
}
	#content-main{
		margin:0 auto;
		width:970px;
		text-align: left;
	}
#wrapper-footer{
	float:left;
	width:100%;
	min-width:970px;
	height:120px;
	background:#141414;
	text-align: center;
}
	#content-footer{
		margin:0 auto;
		width:970px;
		text-align: left;
	}
/* ======================= */
/* ===== 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:14px;
	}
		#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;
}

#textinput {
	padding:8px 5px 4px 5px;
	font-size: 12px;
	border: 0;
	color: grey;
	background:url('../images/cdmn_searchbox.png') repeat-y;
}

#submit {
	padding: 6px 8px 6px 8px;
	font-size: 12px;
	border: 0;
	

}
/* ======================== */
/* ===== CONTENT DIVS ===== */
/* ======================== */
/* the following divs are all used within the main wrapper div */

h3.mainpage {color:#FFF;}

#content-wrapper-top{
	height:280px;
	width:100%;
}
#content-wrapper-top-alternate{
	/*height:284px;*/
	width:100%;
    color: white;
}
	#greybox{ /* the MAIN box that holds the youtube video and related divs */
		float:left;
		width:450px;
	}
		#greybox-main{ /* the box that holds the youtube video div */
			float:left;
			width:450px;
			height:258px;
			background:url('../images/cdmn_greybg.png') repeat-y;
			text-align: center;
		}
		#greybox-footer{ /* the box that has the shadow underneath the youtube video */
			float:left;
			width:450px;
			height:25px;
			background:url('../images/cdmn_greybottom.png') repeat-y;
		}
		#greybox-youtube{ /* the actual div that directly holds the youtube video */
			width:450px;
			height:256px;
			margin:0 auto;
			background-color:black;
			overflow:hidden;
			text-align: left;
		}
		.header-infobox-left{ /* the two sections at the top use this: 'what is digital media' and 'need help get connected */
		float:left;
		width:45px;
		height:260px;
		margin:0 5px;
	}
	.header-infobox{ /* the two sections at the top use this: 'what is digital media' and 'need help get connected */
		float:left;
		width:445px;
		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-profile{ /* the two sections at the top use this: 'what is digital media' and 'need help get connected */
		float:left;
		width:500px;
		/*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;
		}
		.header-infobox li{ /*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:215px;
	width:100%;
	text-align: left;
}
	.middle-title{ /* this is the section at the left only */
		float:left;
		width:325px;
		height:210px;
		overflow:hidden;
		/*margin:0 20px 0 15px;*/
		margin:0 0px 0 15px;
	}
	.middle-infobox{ /* these are the 'recent events' and 'upcoming events' */
		float:left;
		width:295px;
		height:210px;
		margin:0 5px;
	}
	.middle-infobox-right{ /* these are the 'recent events' and 'upcoming events' */
		float:right;
		width:300px;
		height:210px;
		margin:0px;
	}
		.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;
			color:#333;
			width:100%;
			height:40px; /*50px;*/`
			margin:3px 0;
			overflow:hidden;
		}
		
		.middle-infobox-profile{ /* div next to the slideshow on the about page */
			float:left;
			width:500px;
			overflow:hidden;
		}
		
		.middle-infobox-about{ /* div next to the slideshow on the about page */
			float:right;
			width:500px;
			overflow:hidden;
		}
		
		.middle-infobox-text p{ /* appearance of the text in the events */
				text-align:left;
				font-size:13px;
				line-height:16px;
				margin:0;
		}

		.middle-infobox-greyline{ /* grey line in the events divs */
			float:left;
			clear:both;
			width:100%;
			height:0px;
			line-height:1px;
			margin:3px;
			background-color:grey; 
		} 
		
.middle-infobox-right {
background: url(http://cdmn.ca/images/leaf.png) no-repeat bottom;
}

.middle-infobox-right img {
margin-bottom: 18px;
}

.middle-infobox-profile p{ 
			font-size:  14px;
			line-height: 1.3em;
		}
		
.middle-infobox-right p {
background: url(http://cdmn.ca/images/joinus.png) no-repeat; 
text-indent: -9999px;
width: 201px;
height: 51px;
margin-bottom: 25px;
}

.middle-infobox-right a {
background: url(http://cdmn.ca/images/join_buttons.png) no-repeat top;
height: 67px;
width: 255px;
display: block;
text-indent: -9999px;
}

.middle-infobox-right a:hover {
background: url(http://cdmn.ca/images/join_buttons.png) no-repeat -67px left; 
}

#content-wrapper-bottom{ /* this holds all the twitter elements in the red section at the bottom */
	height:170px;
}

	}
	#tweet{ /* this holds all the twitter feeds bubbles */
			float:left;
			width:100%;
			height:45px; /*50px;*/
			margin:1px 0;
			overflow:visible;
	}
	#tweet li{ /* the twitter feeds are in form of a list. we shape that list to look like side by side bubbles */
		font-size:13px;
		color:#333;
		line-height:16px;
		display:block;
		float:left;
		margin-bottom:2px;
	}
	#tweet li div {
		padding:0px 4px 4px 4px;
	}
	
	blockquote {
		font-size:14px;
		}
		
	p.mainpage{font-size:16px;
	line-height:1.4em;}
	
	/* OLD TWITTER SECTION */
	
	#twitter-title_backup{  /* the 'who's talking' graphic on the left */
		float:left;
		width:182px;
		height:76px;
		margin:36px 23px 0 20px;
	}
	#tweet_backup{ /* this holds all the twitter feeds bubbles */
		float:left;
		height:130px;
	}
	#tweet li_backup{ /* 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:174px;
		height:116px;
		background:url('../images/cdmn_twitterbubble.png') no-repeat;
		margin:15px 10px 0 0;
	}
	#tweet li div_backup {
		padding:8px;
	}

	#center-placeholder{ /* just some placeholder text until member logos are added */
		text-align:center;
	}
	
	blockquote {
		font-size:14px;
	}
		
		blockquote.about_large {
			margin: 1em 20px;
   			padding-left: 5px;
			padding-right: 5px;
   			/* background: transparent url('../images/quote.gif') no-repeat; */
			font-size:24px;
			line-height:1.4em;
			font-stretch: expanded;
			text-indent: 20px;
		}
	
		
	p.mainpage{font-size:16px;
	line-height:1.4em;}
	
	
/* ======================= */
/* ===== 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;
	text-align: right;
}

#container h4 {
text-align: center;
padding-top: 15px;
font-size: 17px;
}