/*
	Name: Soulizen Connected Creations
	Date: August 2011
	Website http://www.soulizen.com
*/

/* -----------------------------------------------------------------
	Contents of this file:
	-----------------------------------------------------------------
	1.	Global reset and site defaults
	    - Headings
		- Common Formatting
		- Links
	2. Main Structure
		- Header
		- Footer
	3. Navigation
	    - Main Nav
	    - Product - Side Nav
	4. Content
		- Body Content 
		- Banner
		- Left Panel
		- Right Panel

	5. Form Elements
	6. Picture Arrangement

/* ------------------------------------------------------------
   1. Global reset and site defaults
---------------------------------------------------------------*/
/* CSS Document */
@import url("table.css");

html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, li, ol, dl, address, img {
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
}

body {
	color:#666;
	font:normal 12px "Arial", Helvetica, sans-serif;
}

.bg-index{
	background:url(../i/bg-index.gif) left top repeat-x;
	}
	
.bg-inner{
	background:url(../i/bg-inner.gif) left top repeat-x;
	}


div, object, embed {
	outline:none;
}
/* Headings
---------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	font-family: "Arial", Helvetica, sans-serif;
}
h1 {
		/* define style*/
}

h2 {
	font:normal 18px "Arial";
	border-bottom:1px solid #e4e4e4;
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	color:#00baf2;
}


h3 {
		/* define style*/
}
h4 {
		/* define style*/
}

h5 {
		/* define style*/
}
h6 {
		/* define style*/	
}
/* Common Formatting
---------------------------------------------------------------*/
p {
	margin:0;
}
fieldset, img {
	border:0;
}

sup {
	position:relative;
	bottom:0.3em;
	vertical-align:baseline;
}
sub {
	position:relative;
	bottom:-0.2em;
	vertical-align:baseline;
}
.right {
	float:right;
}
.left {
	float:left;
}

#clearfloat {
	clear:both;
}

#row{
	width:100%;
	float:left;
}

.no-border{
	border:0!important;
	}
	
hr {
	width:100%;
	float:left;
	margin:15px 0;
	background-color:#e8e8e9;
	color:#e8e8e9;
	height:1px;
	border:none;
}

/* Links
---------------------------------------------------------------*/  
a:link, a:visited {
	text-decoration:none;
	color:#666;
}
a:hover {
	text-decoration:underline;
}

a.link-blue{
	color:#39c2ff!important;
	font:bold 10px "Arial";
	}

/* Indicate
---------------------------------------------------------------*/
#indicate {
	width:100%;
	float:left;
	color:#94a0a6;
	font:normal 8pt "Arial";
	padding:10px 0 36px 0;
}
#indicate a {
	color:#94a0a6;
}
.txt-indicate {
	font-weight:bold!important;
	
}


/* ------------------------------------------------------------
   2. Structure
---------------------------------------------------------------*/
/* Container*/

#container {
	width:970px;
	margin:0 auto;
}

/* Header*/
#header {
	width:970px;
	float:left;
}

.logo{
	width:211px;
	float:left;
	}

#banner{
	width:759px;
	float:left;
	}


/* Footer*/

#footer {
	width:970px;
	float:left;
	color:#8ca2af;
	font:normal 10px "Arial", Helvetica, sans-serif;
	padding:10px 0;
	background:url(../i/dash.gif) left top repeat-x;
	line-height:1.8em;
}

#footer .foot-left{
	width:700px;
	float:left;
	}
	
#foot-search{
	width:198px;
	float:right;
	padding:5px 0 0 0;
	text-align:right;
	}
	
.search-box{
	width:165px;
	float:left;
	border:0;
	height:20px;
	border:1px solid #dedede;
	margin:0 3px 0 0;
	}

#footer a {
	color:#94a0a6;
	text-decoration: none;
	margin:0 3px;
}
#footer a:hover {
	text-decoration:underline;
}


/* ------------------------------------------------------------
   4. Navigation
---------------------------------------------------------------*/
#nav{
	width:970px;
	float:left;
	list-style:none;
}

#nav li{
	padding:0;
	float:left;
}

a.btn-home { display: block; width: 60px; height:43px;background: url("../i/btn-home.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-home { background: url("../i/btn-home1.gif") 0 0 no-repeat;}

a.btn-corporate { display: block; width:133px; height:43px;background: url("../i/btn-corporate.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-corporate { background: url("../i/btn-corporate1.gif") 0 0 no-repeat;}

a.btn-core { display: block; width:131px; height:43px;background: url("../i/btn-core.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-core { background: url("../i/btn-core1.gif") 0 0 no-repeat;}

a.btn-investor { display: block; width:139px; height:43px;background: url("../i/btn-investor.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-investor { background: url("../i/btn-investor1.gif") 0 0 no-repeat;}

a.btn-media { display: block; width:113px; height:43px;background: url("../i/btn-media.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-media { background: url("../i/btn-media1.gif") 0 0 no-repeat;}

a.btn-career { display: block; width:85px; height:43px;background: url("../i/btn-careers.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-career { background: url("../i/btn-careers1.gif") 0 0 no-repeat;}

a.btn-csr { display: block; width:62px; height:43px;background: url("../i/btn-csr.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-csr { background: url("../i/btn-csr1.gif") 0 0 no-repeat;}

a.btn-gallery { display: block; width:113px; height:43px;background: url("../i/btn-gallery.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-gallery { background: url("../i/btn-gallery1.gif") 0 0 no-repeat;}

a.btn-contact { display: block; width:93px; height:43px;background: url("../i/btn-contact.gif") 0 0 no-repeat;text-decoration: none;}
a:hover.btn-contact { background: url("../i/btn-contact1.gif") 0 0 no-repeat;}
	
/*side nav*/
#sidenav {
	width:162px;
	float:left;
	padding:0 0 0 12px;
}
#sidenav ul {
	list-style:none;
	padding:0;
	margin:0!important;
	border-top:1px solid #f4f4f4;
}
#sidenav li {
	list-style:none;
	padding:12px 0 12px 5px;
	border-bottom:1px solid #f4f4f4;
}
#sidenav li a {
	color:#666;
	display:block;
	
}
#sidenav li a:hover {
	text-decoration:none!important;
	color:#e42031;
}
#sidenav li a:focus {
	text-decoration:none;
	color:#e42031;
}
#sidenav li a.lv0 {
	color:#666;
}
#sidenav li a.selected {
	color:#e42031!important;
}
#sidenav li a.perm {
	color:#e42031!important;
}
#sidenav li a:hover.lv0 {
	color:#e42031;
}
#sidenav li a.lv1 {
	color:#666;
}
#sidenav li a:hover.lv1 {
	color:#8557C5!important;
}
#sidenav .submenu {
	margin:0;
	padding:10px 0 0 0;
	font:normal 12px "Arial"!important;
}
#sidenav .submenu div {
	padding:5px 0 5px 0;
	
}
#sidenav .submenu div a {
	color:#828282;
}
#sidenav .submenu div a:hover {
	color:#8557C5;
}


/* ------------------------------------------------------------
   5. Content
---------------------------------------------------------------*/
/* banner*/
#banner-holder{
	width:970px;
	float:left;
	padding:3px 0 0 0;
}

#banner-ctrl{
	width:164px;
	float:left;
	list-style:none;
	padding:0 1px 0 0;
	}
	
#banner-ctrl li{
	width:164px;
	height:64px;
	padding:0 0 1px 0;
	}
	
#banner-slide{
	float:left;
	width:804px;
	}
	

#content-holder{
	width:970px;
	float:left;
	}

.bg-content-index{
	background:url(../i/bg-map.gif) left top no-repeat;
	}

.bg-content-inner{
	border-top:1px solid #f4f4f4;
	padding:30px 0 20px 0;
	}

/* index*/	
#index-left{
	width:580px;
	float:left;
	padding:30px 0 0 170px;
	}
	
#index-sb{
	width:580px;
	float:left;
	list-style:none;
	padding:35px 0 20px 0;
	}
	
#index-sb li{
	width:173px;
	float:left;
	margin:0 15px 0 0;
	*margin:0 12px 0 0;
	}
	
#index-sb li a:hover{
	text-decoration:none!important;
	}
	
.img-sb{
	border:1px solid #f3f3f3;
	margin:0 0 5px 0;
	}
	
.index-news-title{
	width:98px;
	float:left;
	clear:right;
	padding:0 0 10px 0;
	}	
	
#index-news{
	width:187px;
	float:left;
	list-style:none;
	padding:25px 10px 22px 23px;
	background:#f7f7f7;
	}
	
#index-news li{
	padding:5px 0;
	font:normal 11px Tahoma, Geneva, sans-serif;
	float:left;
	}
	
#index-news li.readmore{
	float:left;
	width:187px;
	padding:10px 0;
	}
	
#index-news li p.in-date{
	float:left;
	width:187px;
	color:#4ac7ff!important;
	font-weight:bold;
	}
	
#index-news li a{
	float:left;
	width:187px;
	line-height:1.5em;
	}
	
/*inner*/
#panel-left{
	width:213px;
	float:left;
	padding:50px 0 0 0;
	}
	
#panel-right{
	width:757px;
	float:left;
	}
	
#body-txt{
	width:99%;
	float:left;
	line-height:1.4em;
	}
	
#bod{
	width:94%;
	float:left;
	padding:3%;
	margin:0 0 1px 0;
	}

.bg-bod{
	background:#f5f6f7;
	}
	
.bod-img{
	float:left;
	padding:0 23px 0 0;
	}

#bod div.bod-txt{
	overflow: hidden;
	padding:10px 0 0 0;
	}
	
*html#bod div.bod-txt{float: left;padding:10px 0 0 0;}
	
#news{
	float:left;
	width:495px;
	background:#f7f7f7;
	padding:116px 0 20px 0!important;	
	}
	
#news h1{
	padding:0 0 0 20px!important;
	width:375px!important;
	float:none!important;
	}
	
#news-holder{
	float:left;
	width:455px;
	padding:0 20px;
	}


#news-listing {
	width:100%;
	float:left;
	list-style:none;
	border-top:1px solid #f4f4f4;
	margin:0!important;
}
#news-listing li {
	width:98%;
	padding:10px 1%;
	border-bottom:1px solid #f4f4f4;
	float:left;
	display:block;
}
#news-listing li p {
	width:19%;
	float:left;
	color:#8c8c8c;
	font-style:italic;
}
#news-listing li span {
	width:80%;
	float:left;
}
#news-listing li a {
	color:#3c2b0d;
}
#news-listing li a:hover {
	color:#4ac7ff;
}
#news-listing li:hover {
	background:#f5f6f7;
}



.news-date {
	width:100%;
	float:left;
	padding:0 0 5px 0;
	font:normal 11px Arial, Helvetica, sans-serif;
	color:#8c8c8c;
}



#gallery-listing{
	width:757px;
	float:left;
	list-style:none;	
}

#gallery-listing li{
	width:175px;
	height:185px;
	float:left;
	margin:0 12px 15px 0;
	text-align:center;
}

#gallery-listing li img{
	margin:0 0 5px 0;
	}
	
#gallery-listing li a:hover{
	text-decoration:none!important;
	}

/* ------------------------------------------------------------
   5. Form Elements
---------------------------------------------------------------*/
.required-field{
	font:normal 70% "Verdana",Arial, sans-serif;
	padding:25px 0 0 0;	
}

#form {
	float:left;
	width:100%;
}

#form label {
	display: block;
	float: left;
	width:22%;
	padding:3px 10px 0 0;
}

#form .f-row {
	width:100%;
	float:left;
	margin:4px 0;
}

#form .f-row p{
	overflow: hidden;
	}
	
*html #form .f-row p{float: left;}

#form .f-row-line {
	width:100%;
	float:left;
	margin:8px 0;
	border-top:1px solid #e5e2e2;
	height:1px;
}

.textarea {
	width:200px;
	border:1px solid #ffffff;
	background:#ffffff;
	font:normal 12px "Arial", Helvetica, sans-serif;
	color:#666;
}

.input {
	border:1px solid #ffffff;
	height:18px;
	width:200px;
	color:#666;
}

.select{
	border:1px solid #e1e1e1;
	width:200px;
	color:#666;
}

.btn-all{
	border:none;
	background:url(../i/btn-face.gif) left top no-repeat;
	width:74px;
	text-align:center;
	height:24px;
	vertical-align:middle;
	font:bold 11px "Arial", Helvetica, sans-serif;
	color:#fff;
	}


/* ------------------------------------------------------------
   6. Picture Arrangement
---------------------------------------------------------------*/
.b-20px{
	margin:0 0 20px 0;
	}
	
.l-title-20px{
	margin:0 0 0 20px;
	}
	
.tb1{
	margin:5px 0 15px 0;
	}
	
.tb2{
	margin:5px 0 15px 0;
	border:1px solid #f6f6f6;
	background:#ffffff;
	padding:3px;
	}
	
.b-10px{
	margin:0 0 10px 0;	
	}
	
.t-10px{
	margin:10px 0 0 0;	
	}

/* ------------------------------------------------------------
  7. Popup
---------------------------------------------------------------*/
#popup{
	width:400px;
	float:left;
	padding:15px;
}


/* ------------------------------------------------------------
  7. Slider
---------------------------------------------------------------*/


#home-slider {
	width:710px;
	float:left;
}

#slider-content {
	width:100%;
	float:left;
}
.slider-ctrl {
	padding:15px 0 0 0;
	text-align:right;
}
#slider-ctrl {
	list-style:none;
	padding:0;
	margin:0;
}
#slider-ctrl li {
	list-style:none;
	width:17px;
	height:17px;
	margin:0 5px 0 0;
	text-align:center;
	display:inline;
	float:right;
}
#slider-ctrl li a {
	background:url(../i/slider-no1.gif) center top no-repeat;
	color:#666;
	display:block;
}
#slider-ctrl li a:hover {
	background:url(../i/slider-no2.gif) center top no-repeat;
	color:#fff;
}
#slider-ctrl li a.selected {
	background:url(../i/slider-no2.gif) center top no-repeat;
	color:#fff;
}

#slider-ctrl a { margin: 0 2px; padding: 3px 5px; border: 1px solid #0075CE; background: #0075CE; text-decoration: none; color:#fff }
#slider-ctrl a.activeSlide { background: #dfdfdf; color:#555;border: 1px solid #ddd; }
#slider-ctrl a:focus { outline: none; }