@charset "utf-8";

/* reset */
*{ margin:0; padding:0; outline:0; }
img { border: 0; }
.clear { clear: both; }

/* highlighting color */
::selection { background: #EAA0FA; /* Safari */ }
::-moz-selection { background: #EAA0FA; /* Firefox */ }

body { 
	font: 0.74em Arial, Verdana, Arial, Helvetica, sans-serif;
	background: #f4f4f4 url(../images/bg_new.png) repeat-x;
	color: #777;
	line-height: 1.6em;
}

/* typography */
a { 
	color: #3F3E44;
	text-decoration: none; 
}
a:hover {
	color: #000;
}

p {
	margin: 0 0 12px; 
}

/* headings */
h1 {
	clear: both;
	color: #fff;
	font-size: 1.7em;
	float: left;
}
h1 span {
	color: #D1D1D3;
}
h1 a
{
	color: #fff;
}

h2 {
	clear: both;
	float: left;
	font-size: 2.94em;
	color: #fff;
	line-height: 1.6em;
	position: absolute;
	top: 75px;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
}

h3 {
	font-size: 1.4em;
	color: #424248;
	margin: 0 0 10px;
}

/* top */
#top {
	height: 68px;
}

/* menu */
#menu {
	float: right;
	padding: 20px 0 0;
}
#menu li {
	display: inline;
	list-style: none;
	font-size: 1.1em;
}
#menu li a {
	float: left;
	margin: 0 0 0 15px;
	padding: 0 0px 10px;
	color: #A09FA8;
}
#menu li a:hover, #menu li a.current {
	background: url(../images/tab.png) repeat-x left bottom;
	font-weight: bold;
}
#menu li a.current {
	color: #fff;
}

/* content */
#content { 
	width: 800px;
	margin: 15px auto;
}

/* logo */
#logo {
	padding: 20px 0 0;
}

/* pitch */
#pitch {
	clear: both;
	text-align: center;
	height: 70px;
	padding: 20px 0 0;
	margin: 0 0 60px;
	/*background: url(../images/pitch.png) no-repeat;*/
}

/* countdown */
#countdown { 
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
	font-size: 2em; 
	letter-spacing: -0.2px;
	height: 30px;
}

/* columns */
#cols {
	clear: both;
	margin: 15px 0 45px;
	border-bottom: 3px double #ddd;
	background: url(../images/shade.png) no-repeat center bottom;
	border-top: 4px double #DDDDDD;
	padding-top: 15px;
}
.col { 
	float: left; 
	width: 239px; 
	margin: 0 25px 0 0; 
	padding: 0 15px 20px 0; 
	
}
.col.last { 
	margin-right: 0; 
	border: 0; 
	padding-right: 0; 
}



/* screenshots */
#screenshots { clear: both; position: relative; margin: 0 0 15px; padding-top:60px; background: url("../images/shade.png") no-repeat scroll center bottom transparent; border-bottom: 3px double #DDDDDD;}
#screenshots .scrollable { position:relative; overflow:hidden; width: 800px; height:368px; }
#screenshots .scrollable .items { width:20000em; position:absolute; }
	
/* screenshot items */
#screenshots .items ul{ list-style: none; float: left; }
#screenshots .items ul li { float: left; border-right: 1px dotted #DDDDDD; margin: 0 10px 0 10px;align:center; }		
#screenshots .items ul li a{ float: left; width: 252px; height: 160px; padding: 0 0 0 0; overflow: hidden; }
#screenshots .items ul li a.more { 
	display: block;
	position: relative;
	color: #ddd; 
	background: url(../images/more.png) no-repeat; 
	text-align: center; 
	width: 87px; 
	height: 21px; 
	padding: 3px 0 0; 
	font-size: .84em; 
	text-transform: uppercase; 
}
#screenshots .items ul li a.more:hover { 
	background-position: left bottom; 
	color: #fff; 
}
#screenshots .items ul li span { float: left; width: 252px; height: 160px; padding: 10px 0 0 7px; overflow: hidden; background: url(../images/thumb_frame_large.jpg) no-repeat; }

/* screenshot arrows */
#screenshots a.arrows { display: block; width: 12px; height: auto; text-indent: -999999px; top: 216px; }
#screenshots a.prev {  background: url(../images/slider-arrow-prev.jpg) no-repeat; background-position: center right; position: absolute; left: -50px; top:195px; padding-top:91px; padding-bottom:100px;padding-left:15px;padding-right:15px;}
#screenshots a.next { background: url(../images/slider-arrow-next.jpg) no-repeat;background-position: center left; position: absolute; right: -50px; top:195px; padding-top:91px; padding-bottom:100px;padding-left:15px;padding-right:15px;}
#screenshots a.prev:hover { background: url(../images/slider-arrow-prev-active.jpg) no-repeat; background-position: center right; }
#screenshots a.next:hover { background: url(../images/slider-arrow-next-active.jpg) no-repeat;  background-position: center left;}
		
#screenshots h3 { margin: 0 0 20px; }

/* main content (left side) */
#main { 
	float: right; 
	width: 500px; 
	margin: 40 0 0px; 
}
#main p strong {
	color: #3F3E44;
}

/* side */
#side { 
	float: left; 
	width: 265px; 
	margin: 0 0 20px; 
}

/* side twitter box */
.boxtop {
	background: url(../images/boxtop.png) no-repeat; 
	padding: 4px 0;
}
.boxmiddle {
	background: url(../images/boxmiddle.png); 
	padding: 0 4px; 
	height: 220px;
}
.boxbottom {
	background: url(../images/boxbottom.png) no-repeat left bottom; 
	padding: 5px 0;
}

/* footer */
#footer {
	clear: both;
	padding: 0px 0 20px;
	color: #999;
	text-shadow: 1px 1px 1px #fff;
}
#hello {
top:-30px;
}
#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     background-color: #000000;
     opacity: 0.8;
}
#player2
{
	 visibility: hidden;
     position: absolute;
     text-align:center;

	 opacity: 1;
	 left:26%;
	 z-index: 1001;
}

span.framed_image {
    background: url("../images/thumb_frame_large.jpg") no-repeat scroll 0 0 transparent;
    float: left;
    height: 160px;
    margin: 0 0px 0 0;
    overflow: hidden;
    padding: 10px 0 0 10px;
    width: 172px;
}
span.framed_image img
{
	height:134px;
	width:236px;
}
#scroller {
    background: url("../images/thumb_frame_large_ticker.jpg") no-repeat scroll 0 0 transparent;
    float: left;
    height: 255px;
    margin: 0 0px 0 0;
    overflow: hidden;
    padding: 10px 0 0 10px;
    width: 172px;
}
#close_area
{ 
	visibility: hidden;
	clear:both;
	z-index:1002;
}
#close_button
{
	float:right;
	background: url("http://localhost:8888/fineproduct/images/fancybox/fancybox.png") repeat scroll -40px 0 transparent;
    height: 27px;
    width: 30px;
    z-index:1001;
}
#patch-right
{
	border-left: 1px dotted darkgray;
    float: right;
    margin-left: -18px;
    margin-top: 10px;
    padding-left: 4px;
	font-weight: bolder;
}
#patch-left
{
    float: right;
    margin-top: 10px;
    padding-right: 23px;
    font-weight: bolder;
}
#patch-left div
{
	float:right;
	clear:right;
}

/* more button */
.more { 
	display: block;
	position: relative;
	color: #ddd; 
	background: url(../images/more.png) no-repeat; 
	text-align: center; 
	width: 87px; 
	height: 21px; 
	padding: 3px 0 0; 
	font-size: .84em; 
	text-transform: uppercase; 
}
.more:hover { 
	background-position: left bottom; 
	color: #fff; 
}
.more_expanded
{
display: block;
	position: relative;
	color: #ddd; 
	background: url(../images/more_expanded.png) no-repeat; 
	text-align: center; 
	width: 100px; 
	height: 21px; 
	padding: 3px 0 0; 
	font-size: .84em; 
	text-transform: uppercase; 
}

p.more_p {
	position: relative;
	bottom: 0px;
	padding-top: 12px;

}
p.boxed_text {
	color: WhiteSmoke;
    margin: 0 0 12px 8px;
}
p.boxed_text a {
	color: WhiteSmoke;
}
ul.boxed
{
	padding-left:25px;
	color: WhiteSmoke;
    margin: 0 0 12px 8px;
}
#scroller #list li a:hover{
	text-decoration: underline;

}
#scroller #list li a strong {
	font-size: 13px;
}
div.pic-link {
	display:block; /* allow height and width to be specified - not needed if floated */
	height:auto; /* match img */
	width:auto; /* match img */
	position:relative; /* so children of .pic-link can be positioned absolutely in relation it */ 
	color:blue;
	}
 
div.pic-link-hover {
	color:green; /* IE6 requires a change of some kind to occur on a:hover for hover to work on a.pic-link:hover span, otherwise this could be applied to that selector */
	}
 
div.pic-link a img {
	border:none;
	vertical-align:bottom; /* removes the space reserved for text descenders */
	}
 
div.pic-link a span {
	position:absolute;
	bottom:0;
	right:0;
	width:96%;
	padding:0.5em 2%; /* 2% left + 2% right + 96% width = 100% */
	background:rgba(100, 100, 100, 0.2);
	color: grey;
	text-align:right;
    display: block;
    top:0;
    font-weight: bold;

	}
 
div.pic-link-hover a span {
		background:rgba(100, 100, 100, 0.4);
	}
.framed_image div {
	background:transparent url(../images/play48.png) no-repeat scroll 0pt 50%;
	cursor:pointer;
	color:#000000;
	display:block;
	height:48px;
	position:relative;
	text-align:center;
	text-decoration:none;
	vertical-align:bottom;
	width:48px;
	opacity: 0.3;
	left: 89px;
	top: -96px;
}
.framed_image div:hover  {
	background:transparent url(../images/play48.png) no-repeat scroll 0pt 50%;
	cursor:pointer;
	color:#000000;
	display:block;
	height:48px;
	position:relative;
	text-align:center;
	text-decoration:none;
	vertical-align:bottom;
	width:48px;
	opacity: 0.7;
	left: 89;
	top: -96px;
}
.movie_image div {
	background:transparent url(../images/play48.png) no-repeat scroll 0pt 50%;
	cursor:pointer;
	color:#000000;
	display:block;
	height:48px;
	position:relative;
	text-align:center;
	text-decoration:none;
	vertical-align:bottom;
	width:48px;
	opacity: 0.3;
	left: 106px;
	top: -116px;
}
.movie_image div:hover  {
	background:transparent url(../images/play48.png) no-repeat scroll 0pt 50%;
	cursor:pointer;
	color:#000000;
	display:block;
	height:48px;
	position:relative;
	text-align:center;
	text-decoration:none;
	vertical-align:bottom;
	width:48px;
	opacity: 0.7;
	left: 106;
	top: -116px;
}

div#IE_warninng	{
	background-color: Sienna;
    color: window;
    height: auto;
    left: 14%;
    position: absolute;
    text-align: center;
    top: 0;
    width: 840px;
    visibility:none;
    z-index: 1010;
}
div#IE_warninng a {
	font-weight: bold;
	color: Orange;
}
a#vise:hover {
	text-decoration: underline;
}