/* ------------------------------------
---- Main stylesheet for all media ----
---- Original Author: Steven Wu ----
----   Creation Date: 21/10/09   ----
----    Plug and Play Design    ----
-------------------------------------*/

/*** DEFAULT STYLES ***/

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

  	font:normal 75% Franklin Gothic Medium,Arial,sans-serif;
  	color:#A6A6A6;
  	background-color: #fff;
	background:		url(../images/body-background.jpg) center center no-repeat scroll;
	min-height: 100%;
	

	
}
h1 {
	font-size:20px;
	font-weight:normal;
	text-transform:uppercase;
	color:#9B7DB9;
}
h2 {
	font-size:1.1em;
	font-weight:normal;
	text-transform:uppercase;
}
h3 {
	font-size:0.9em;
	font-weight:normal;
	text-transform:uppercase;
	color:#666;
}
p {
	font-size:14px;
	margin:0 0 1em 0;
  	line-height:1.2em;
}
a {
	text-decoration:none;
	color:#9b7db9;
}
a:hover {
	text-decoration:underline;
}
a img { 
	border:none; 
}

.logo a img{
	height:	299px;
	width:	40px;
	margin-top:	8px;
}

.second_nav ul{
	padding-left:	55px;
}

ul.nav {
	margin:0;
	padding:0; 
	list-style:none;
	width:199px;
}
ul.nav li.selected a, ul.nav li.selectSec0 a {
	color:#9B7DB9;
}
.clear_both {
	clear:both;
}
.display_none {
	display:none;
}




/***  WRAPPER ***/

/*
div.wrapper {  
	margin:0 auto;
  	padding:18px 0 0 0;
  	width:900px;
	min-height:1%;
  	text-align:left;
  	background-color:transparent;
}
*/

div.wrapper{
	margin-left:-833px;
	position:relative;
	left:988px;
	top:25px;
	width:	988px;
	
}
	



div.wrapper:after {
  	content:'.';
 	display:block;
  	clear:both;
 	height:0;
  	visibility:hidden;
}

.slogan{
	display:		none;
}

/***  HEADER  ***/

div.header {
	float:left;
	width:230px;
	min-height:1%;
}
div.header:after {
  	content:'.';
 	display:block;
  	clear:both;
 	height:0;
  	visibility:hidden;
}
div.header div.nav {
	margin:0 0 5px 0;
	padding:0 0 5px 0;
	width:220px;
	border-bottom:1px dashed #808080;
	height:40px;
}
div.header div.nav ul li {
	float:	left;
	display:inline;
}
div.header div.nav li a {
	font-size:1.3em;
	text-transform:uppercase;
	color:#808080;
}


body .invert div.nav li a {
color:		#FFF;
}

body .invert div.nav {
	border-bottom:1px dashed #FFF;
}

div.header div.nav li.selected a, div.header div.nav li.selectSec0 a {
	color:#9B7DB9;  
}
div.header div.logo {
	float:left;
	width:30px;
}

div.header div.logo h1 a{
	background:			url(../images/2lkPixi.png) top left no-repeat;
	display:			block;
	height:				299px;
	width:				40px;
	text-indent:        -3000px;
}

body div.invert div.logo h1 a{
	background-position:bottom;
	height:				298px;
}


div.header div.second_nav ul li {
	margin:0;
	padding:0;
	list-style:none;
	text-align:left;
}
div.header div.second_nav li a {
	padding:0.2em;
	font-size:1.2em;
	text-transform:uppercase;
	color:#808080;
	text-decoration: none;
}
div.header div.second_nav li a.selected, div.header div.second_nav li a:hover
{
	text-decoration: underline;
}

body .invert div.second_nav li a {
	color:		#FFF;
}


body .white{
	background-color:		#FFF;
}

body .white .text_small{
	margin:				15px 0px 0px 25px;

	padding-bottom:		10px;
}

body .wrapper .clients .text_small{
	height:				203px;
	overflow:			hidden;
}

/***  HOME PAGE CONTENT ***/

div.home_content {
	float:right;
	width:200px;
}
div.slogan img {
	margin:280px 0 0 -90px;
}

/***  CONTENT ***/

div.content {
	margin:45px 0 0 0;
	padding:0px;
	float:right;
	width:732px;
}

body .white{
	height:	690px;
	
}


.content .jcarousel-skin-tango{
	background-color:	#FFF;
}

div.text_large {
	margin:0 8px 8px 0;
	float:left;
	width:350px;
}
div.text_small {
	float:left;
	width:530px;
	text-align:left;
}
div.right_image {
	margin:30px 0 0 0;
	text-align:right;
}

div.content_side {
	float:left;
	width:200px;
}
div.content_side ul li {
	padding:0 0 6px 0;
}
div.content_side ul li a {
	font-size:1.1em;
	color:#999;
}
div.content_box {
	padding:0 0 0 5px;
	float:left;
	width:435px;
}
div.left_border {
	padding:0 0 0 15px;
	height: 646px;
}

div.left_border p{
	font-size:14px;
}

div.right_border {
	margin:0 4px 0 0;
	padding:0 5px 0 0;
	border-right:1px dashed #808080;
}
ul.graphics li {
	margin:0 4px 0 0;
	display:inline;
}

/***  Case Study Styles ***/

div.casestudy_info,
div.casestudy {
	padding:5px;
	float:right;
	width:556px;
	background-color:#fff;
}
div.casestudy_info {
	padding:10px;
	width:536px;
}
div.casestudy_info div.content_box {
	margin:0 0 20px 0;
}	
div.casestudy_info div.content_side {
	padding:0 0 0 8px;
}
div.casestudy_info div.content_side ul li {
	padding:0;
	font-size:0.9em;
}
div.casestudy_info h2 {
	font-size:0.8em;
	font-weight:normal;
	color:#B890C2;
}
div.casestudy_info h1,
div.casestudy h1 {
	font-size:1em;
	color:#999;
}

.casestudy .thumbnail_previews{
	width:				115px;
	float:				right;
}


.casestudy .thumbnail_previews .gallery, .casestudy .thumbnail_previews .gallery2{
	margin-left:		0px;
}

.casestudy .thumbnail_previews a img{
	background-color:	#666;
	height:				88px;
	width:				115px;
	margin-bottom:		5px;
	position:			relative;
	top:				0px;
	
}

.casestudy #large_preview img{
	width:				599px;
	height:				460px;
}

.casestudy #large_preview h1, .casestudy #large_preview p{
	text-align:			left;
	font:				Franklin Gothic Medium,Arial,sans-serif;
}

.casestudy #large_preview h1{
	font-size:			20px;
	margin-bottom:		2px;
}

.casestudy #large_preview p{
	font-size:			14px;
	width:				550px;
	margin-bottom:		3px;
}

.casestudy #ctl00_Content_disp_ctl01_more{
	text-align:			left;
	font-size:			13px;
	position:			absolute;
	top:				485px;	
}


div#large_preview {
	margin:0 5px 0 0;
	float:left;
	width:600px;

}
div.locationshide {
	margin:0;
	padding:0;
	width:460px;
}
div.thumbnail_previews ul {
	margin:0 0 10px 0;
}
ul.logo li {
	display:inline;
}

/*** Carousel Styles ***/

div.container { 
	float:right;
	margin:0 0 10px 0;
	padding:5px;
	width:556px;
	min-height:1%;
	border:0px dotted #888; 
	background-color:#fff; 
}
div.container:after {
  	content:'.';
 	display:block;
  	clear:both;
 	height:0;
  	visibility:hidden;
}
div.container div.slider ul {
	margin:0;
	padding:0;
}
div.container div.slider ul li {
	float:left;
	display:block;
	background-color:#000000;
}
div.slider { 
	position:relative; 
	overflow:hidden; 
	width:556px; 
	height:90px; 
	margin:0;
}
div.slider_frame { 
	position:relative; 
}
div.slider_frame img { 
	cursor:pointer; 
}
#slider_previous { 
	padding:0 0 0 10px;
	float:left; 
}
#slider_next { 
	padding:0 10px 0 0;
	float:right; 
}
#slider_content { 
	position:absolute; 
	top:0;	
	margin-left:55px; 
}
#slider_content li { 
	list-style:none; 
	margin:0; 
	padding:0; 
}
#slider_content { 
	width:11880px; 
}
/* ------------------------------------
---- IE6 and lower stylesheet  ----
---- Original Author: Steven Wu ----
----   Creation Date: 21/10/09   ----
----    Plug and Play Design    ----
-------------------------------------*/

/* - Fix hasLayout - */

div.wrapper,
div.header,
div.container {
	height:1%;
}

/* - Fix PNGs - */

img {
	behavior:url('../htc/png.htc');
}

div.casestudy {
	width:721px;
	position:	relative;
	left:	0px;
	top:	7px;

}

.content .casestudy{
	background-color:	#FFF;
	position:relative;
	height:				538px;
}



.thumbnail_previews{
	position:	relative;
	
}


/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
 
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px;
    height: 75px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}


.jcarousel-skin-tango .jcarousel-container {



}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 720px;
    padding: 5px 10px 5px 6px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  720px;
    height: 119px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 144px;
    height: 119px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 0px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    right: 9px;
    width: 28px;
    height: 119px;
    cursor: pointer;
    background: transparent url(../images/2lk-next-pixi2.png) top left no-repeat;
}

/*
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: bottom left;
}*/



.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    
    left: 5px;
    width: 28px;
    height: 119px;
    cursor: pointer;
    background: transparent url(../images/2lk-previous-pixi.png) top right no-repeat ;
}
/*
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: bottom right;
}*/

/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../skins/tango/next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(../skins/tango/prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.content .gallery, .content .gallery2{
	position:				relative;
	top:					0px;
}
/*
.content .gallery a{
position:				relative;
}

.content .gallery a span{
	display:				none;
}

.content .gallery a:hover span{
	display:				block;
	position:				absolute;
	top:					-150px;
	left:					0px;
	width:					225px;
}

.content .gallery a:hover span{
	background:				url(../images/bubbleMiddle.png) top left repeat-y;
	width:					255px;
	display:				block;
}

.content .gallery a:hover span h5{
	background:				url(...images/bubbleTop.png) top left no-repeat;
	width:					255px;
	height:					14px;
	display:				block;	
}


.content .gallery a:hover .btm{
}
*/


/* =QUICK REF
------------------------------------------------------------------------------*/







.content .gallery li, .content .gallery2 li{
margin:				2px 0px 0px 0px;
}

.content .gallery a, .content .gallery2 a{
color:				#6abe46;
font-style:			italic;
position:			relative;
text-decoration:	none;

}





.content .gallery a.QRGLink, .content .gallery2 a.QRGLink
{
	cursor: hand;
	
}

.content .gallery a span, .content .gallery2 a span{
display:			none;
}

.content .gallery a:hover span, .content .gallery2 a:hover span{
position:			absolute;
display:			block;
z-index:			998;
bottom:				75px;
left:				-90px;
}
.content .gallery a:hover span h5, .content .gallery2 a:hover span h5
{
	font-size: 1em;
margin:				0px 0px 0px 0px;
}

.content .gallery a span p, .content .gallery2 a span p{
	width:			200px;
	margin-left:	-10px;
	text-align:		left;
	line-height:	1.3em;
	margin-top:		-9px;
	margin-bottom:	14px;
}

.content .gallery a span .title, .content .gallery2 a span .title{
	
	text-align:		left;	
	color:			#9B7DB9;
	font-style:		normal;
	padding:        0px;
	margin:			2px 0px 0px -10px;
}

.content .gallery a:hover span h5.title, .content .gallery2 a:hover span h5.title{
background:			url(../images/bubbleTop75.png) top left no-repeat;
width:				255px;
height:				10px;
line-height:		8px;
margin:				0px 0px 0px 0px;
padding:            18px 0px 0px 30px;
font-size: 			16px;
position: 			relative;
}


.content .gallery a:hover span div.btm, .content .gallery2 a:hover span div.btm{
background:			url(../images/bubbleBottom75.png) top left no-repeat;
width:				255px;
height:				46px;
display:			block;
position: 			relative;
top:				-14px;
}

.content .gallery a:hover span div.mid, .content .gallery2 a:hover span div.mid{
background:			url(../images/bubbleMiddle75.png) top left repeat-y;
width:				255px;
color:				#000;
font-size:			1em;
font-style:			normal;
margin:				0px;
padding:            20px 40px 0px 40px;
position: relative;
}

/*--- MAYBE to fix more content position bug?
height:				60px;
overflow:			scroll;
overflow-x:			hidden;
------------------------------*/

.white .content_side{
	margin:			15px 0px 15px 25px;
}

.white .content_box{
	margin:			25px 25px 25px 25px;
}

.content_side h2{
	font-size:		20px;
	color:			#9B7DB9;
}

.left_border h1{
	color:			#A6A6A6;
	margin-top:		6px;
}

.wrapper .white .content_side .sidebar_links li a{
	color:			#A6A6A6;
}

.content_side .sidebar_links{
	font-size:		14px;
}

.gallery, .gallery2{
	margin-left:	18px;
}

.gallery img, .gallery2 img  {
	margin:0px 0px 6px 6px;
	border:			1px solid #999;
}

.gallery a img, .gallery2 a img{
	height:			104px;
	width:			104px;
}

.right_border h3{
	font-size:		20px;
	color:			#9B7DB9;
	margin-top:		15px;
	margin-bottom:	6px;
}

.white .right_image{
	float:			right;
	width:			50px;
	margin-right:	70px;
	height:			45px;
}

.white .right_image a{
	float:			right;
	margin-top:		10px;	
}

.white .right_image img{
	height:			110%;
	width:			110%;
}

.white .content_box .map{
	position:		relative;
	left:			-23px;
	top:			-5px;
	width:			485px;
	height:			485px;
}

.news .white .left_border{
	position:		absolute;
	top:			0px;
	height:			290px;
	overflow-y:		auto;
	width:			444px;
	right:			-7px;
}

.news .content_side{
	border-right:	1px dashed #808080;
	padding-right:  25px;
	height:			650px;
	margin-top:		20px;
}

.news .content_side h2, .news .content_side ul{
	position:		relative;
	top:			-5px;
}

.news .white{
	position:		relative;
}

.news #Rotator{
	position:		absolute;
	bottom:			17px;
	right:			18px;
}

.news .noimage .left_border{
	height:			640px;
	
}