/*******************************************************************************
********************************************************************************
	Project		: Logikana
	CSS 		: Danish Adeel
	Start date	: 06-06-08 

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

/*----Universal Items----*/

* {
	padding: 0;
	margin: 0;
	border: 0;
	outline:0;
	text-decoration:none;
}
html, body {
	min-height: 100%;
	padding-bottom: 1px;
}
body{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:62.5%;
	background:#fff url(bg.jpg) repeat-x;
}
h1{
	font:normal bold 1.6em "Franklin Gothic Medium";
	margin: 5px 0px;
	color:#666;
}
h1 span{
	color:#fa9403;
}
h2{
	font:normal bold 1.4em "Franklin Gothic Medium";
	color:#2D8ACF;
	padding: 5px 0px 5px 0px;
}
h3{
	font:normal bold 1.2em Arial, Helvetica, sans-serif;
	color:#244d6b;
	padding: 5px 0 0;
}
h4{
	color:#fff;
	font-size:1.3em;
}
p {
	margin:6px 0 10px 0;
	font-size:1.2em;
	line-height:20px;
	color:#666;
}
ol {
	margin:10px 0 10px 27px;
	list-style-position:outside;
	padding-bottom:10px;
	font-size:1.1em;
	color:#fff;
}
ol li {
	list-style-type:decimal;
	background-image:none;
	padding:0px;
}
a:link,
a:visited{
	color:#2D8ACF;	
}

/*----Structure----*/

#main {
	width:948px;
	margin:15px auto 0;
	overflow: hidden;
	height: 100%;
	position:relative;
	background:#fff url(bg-main.gif) repeat-y;
}
.logo{
	margin:40px 0 45px 55px;
}
* html .logo{
	margin:40px 0 30px 55px;
}
#header{
	width:948px;
	height:335px;
	padding:5px 0 0;
	background:url(head.jpg);
	float:left;
}
*html #header{
	margin:15px 0 0 -5px;
}
#header img{
	position:absolute;
	top:73px;
	left:28px;
}

/*-------- Top Links ---------*/

#top_links {
	list-style:none;
	padding:10px 20px 0 0;
	float: right;
}
#top_links li{
	list-style:none;
	float:left;
	padding:0 5px;
	border-right:1px dotted #444;
}
#top_links li a:link,
#top_links li a:visited{
	font-size:1.1em;
	color:#666;
	display:block;
	padding:0 5px;
	height:13px;
	float:left;
}
#top_links li a:hover,
#top_links li a:focus{
	color:#0066cc;
}
#top_links .last{
	border:none;
}

/*---------  Navigation ----------*/


.navi{
	list-style:none;
	padding:0 0 0 9px;
	height:43px;
	float:left;
}
#slider .navi{
	position:absolute;
	top:-35px;
	left:20px;
	z-index:10;
	font-weight:bold;
}
.navi li{
	display:inline;
	float:left;
	background:url(nav-bg.gif);
	color:#999;
}
.navi li a:link,
.navi li a:visited{
	float:left;
	display:block;
	padding:13px 15px 0 15px;
	height:30px;
	background:url(nav-bg.gif);
	font-size:1.1em;
	color:#fff;
}
.navi li a.selected:link,
.navi li a.selected:visited{
	color:#f39d08;
	/*background:url(nav-bg.gif) 0 1px;*/
}
.navi li a:hover,
.navi li a:focus,
.navi li span{
	font-size:1.1em;
	color:#f39d08;
}
.navi .last{
	padding:0 9px 0 0;
	background:url(nav-end.gif) no-repeat right;
}


/*-- Navigation 2 --*/

#navi2{
	background:url(bg-nav.gif);
	width:948px;
	height:93px;
	float:left;
}

/*----- Content Items ------*/

#cntnr{
	width:865px;
	margin:-10px 0 0 70px;
	background:url(top.gif) no-repeat;
	float:left;
}
* html #cntnr{
	margin:-10px 0 0 35px;
}
.content{
	width:580px;
	float:left;
	text-align:left;
	padding:10px 20px 10px 20px;
	position:relative;
	background:url(sep2.gif) repeat-y right;
	margin:10px 0 0;
	min-height:370px;
}
* html .content{
	height:370px;
}
.content img{
	border:1px solid #C5C5C5;
	padding:2px;
}
.content a,
.content a:link,
.content a:visited {
	color:#2D8ACF;
	text-decoration:none;
}
.content a:hover,
.content a:focus,
.content a:active {
	color:#244d6b;
	text-decoration:underline;
}
.content ul{
	padding:0 0 10px 5px;
	list-style:none;
	color:#666;
}
.content ul li{
	padding:5px 5px 5px 15px;
	font-size:1.1em;
	background:url(bullet.gif) 0px 10px no-repeat;
}
.content ul li a:link,
.content ul li a:visited{
	font-size:1em;
}

/*----- Right Column ------*/

#rit_col{
	width:293px;
	padding:10px 20px 0 15px;
	float:right;
}
#rit_col ul{
	width:200px;
	list-style:none;
	margin: 0 0 10px 0;
}
#rit_col li {
	background:url(shade.gif) no-repeat;
	display:block;
	font-size:1em;
	padding:0px;
}
#rit_col li.start {
	background:none;
}
#rit_col li a,
#rit_col li a:link,
#rit_col li a:visited,
#rit_col li span{
	color:#7c7c7c;
	display:block;
	font:normal normal 1.1em Verdana;
	padding:10px 0;
	width:auto;
}
#rit_col li a:hover,
#rit_col li a:focus,
#rit_col li a:active,
#rit_col li span,
#rit_col li.active a,
#rit_col li.active a:link,
#rit_col li.active a:visited{
	color:#026FC8;
	text-decoration:none;
}
.box{
	background:url(sep2.gif) repeat-x bottom;
	padding:10px 0;
	text-align:center;
	float:left;
}
.box h1{
	text-align:left;
}

/*-------- Navi Right --------*/

.colm_rit {
	float: right;
	height:auto;
	margin:10px 0 0 0;
	padding:0 10px 15px;
	width: 260px;
	background:url(sep.gif) repeat-y left;
	position:relative;
}
.colm_rit img{
	margin:0 10px 5px 0;
	float:left;
	border:2px #ccc solid;
	padding:2px;
}
#colm_rit ul {
	list-style:none;
	float: left;
}
#colm_rit li {
}
#colm_rit li a,
#colm_rit li a:visited,
#colm_rit li span{
	color:#333;
	display:block;
	font:bold normal 1.1em Arial;
	width:205px;
	height:20px;
	background:url(bg-li-2.gif) no-repeat;
	padding:5px 0 0 35px;
	margin:7px 0 6px 28px;
}
#colm_rit li a:hover,
#colm_rit li a:focus,
#colm_rit li a:active,
#colm_rit li span,
#colm_rit li.active a,
#colm_rit li.active a:link,
#colm_rit li.active a:visited{
	color:#fff;
}

/*----Redaxo Elements----*/

div.cnt-blck { /* textile is putting it's output in such blocks */
	clear:both;
}
p.image span { /* picture description text */
	font-size:0.8em; /*define some small font size */ 
	float:none;
	padding:10px 0pt 0pt;
	display:block;
}
.fl-left { /* can be added as class on image divs for left alignment */
	float: left;
	margin: 3px 20px 0 0;
}
.fl-right { /* can be added as class on image divs for right alignment */
	float: right;
	margin: 3px 0 0 10px;
}
.txt-algn-left {
	text-align:left;
}
.txt-algn-rght {
	text-align:right;
}
.txt-algn-cntr,
.algn-center { /* can be added as class on image divs for centered images */
	text-align:center;	
}
.clearer { 
	display: block;
	clear: both;
	line-height: 0em;
	height: 1px;
	font-size: 0;
	visibility: hidden;
}
.hidden {
       display:none;
}


/*-- Form --*/

.frm { /* defining the width of .frm will adjust the labels's and input's width automatically */
	float: left;
	padding:10px 0;
	margin:10px 0;
	width:100%;
}
.frm input,
.frm textarea,
.frm select{
	border: solid 1px #ddd;
	background:url(nav-bg.gif) repeat-x 0 -2px;
	padding:2px 2px 2px 5px;
	float:left;
	margin:10px 0 0;
	color:#747474;
	font-size:1em;
	font-family:verdana;
	width:50%;
}
.frm select{
	width:52%;
}
.frm textarea {
	height:120px;
	background:url(bg.gif) repeat-x 0 -10px;
}
.frm label,
.frm p.radio span,
.frm p.checkbox span {
	width:40%;
	display:block;
	float:left;
	margin-top:13px;
	font-size: 1em;
	color:#747474;
	padding:0 7px 0 0;
}
.frm p.err input,
.frm p.err textarea,
.frm p.err label,
.frm p.err select {
	color:#f00;
	border:1px solid #f00;
}
.frm p.err label {
	border:0;
}
.frm p {	
	clear:both;
	line-height:normal;
	margin:0;
}
.frm p.fsbmt input {
	margin:10px 45px 0 111px;
	width:auto;
	height:auto;
	border:none;
	background:none;
	float:right;
}
.error{
	float:left;
	clear:both;
	margin:7px 0 0 240px;
}

/*----- Footer ----*/

#footer{
	width:948px;
	padding:15px 0;
	text-align:center;
	margin:0 auto;
	background:url(ftr.gif) no-repeat center top;
	color:#666;
}
#footer ul{
	list-style:none;
	padding:7px 0 0 0;
	background:url(bg-navi.jpg) top;
	width:100%;
	height:20px;
	text-align:right;
}
#footer li{
	list-style:none;
	display:inline;
	padding:0 10px 0 10px;
}
#footer li a:link,
#footer li a:visited{
	color:#666;
}
#footer li a:hover,
#footer li a:focus,
#footer li span{
	color:#000;
}
#footer .last{
	border:none;
}
.copy{
	display:block;
	padding:5px 0 0;
	font-size:1.1em;
	text-align:center;
	margin:0 auto;
	color:#226a8e;
	float:left;
	width:100%;
}
.copy a,
.copy a:link,
.copy a:visited{
	color:#226a8e;
}
.testi,
.bot,
.top{
	float:right;
	background:url(cntr.gif);
	width:189px;
	position:relative;
}
.testi{
	margin:30px 0 20px;
	clear:both;
}
.bot{
	background:url(bot.jpg) no-repeat bottom;
}
.top{
	background:url(top.jpg) no-repeat top;
	padding:10px;
	width:169px;
	font-size:.9em;
}
.top p{
	margin:0 0 10px;
}
.testi span{
	position:absolute;
	top:-25px;
	left:29px;
	background:url(tab.gif);
	display:block;
	width:129px;
	height:23px;
	color:#fff;
	font-size:1em;
	text-align:center;
	padding:3px 0 0 0;
}

/*----- Slider -----*/

#wrapper {
    width: 580px;
    margin: 0 auto;
	float:left;
	background:url(shade2.gif) no-repeat bottom;
}
#intro {
    padding-bottom: 10px;
}
#slider {
    width:580px;
    margin: 20px 0 0;
    position: relative;
    background: #FFFFFF url(bg.gif) repeat-x scroll left bottom;
}
.scroll,
.port {
    width: 580px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    clear: left;
    background: #fff;
	z-index:20;
	background:url(sep.gif) repeat-x;
}
.port {
	margin:20px 0 0;
	padding:2px 0 0;
}
.port div.panel{
    background: #fff url(bg.gif) repeat-x 0 -20px;
}
.scrollContainer div.panel {
    padding: 20px 35px;
    width: 510px;
}
.details .port{
	width:580px;
}
.details div.panel{
	width:550px;
}
.thumbs .port{
	height:auto;
	margin:10px 0 0;
	padding:15px 0 0;
}
ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 9px;
}
ul.navigation li {
    display: inline;
    margin-right: 10px;
}
ul.navigation a {
    padding: 10px;
    color: #000;
    text-decoration: none;
}
ul.navigation a:hover {
    background-color: #f6f6f6;
}
ul.navigation a.selected {
    background-color: #fff;
}
ul.navigation a:focus {
    outline: none;
}
.scrollButtons {
    position: absolute;
    top: 90px;
    cursor: pointer;
}
.scrollButtons.left {
    left: 10px;
	z-index:40;
	border:0;
}
.scrollButtons.right {
    right: 10px;
	z-index:40;
	border:0;
}
.hide {
    display: none;
}
.scrollContainer a:link,
.scrollContainer a:visited{
	width:170px;
	float:left;
	text-decoration:none;
	text-align:center;
	margin:15px 0 0;
}
.thumbs a:link,
.thumbs a:visited{
	width:180px;
}
.scrollContainer a:active span,
.scrollContainer a:hover span{
	color:#000;
}
.scrollContainer span{
	width:165px;
	text-align:center;
	display:block;
	background:url(shade.gif) no-repeat;
	padding:10px 0;
	color:#026FC8;
	font-size:1.1em;
}
.scrollContainer{
	float: left;
}

/*----------- Light Box -------------*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

#container{
	text-align:center;
	z-index:0;
}
.clients{
	background:url(sep.gif) repeat-x top;
	width:878px;
	float:left;
	margin:20px 20px 0;
	padding:10px 15px;
}

/*-- Navigation 2 --*/

#navi2 ul{
	list-style:none;
	margin:0 0 0 11px;
}
#navi2 ul li{
	float:left;
}
#navi2 ul li a:link,
#navi2 ul li a:visited{
	display:block;
	width:232px;
	height:42px;
	color:#7d7d7d;
	padding:51px 0 0 75px;
	margin:0 0 0 2px;
}
#navi2 ul li a:hover{
	color:#aaa;
}
.clients img{
	float:left;
	margin:0 27px 10px 0;
}
.date{
	float:left;
	clear:both;
	font-size:.8em;
	font-weight:bold;
	width:100%;
}
.more{
	background:url(bullet.gif) no-repeat right;
	padding:0 10px 0 0;
	display:block;
	float:left;
	font-size:1.1em;
}
.portfolio .clients{
	width:540px;
	margin:0;
}
.portfolio .clients img{
	border:1px solid #f1f1f1;
	padding:2px;
	float:left;
	clear:both;
}
.portfolio .clients span{
	clear:both;
	float:left;
}
.portfolio .clients h1 span{
	clear:none;
	float:none;
}
.portfolio .clients a:link,
.portfolio .clients a:visited{
	float:left;
	margin:15px 0;
}
.portfolio .clients a:hover{
	text-decoration:none;
}