/*
-----------------------------------------------
main.css

Main stylesheet for screen media
Site:		www.mojatv.com
Author:  reefnet <www.reefnet.co.uk>
-----------------------------------------------
*/

/**
 * import additional stylesheets
 */
@import url('reset.css');
@import url('fixes.css');


/* =typography & layout
******************************************************************************/

html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

body {
	font: 13px/1.4em trebuchet MS, verdana, arial, sans-serif;
	color: white;
	/*background : #000 url(/img/background.jpg) no-repeat top left;*/
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	line-height: 1.4em;
}

#bg_image {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
	
#scrollable {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 2;
}	

a		{color: white; text-decoration: underline; font-weight: normal;border: none;outline-style:none;}
a:link		{color: white; text-decoration: underline; font-weight: normal;}
a:visited	{color: white; text-decoration: underline; font-weight: normal;}
a:hover		{color: white; text-decoration: underline; font-weight: normal; color: #555555;}

/* =structure
******************************************************************************/

div#wrapper {
  	width: 908px;
	background : transparent url(/img/blktrans.png) repeat top left;
	padding: 0px 16px 0px 16px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	border: 0px solid black;
}

/* =header
******************************************************************************/

div#header {
	position: relative;
	width: 908px;
	height: 160px;
}

div#header #logo {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 10;
}

div#header #strap {
	position: absolute;
	top: 55px;
	left: 460px;
}


/* =navigation
******************************************************************************/

#navigation {
	position: relative;
	top: 101px;
	height: 29px;
	background: #252525 url(/img/navback.png) no-repeat top right;
	border: 1px solid #3e3e3e;
	padding-top: 9px;
	padding-left: 460px;
	font-size: 1.3em;
}

#navigation li {
	text-align: center;
	list-style: none;
	margin-right: 30px;
	float: left;
}

#navigation li a {
	text-align: center;
	display: block;
	color: white;
	text-decoration: none;
	letter-spacing: 1px;
}

#navigation li a:hover {
	color: #555555;
}


/* =content
******************************************************************************/

div#content {
	background: #252525 url(/img/topleftback.png) 0 0 no-repeat;
	padding: 34px;
	margin-top: 2px;
	border: 1px solid #3e3e3e;
	min-height: 400px;
}

div#content h1 {
	background: url(/img/filmicon.png) 0 0 no-repeat;
	letter-spacing: 0.1em;
	font-weight: normal;
	font-size: 1.4em;
	color: #08b5da;
	padding: 4px 0px 10px 30px;
	margin: 10px 0 0;
	height: 25px;
	clear: both;
}

div#content h2 {
	background: url(/img/headerback.png) top right no-repeat;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 1em;
	padding: 4px;
	margin: 0;
	height: 25px;
	text-align: right;
	clear: both;
}


div#content p {
	padding: 0.2em 0 0.2em 0;
}

div#content div.product {
	float: left;
	margin-bottom: 20px;
}

div#content p.big {
	font-size: 1.2em;
	line-height: 1.5em;
	letter-spacing: 0.2em;
	
}

div#content img {
	border: 6px solid white;
}


/* =right column
******************************************************************************/

div#rightcol {
	float: right;
	width: 190px;
	background: #252525 url(/img/rightback.jpg) 0 0 no-repeat;
	padding: 14px 8px 8px 30px;
	margin-top: 2px;
	min-height: 541px;
}

div#rightcol h2 {
	background: url(/img/abouticon.png) 0 0 no-repeat;
	font-weight: normal;
	text-transform: capitalize;
	font-size: 1.2em;
	letter-spacing: 0.1em;
	color: #08b5da;
	padding: 4px 0px 10px 30px;
	margin: 0px;
	height: 25px;
	text-align: left;
	width: 190px;
	float: none;
}

div#rightcol h3 {
	background: url(/img/filmicon.png) 0 0 no-repeat;
	letter-spacing: 0.1em;
	font-weight: normal;
	font-size: 1.2em;
	color: #08b5da;
	padding: 4px 0px 10px 30px;
	margin: 10px 0px 0px 0px;
	height: 25px;
	text-align: left;
	width: 190px;
	float: none;	
}

div#rightcol img {
	border: none;
}

/* =left column
******************************************************************************/

div#leftcol {
	float: left;
	width: 560px;
}

/* =footer info
******************************************************************************/


div#footer {
	background: url(/images/botback.jpg) no-repeat top left;
	padding: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}


div#footer .box {
        float: left;
	width: 262px;
	padding: 4px;
	margin-right: 10px;
}

div#footer .box p {
	font-size: 1em !important;
	margin: 0;
	line-height: normal;
        color: white;
}


div#footer  a:hover {
	color: #959595;
	}

/* =extras
******************************************************************************/

.left{
	float: left;
	margin: 0px 12px 6px 0px;
}

.right{
	float: right;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */