/*
*************************************************

file : screen.css
client : HiClone
author : Karl BRIGHTMAN
date created: 21st February 2007
the song : Silverchair - Emotion Sickness
on this day : 1804 - Built by Richard Trevithick, the first self-propelled steam engine or locomotive first ran in Wales.

*************************************************
*/

/*-------------------------------------------    
    Imports
-------------------------------------------*/
@import "misc.css";
@import "enquiryform.css";
@import "thickbox.css";

/*-------------------------------------------    
    Basic Selectors
-------------------------------------------*/
* { line-height: 1.4em; margin: 0; padding: 0; }
body {
	background: #fff url(../images/core/body_bg.jpg) no-repeat center top;
	font: 11px normal "Arial", Helvetica, sans-serif;
}
img {border:none;}

p { margin-bottom: 1.4em; }

/*-------------------------------------------    
    Structure
-------------------------------------------*/
#container {
	margin: 0 auto;
	width: 760px;
}

/*-------------------------------------------    
    Header
-------------------------------------------*/
#header {
	background: url(../images/core/header_bg.jpg) no-repeat 0 0;
	height: 303px;
	position: relative;
	width: 760px;
}

#header #logo {
	display: block;
	height: 228px;
	left: 65px;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	top: 64px;
	width: 298px;
}

/*-------------------------------------------    
    Navigation
-------------------------------------------*/
#navigation {
	background: url(../images/core/navigation_bg.jpg) no-repeat 0 0;
	height: 83px;
	width: 760px;
}

#navigation ul { list-style: none; margin: 0 33px 0 34px; }

#navigation ul li {
	float: left;
}

#navigation ul li a {
	display: block;
	height: 57px;
	overflow: hidden;
	text-indent: -9999px;
}
#navigation ul li a:hover, #navigation ul li a:focus { background-position: 0 -57px !important; }

#navigation ul li a#nav_home { background: url(../images/navigation/home.gif) no-repeat 0 0; width: 72px; }
#navigation ul li a#nav_profile { background: url(../images/navigation/profile.gif) no-repeat 0 0; width: 93px; }
#navigation ul li a#nav_what_is_hiclone { background: url(../images/navigation/what_is_hiclone.gif) no-repeat 0 0; width: 139px; }
#navigation ul li a#nav_faqs { background: url(../images/navigation/faqs.gif) no-repeat 0 0; width: 77px; }
#navigation ul li a#nav_testimonials { background: url(../images/navigation/testimonials.gif) no-repeat 0 0; width: 127px; }
#navigation ul li a#nav_gallery { background: url(../images/navigation/gallery.gif) no-repeat 0 0; width: 82px; }
#navigation ul li a#nav_contact_us { background: url(../images/navigation/contact_us.gif) no-repeat 0 0; width: 103px; }

/*-------------------------------------------    
    Content Container
-------------------------------------------*/
#content_container {
	background: url(../images/core/content_container_bg2.gif) repeat-y 0 0;
	padding: 0 23px 0 25px;
	position: relative;
	width: 712px;
}
body#home #content_container { background: url(../images/core/content_container_bg.gif) repeat-y 0 0; }

#content_bg_top_left, #content_bg_top_right, #content_bg_btm_left, #content_bg_btm_right { height: 52px; position: absolute; }
#content_bg_top_left, #content_bg_top_right { top: 0; }
#content_bg_top_right, #content_bg_btm_right { right: 0; width: 23px; }
#content_bg_btm_left, #content_bg_btm_right { bottom: 0; }
#content_bg_top_left, #content_bg_btm_left { left: 0; width: 25px; }
#content_bg_top_left { background: url(../images/core/content_container_bg_tl.jpg) no-repeat 0 0; }
#content_bg_top_right { background: url(../images/core/content_container_bg_tr.jpg) no-repeat 0 0; }
#content_bg_btm_left { background: url(../images/core/content_container_bg_bl.jpg) no-repeat 0 0; }
#content_bg_btm_right { background: url(../images/core/content_container_bg_br.jpg) no-repeat 0 0; }
#content_bg_fix { clear: both; }



#content_bg_btm_left, #content_bg_btm_right { bottom: 0;  }


/*-------------------------------------------    
    Left Content
-------------------------------------------*/
#content_left {
	color: #424242;
	float: left;
	font-size: 1.2em;
	padding: 24px;
	width: 664px;
	list-style-position: inside;
	list-style-type: square;
}
body#home #content_left { padding: 24px 15px 15px 24px; width: 377px; }

ul.gallery { width: 660px; height: auto; list-style: none; display: inline-block; padding: 0; margin: 0; }
ul.gallery li { display: block; float: left; margin: 0 13px 15px 0; }
ul.gallery li a { width: 200px; height: 150px; border: 2px solid #ccc; display: block; float: left; margin: 0; text-decoration: none;}
ul.gallery li a:hover { border: 2px solid #1f8a59; }

#content_left h1 {
	color: #000;
	font-size: 1.8em;
	font-weight: bold;
	margin-bottom: .5em;
	text-transform: uppercase;
}

#content_left h2 {
	color: #13633e;
	font-size: 1.3em;
	line-height: 1.3em;
	margin-bottom: .5em;
}

#content_left h3 {
	color: #13633e;
	font-size: 1.2em;
	line-height: 1.3em;
	margin-bottom: .25em;
}

#content_left h4 {
	color: #000;
	font-size: 1.1em;
	line-height: 1.3em;
}

#content_left h5 {
	color: #13633e;
	font-size: 1.1em;
	line-height: 1.3em;
}

#content_left span.date {
	color: #90AC96;
}

#content_left h5.testimonial_user { margin-bottom: 1em; }

#content_left a { color: #13633e; text-decoration: underline; }
#content_left a:hover, #content_left a:focus { color: #000; }

dl.faq_list dt { color: #13633e; }
dl.faq_list dd { margin-bottom: 1em; }

div.image_center { margin: 1em auto; text-align: center; }

div.letters h5 {
	margin-top: -1em;
	margin-bottom: 1em;
}

/*-------------------------------------------    
    Right Content
-------------------------------------------*/
#content_right {
	display: none;
	float: right;
}
body#home #content_right {
	display: block;
	width: 296px;
}

#content_right #right_red_dot {
	background:#146640 url(../images/core/right_red_dot.jpg) no-repeat;
	width: 296px;
	height:422px;
	padding:90px 0 0 0; 
	margin:0;
}

#content_right #right_red_dot img {padding:0; margin:0; border:none;}

/*-------------------------------------------    
    Footer
-------------------------------------------*/
#footer {
	background: url(../images/core/footer_bg.jpg) no-repeat 0 0;
	font-size: 1.2em;
	padding: 50px 23px 67px 25px;
	text-align: center;
}

#footer a { color: #5e5e5e; text-decoration: underline; }
#footer a:hover, #footer a:focus { color: #000; }

#footer a img { border: 0; }

#footer_navigation a { margin: 0 .25em; }