/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video, flakes {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}



/* HTML5 display-role reset for older browsers */



article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}



body {

	line-height: 1;

}



ol, ul {

	list-style: none;

}



blockquote, q {

	quotes: none;

}



blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}



table {

	border-collapse: collapse;

	border-spacing: 0;

}



/* The actual CSS start from here */



body, html {


	line-height: 20px;

	font-size: 14px;

	color: #333;

	font-family: 'Arial', sans-serif;

	font-weight: normal;

}



h1 {

	color: #666;

	font-size: 24px;

	text-shadow: 0 0 1px rgba(51,51,51,0.3);

	text-align: center;

	margin-top: 60px;

}



h2 {

	font-size: 20px;

	line-height: 36px;

	text-shadow: 0 0 1px rgba(51,51,51,0.2);

	padding-bottom: 5px;

	margin-bottom: 15px;

	border-bottom: 1px solid #ccc;

}



h3 {

	font-family: ìMyriad Proî, Arial, Helvetica, Tahoma, sans-serif;

	font-size: 18px;

	line-height: 26px;

	font-weight: 400;

	letter-spacing: -1px;

	font-weight: normal;

}



a.link, a:active, a:selected {

	border: none;

	outline: none;

}



a.link, a:visited {

	color: #00BFFF;

}



#header{

	width: 960px;

	position: relative;

	left: 50%;

	margin-left: -480px;	

}





.productContainer {

	width: 620px;

	height: 400px;

	position: relative;

	font: "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;

	z-index: 999;

}



#product1{

	position: relative;

	margin: 25px 0 0 12px;



} 

#product2{

	position: relative;

	margin: 20px 0;

}





.bigImages {

	position: absolute;

	top: 0;

	left: 0;

}



.bigImages ul li {

	display: block;

	position: absolute;

	margin: 0;

	padding: 0;

	top: 0;

	left: 0;

}





/* the caption's style */

div.caption h4{

	color: #d1d1d1;

	font-size: 20px;

	margin-top: 8px;

	margin-bottom: 10px;

}

div.caption p{

	margin-bottom: 6px;

	color: #666;

}

div.flakes {
	
	position: absolute;

	top: 0px;

	left: 420px;

	width: 180px;
	
	}

div.flakes h4{

	color: #d1d1d1;

	font-size: 17px;
	
	margin-top: 0px;

	margin-bottom: 10px;
	
	width:490px;

}

div.flakes p{

	margin-bottom: 6px;

	color: #666;

}

.note {

	padding: 3px;

	-moz-border-radius: 4px;

	border-radius: 4px;

	background: #d1d1d1;

	color: #222;

}



span.vimeo {

	background: #9ACD32;

}



span.youtube {

	background: #FF3333;

}



/* The video block background */

.vimeo{

	background: #000000;

	width: 640px;

	height: 400px;

	overflow: hidden;

}

.youtube{

	background: #000000;

	width: 960px;

	height: 400px;

	overflow: hidden;

}





#panHolder {

	-webkit-box-shadow: 0 0 32px #666;

	-moz-box-shadow: 0 0 32px #666;

	box-shadow: 0 0 32px #666;

}



.grab{

	cursor: move;

	cursor: url(../assets/grab.png) 8 8, default;	

}



.grabbing{

	cursor: move;

	cursor: url(../assets/grabbing.png) 8 8, default;	

}





#product1 .bigImages ul li div.caption {

	position: absolute;

	top: 400px;

	left: 115px;

	width: 290px;

}





.panHolder {

	position: absolute;

	width: 640px;

	height: 400px;

	background: green;

	z-index: 1005;

}



.longText {

	clear: both;

	width: 960px;

	margin: 0px auto;

	margin-top: 100px;

}

.longText h3 {



}

.longText p {

	line-height: 150%;

	clear: left;

	margin: 4px 0;

}



.thumbnails {

	position: absolute;

	width: 400px;

	top: 430px;

	padding: 8px 14px 0 0px;

	color: #FFF;

	font-family: helvetica, "Lucida Grande", "Lucida Sans Unicode", verdana, arial, sans-serif;

}





.thumbnails ul li {

	width: 65px;

	height: 41px;

	display: block;

	float: left;

	border: 2px solid #333333;

	margin: 4px;

}



.thumbnails ul li.active {

	border: 2px solid #CCC;

}



.thumbnails h3 {

	font-size: 20px;

	padding: 4px;

}



.thumbnails p {

	font-size: 12px;

	margin: 8px 0;

	padding: 4px;

	clear: left;

}



.closeButton {

	background: url(../assets/close.png) no-repeat;

	width: 25px;

	height: 25px;

	position: absolute;

}



.closeOnLeft {

	top: -12px;

	left: -12px;

}



.closeOnRight{

	top: -12px;

	right: -12px;

}