/* ROOTED YOUTH CSS
(based on 12-column grid)

Resets
-------------------------------------------*/
* {
	outline: 0;
	vertical-align: baseline;
	margin: 0;
	padding: 0;
}
img {
	border: none;
	vertical-align: top;
} 
a img {
	border: none;
	vertical-align: top;
} 

/* Main Containers
-------------------------------------------*/
body {
	font: 16px 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
	font-size: 11px;
	color: #333;
	background: #000;
}
#container {
	margin: 0 auto;
	width: 960px;
	/* Grid Aligner
	background: #fff url(12_col.gif) repeat-y; */
}

/* Grid Items >> General Attributes
-------------------------------------------*/
.chunk {
	display: inline;
	float: left;
	position: relative;
	overflow: hidden;
	margin: 10px;
}

/* Grid items >> Specific Attributes
size:  1     2      3      4      5      6      7      8      9      10     11     12
width: 60px, 140px, 220px, 300px, 380px, 460px, 540px, 620px, 700px, 780px, 860px, 940px
left:  10px, 90px,  170px, 250px, 330px, 410px, 490px, 570px, 650px, 730px, 810px, 890px
-------------------------------------------*/
#header {
	width: 940px;
	height: 177px;
	/*make new header 620px wide */
}

/* Menu 
------------------------------*/
#menu {
	width: 940px;
	/* text-align: center;*/
}
#menu a {
	background: #5A3D1D;
	color: #ffffff;
	text-decoration: none;
	font-family: Arial, Helvetica, Sans-serif;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	margin: 0px 3px 0px 0px;
	padding: 4px 6px 3px 6px;
}
#menu a:link {}
#menu a:visited {}
#menu a:hover {
	color: #ffffff;
	background: #967349;
}
#menu a:active {}

/* Submenu
------------------------------*/
#submenu {
	width: 940px;
	/*text-align: center;*/
}
#submenu a {
	background: #967349;
	color: #ffffff;
	text-decoration: none;
	font-family: Arial, Helvetica, Sans-serif;
	font-weight: bold;
	font-size: 14px;
	/*text-align: center;*/
	margin: 0px 3px 0px 0px;
	padding: 4px 6px 3px 6px;
}
#submenu a:link {}
#submenu a:visited {}
#submenu a:hover {
	color: #ffffff;
	background: #5A3D1D;
}
#submenu a:active {}
/*------------------------------*/
#fullVideo {
	width: 780px;
	margin-left: 90px;

}
#content {
	color: #ffffff;
	width: 600px;
	padding: 40px 80px;
	text-align: left;
}
#item1 {
	width: 298px;
	border: 1px solid #666;
	text-align: center;
	padding: 0px 0;
}
#item2 {
	width: 298px;
	border: 1px solid #666;
	text-align: center;
	padding: 0px 0;
}
#item3 {
	width: 298px;
	border: 1px solid #666;
	text-align: center;
	padding: 0px 0;
}
#footer {
	width: 940px;
}

/* CLEAR >>
NOTE: The term "clear" means to push sequential elements underneath a float (all grid chunks are floats).
NOTE: Calling this class in the HTML is like a <br> tag (starts the next row)
-------------------------------------------*/
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}