/*
1.1	GLOBAL RESET ~ read only

2.1	COLORS
2.2	HELPER CLASSES
2.3	GLOBAL STYLING

3.1	PAGE LAYOUT
3.2	GRID

4.1	COMPONENTS
*/



/* 1.1  GLOBAL RESET ~ read only */

/* 1.1.1 Normalize spacing */
a, address, body, blockquote, cite, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4,
h5, h6, html, img, input, legend, li, object, ol, p, pre, q, span, table, tbody, td, textarea, tfoot,
th, thead, tr, ul {
	margin: 0;
	padding: 0;
}

/* 1.1.2 Normalize appearance */
body, html { height: 100%; }
html {
	font-size: 62.5%; /* 62.5% makes 1em ~ 10px */
	overflow-y: scroll; /* prevents page shifting in FF */
}

address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal; 
	font-weight: normal;
}
pre { padding-left: 20px; }

p em { font-style: italic; }
p strong { font-weight: bold; }

a:active, a:focus { outline: none; /* removes dashed border in FF */ }
a em { cursor: pointer; }

img {	
	border: 0; 
	display: block; /* white-space fix */
}

ol { list-style: decimal inside; }
ol ol {
	list-style-type: upper-alpha; 
	margin-left: 1.8em;
}
ul { list-style: disc inside; }
ul ul { margin-left: 1.4em; }

table { border-collapse: collapse; border-spacing: 0; }
caption, th { text-align: left; }

object {	
	display: block; /* white-space fix */
	outline: none; /* removes dashed border in FF */
}

fieldset { border: 0; }
label { cursor: pointer; }
input[type=hidden] { display: none; /* for FF */ }
option, optgroup { padding-left: 3px; }
optgroup option {	padding: 0; }
optgroup { font-style: normal; }




/* 2.1 COLORS
Black					: #000	: standard text color
Grey					: #444	: first paragraph
Grey light			: #999	: input borders
Grey extralight	: #ccc	: input bg
etc.
*/



/* 2.2 HELPER CLASSES */
.clearAfter { zoom: 1; /* IE6, IE7 */ }
.clearAfter:after {
	clear: both;
	content: "";
	display: block;
	height: 0;
}
.dim { color: #ddd; }
.hidden { display: none; }
.left { float: left; }
.right { float: right; }
.offScreen { margin-left: -9999px; position: absolute; }
/* extend with your own helper classes */



/* 2.3 GLOBAL STYLING */

body {
	color: #000;
	font: normal 1em/1.5 Arial, Helvetica, sans-serif;
	background: #fff url(../images/topborder.jpg) 0 0 repeat-x;
	/* "Trebuchet MS", Arial, ... */
}

h1 { color: #999999; font: bold 1.8em/1 Georgia,"Times New Roman",Times,serif }
h2 { color: #000; font: normal 1.7em/1 Arial, Helvetica, sans-serif; }
h3 { color: #000; font: normal 1.6em/1 Arial, Helvetica, sans-serif; }
h4 { color: #000; font: normal 1.5em/1 Arial, Helvetica, sans-serif; }
h5 { color: #000; font: normal 1.4em/1 Arial, Helvetica, sans-serif; }
h6 { color: #000; font: normal 1.4em/1 Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 10px; }

a { color: #E52E88; text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea {
	font-family: inherit;
	font-weight: inherit;
	padding: 2px;
}

blockquote, button, dl, input, label, legend, ol, p, pre, select, table, textarea, ul { 
	font: normal 1.1/1.5em Georgia, "Times New Roman", Times, serif; color:#999; 
}
blockquote, dl, fieldset, ol, p, pre, table, ul { margin-bottom: 10px; }

ul ul, ul ol, ol ol, ol ul, table ul, table ol, table p, table blockquote {
	font-size: 1em;
}

dt { font-weight: bold; }
dd { padding-left: 10px; }

caption {
	color: #ccc; 
	font-style: italic;
}
td, th {	padding: 3px 10px; }
th { background: #ccc; }
td { border-bottom: 1px solid #ccc; }


/* 3.1 PAGE LAYOUT */
.page {
	margin: auto;
	width: 960px;
}
.header { display: relative; width: 960px; padding: 30px 0 20px 0; }
.header img { /*display: table;*/ margin:0 auto; }

.aside { width: 272px; height: 560px; position:relative; font: normal 1.2em/1.5 Georgia, "Times New Roman", Times, serif; color:#999; }
.aside span { margin: 50px 0px 0px 30px; display: block; }
.video .aside { width: 240px; height: 272px; }
.instore { margin: 80px 0 0 20px; }
.banner_200{ bottom: -85px; height: 200px; margin: 0 0 0 20px; /*position:absolute;*/ width: 240px;}
.caraoke { position:absolute; bottom:-210px; margin: 0 0 0 20px; }
.video .caraoke { margin: 0 0 0 0; }
.werf { /*position:absolute;*/ bottom:-60; margin: 20px 0 0 30px; }
.form { position: absolute; bottom: 0; font: normal 1.2em/1.5 Georgia, "Times New Roman", Times, serif; color:#999; }
.form .icon { display: inline; margin: 0 3px 0 3px; }
.submit { background: #FEED01; width: auto;  color: #000; border: 1px solid #FEED01; margin-left: 10px;  }
.form form { padding-bottom: 10px; }
.copy { width: 416px; font: normal 1.2em/1.5 Georgia, "Times New Roman", Times, serif; color:#999; }
.video .copy { width: 480px; }
.video .copy img { padding-left: 30px; }
.video .copy .inTextImg{ padding-left: 0; }

.cover { box-shadow: 2px 2px 5px #aaa;
-moz-box-shadow: 2px 2px 5px #aaa;
-webkit-box-shadow: 2px 2px 5px #aaa; }


/* 3.2 GRID */
/* every column should have the 'unit' class + a 'size...' class */
/* create your own sizes */
.unit { float: left; }
.size1of2 { width: 50%; }
.size1of3 { width: 33.33%; }
.size1of4 { width: 25%; }
.size3of4 { width: 75%; }
.size1of5 { width: 20%; }

/* 4.1 COMPONENTS */
/* Form layout */
.notValid{
	background-color: #FFAAD4;
	border: 1px solid #E52E88;
	color: #E52E88;
}
/* Iframe */
iframe{
	border: 0;
	margin-top: 53px;
}
.topMargin{
	margin-top: 55px;
}