/*

If you're viewing this as the custom stylesheet, any changes to this should override the default front-end css.
To override inline css use the !important attribute. Try to use that sparingly though.

We've left empty selectors for you to modify as well as our own id's and classes which we think are semantically useful, such as headerContent, Primary Content, secondaryContent, etc.. Feel free to delete those and add/target your own elements if you modify the custom html.

You can rollback by version if you make a mistake.

Firefox's Web Developer toolbar and Firebug are great extensions to use to easily find and modify.

Notes on CSS order:

-General tags (body,html,H's,a's, etc.)
-General DIVS and styles applied by section beginning at top of site page
	examples: wrappers,main nav,header,content,indiv cols,footer,etc.
-Specific section styles based on function and rarity of occurance or specificity
	examples: forms, front landing page, miscellanous classes and DIVS
-Misc styles, Turn offs and storage

Some styles may be displayed as Tag,DIV,class in that order within their sections

*/


/* ------------- TAGS ----------------*/

html, body {
  height:100%;
  margin-bottom:1px;
  background-color:#FFF; /* browser needs default color - actual background can be set in #main */
  background-image: url(http://images.verticalstreaming.com/clients/defaultFront/images/mainBG2.jpg);
  background-repeat: repeat-x;
  background-position: center top;
}

html {}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:76%; /* cross-browser font compromise */
	text-align:center; /* centers content - font alignment needs to be reset in #main */
	margin:0;
	padding:0;
	color: #000;
}
  
p {
	font-size:1em; 
	margin:0px; /* needed to fix top browser margin */
	padding:0px 20px;
}

a:link, a:visited {
	text-decoration:underline;
	color: #069;
}

a:hover, a:active, a:focus {
	text-decoration:underline;
	color: #69C;
}

strong, bold {font-weight:700; }
em, i {font-style:italic; }

h1,h2,h3,h4,h5,h6 {
	color:#666;
	border-style:none;
	position:relative;
	left:20px;
}

h1 { font-size:2em; }
h2 { font-size:1.5em; }
h3 { font-size:1.25em; }
h4 { font-size:1.1em; }
h5 {}
h6 {}

img { border:0px; } /* stops IE's default border if it's is linked */

/* ----------------- DIVS ------------------------ */

/* overall content */

#overall_wrap {
	width:975px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999;
	border-left-color: #999;
	margin:0 auto;
}

#main {
	padding:0px;
	width:100%;
	text-align:left;
}


#main .container {
	margin:0 auto;
	min-height: 100%;
	background-color: #FFF;
}


/* header */

#header_content, #main_content, #footer_content { /* possible to set all simultaneous here or set overallWrap above */

}

#header { /* style a screenwide background here if overallWrap is at 100% */
    padding:0px;
	width:100%;	
}

#header_content {
	height: 200px;
	background-image: url(http://images.verticalstreaming.com/clients/defaultFront/images/headerBG2.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}

#logo { /* text is turned off by default below, but can be turned on. An image should be included in the customer header html plus a span around the text to get this effect */
	position:relative;
	top:10px;
	left:10px;
	float:left;
}
	
#header_nav_wrap {}
#header_nav {}

#user_links { /* this might need to target headerNav instead */
	float:right;
	height:50px;
	width:200px;
	padding:20px 0px 0px 0px;
    text-align:center;
}

.home_link, .video_link, .login_link {}


/* main content */

#main_content {
  min-height:500px;
  height:auto !important; /* hack for IE */
  height:500px;
  padding-top:25px; 
}

#main_content .block {}


/* semi-section classes which is why they're in the DIV section - 
note: do not position these items as relative or absolute as this will interfere with the lower lights function in older versions of IE
*/

.block {}

.block_inside { 
	overflow:hidden; /* generally necessary to maintain layout integrity */
    padding-bottom:50px; /* may add extra spacing if mulitple block_insides are placed on the page */	
}

/* divs below are not generated automatically - however we recommend including them */

#content_wrap{}
#my_content{}
#primary_content_wrap{}
#primary_content{}

/* helps with 2 or 3 column setups */

#secondary_content1_wrap{}
#secondary_content1{}

#secondary_content2_wrap{}
#secondary_content2{}


/* footer - this is seperate from the main_content so may require duplicate or different styling */

#footer { /* style a screenwide background here if overallWrap is at 100% */
   width:100%;
}

#footer_content {
   background-image: url(http://images.verticalstreaming.com/clients/defaultFront/images/footerBG3.jpg);
   background-repeat: repeat-x;
   background-position: center top;
   height:100px;
}

#footer .container {
   height:1;
   padding:0px 0px 0px 0px;
}

#footer_content{}

#footer_nav{
	padding-top:20px;
}

#copyright_info{
	padding-top:10px;
	}


/* Fix up IE6 PNG Support - add to this to enable transparency for more elements */
img, div, #logo {  }


/* ----------------- CLASSES and page specific items -------------------- */

/* 
	Listing Styles - setup for 3 column layout. mostly used for display video thumbs and their info
*/

.column_data_wrap {
	width:950px;
	position:relative;
	left:50px;
}

.column_data_wrap div { /* targets each data cell */
	width:270px;
	float:left;
	padding:10px;
}

.column_data_wrap div div { /* targets piece of data in the cell */
	margin:0px;
	padding:0px;
	width:250px;
}

.column_data_wrap .image, .column_data_wrap .title, .column_data_wrap .desc, .column_data_wrap a {
	padding:5px 0px;
} 

		/* individual overrides if necessary */
.column_data_wrap .image {}

.column_data_wrap .title {}

.column_data_wrap .desc {}

.column_data_wrap a {}

/* player mod */

#player {}

.outer {}

.inner {
	position:relative;
	z-index:50;
        width:631px;
        margin:0 auto;
}

#player_code {
  text-align: center;
  width: 100%;
}

#focus_screen {
overflow: hidden; 
position: absolute; 
top: 0px; 
left: 0px; 
display: block !important; 
background-color: rgb(0, 0, 0); 
width: 1663px; 
height: 833px;
z-index: 45; 
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

/* wufoo overrides - if wufoo css is not being added in the html HEAD than this may be deleted */

#main_content.block form {
	position:relative;
        top:10px;
        left:20px;
}

#main_content.block form li {
    list-style:none; /* IE6 fix */	
}

#main_content.block li input.text, #main_content.block li input.search, #main_content.block li input.file, #main_content.block li textarea.textarea, li  select.select
{
  	background-color:#FFF;
	border-top: 1px solid #cccaca;
}

/* log in form */
#email .text {}
#password .text {}

/* general forms */
.text {}
.buttons {}
.desc {} /* is also used in video listing */

/* inside #main and #footer - effects both. to target individually scope them */

.container {}

/* clear Class - useful to clear elements or just apply clear:both to the individual element/id/class*/
.brclear {
	clear:both;
	height:0;
	font-size:1px;
	line-height:0;
	margin:0;
}

/* 
	class columns
*/


.left_half {
	float:left;
	width: 44%;
	margin-left:12px;
	padding-top:12px;
}

.right_half {
	width: 44%;
	margin-left:51%;
	padding-top:12px;
}

/* ----------------- turn offs ------------------- */

#logo {
	visibility:none;
	display:none;
}