/*	CSS Document for (mini cube)
	Designed by The Cube Lab
	Designer name : (Steve)

/*	Colors used on site : 

blue grey - #505667 

cream - #fcfaea 

light color bg - #d7dbcd

dark brown - #969688
dark - text - #5b5d53
dark - hover #393a34

*/


		



/*------------------------------
			=COLORS
-------------------------------*/

/*------------------------------
			=FONTS
-------------------------------*/

/* old font set up

h1, h2, form#subscribeform, form#subscribeform ol li.btn input {
	font-family: 'FuturaThinNormal', Helvetica, serif;
	font-weight: normal;
	font-style: normal;
}

h2, h3, form#subscribeform, form#subscribeform ol li.btn input {
	font-family: 'FuturaLight', Helvetica, serif;
	font-weight: normal;
	font-style: normal;
}



.Museo-300 {font-weight: normal; font-style: normal; line-height:normal; font-family: 'Museo300', sans-serif;}
		.FuturaBT-Light {font-weight: normal; font-style: normal; line-height:normal; font-family: 'FuturaLight', sans-serif;}
		.FuturaBT-ExtraBlack {font-weight: normal; font-style: normal; line-height:normal; font-family: 'FuturaExtraBlack', sans-serif;}
		.Futura-Thin {font-weight: normal; font-style: normal; line-height:normal; font-family: 'FuturaThinNormal', sans-serif;}
		
		*/

/*------------------------------
			=LAYOUT
-------------------------------*/

body {
	font-family: "ff-enzo-web-1","ff-enzo-web-2", helvetica, sans-serif;
	background: #d7dbcd;
	text-align: center;
	color: #5b5d53;
	text-rendering: optimizeLegibility;

}

a {
	outline: none;	
}

header, section, article, aside, footer {
	display: block;
}

p {
	line-height: 26px;
}

#top {
	width: 100%;
	height: 158px;
	background: url(../images/top.gif) repeat-x top left;
	z-index: 900;
	margin: 0;
	padding: 0;
}

#container {
	width: 960px;
	margin: 0 auto;
	text-align: left;
	padding-top: 30px;
}

header {
	position: relative;
	z-index: 1000;
	width: 960px;
	margin: 0 auto;
}

nav {
	position: absolute;
	left: 0px;
	top: 22px;
	width: 800px;
	height: 135px;
}

section {
	float: left;
	width: 560px;

}

article {
	float: left;
	width: 560px;
	margin-top: 20px;
}

article#wide {
	float: left;
	width: 960px;
	margin-top: 40px;
}

div#base {
	float: left;
	clear: both;
	position: relative;
	margin: 0 auto;
	text-align: center;
	width: 960px;
	height: 323px;
	background: url(../images/planner.gif) no-repeat top left;
}



aside {
	float: right;
	width: 370px;
	margin-top: 20px;
}

.featured {
	background: grey;
	padding: 6px;
	background-color: #fcfaea;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 10px 0;
}

footer {
	width: 100%;
	clear: both;
	float: left;
	background: #505667 url(../images/footerbg.gif) repeat-x top left;
	text-align: left;
}

footer div {
	position: relative;
	width: 960px;
	height: 400px;
	margin: 0 auto;
}

article.navigate {
	background: transparent;
	position: absolute;
	width: 200px;
	top: 0;
	left: 0;
}

article.services {
	background: transparent;
	position: absolute;
	width: 200px;
	top: 0;
	left: 200px;
}

article.clients {
	background: transparent;
	position: absolute;
	width: 200px;
	top: 0;
	left: 400px;
}

article.smallprint {
	background: transparent;
	position: absolute;
	width: 200px;
	top: 0;
	left: 600px;
}

article.contact {
	background: transparent;
	position: absolute;
	width: 200px;
	top: 0;
	left: 800px;
}

nav ul li.nav-home a:link {
	background: url(../images/nav-home.jpg) no-repeat bottom left;
	width: 140px;
	height: 135px;
	display: block;
	text-indent: -9000px;
}

nav ul li.nav-home a:hover {
	background: url(../images/nav-home.jpg) no-repeat top left;
	width: 140px;
	height: 135px;
	display: block;
}



ul {
	margin: -7px 0 24px 0;
}

/*------------------------------
			=IMAGES
-------------------------------*/


article a img {
	border: 1px solid #7d8a77;
	background: #fff;
	padding: 2px;	
	margin: 10px 30px 10px 0;
	vertical-align: top;
}

aside a img {
	border: 1px solid #7d8a77;
	background: #fff;
	padding: 2px;	
	margin: 4px 4px 4px 0;
	vertical-align: top;
}

.thumbnail {
	float: left;
}

/*------------------------------
			=HEADINGS
-------------------------------*/

header h1 a {
	position: absolute;
	top: 20px;
	right: 0;
	z-index: 1000;
	background: url(../images/logo.gif) no-repeat top left;
	width: 186px;
	height: 90px;
	display: block;
	text-indent: -9000px;
}


/*------------------------------
			=NAVIGATION
-------------------------------*/

ul#nav {
	width:800px; /*width of the menu*/
	height:135px; /*height of the menu*/

	}
ul#nav li {
	padding:0;
	margin:0;
	float:left;
	text-indent:-9999px;	
	list-style-type:none;
	}
ul#nav li a {
	border:0;
	display:block;
	text-decoration:none;
	background:transparent url(../images/nav.png) no-repeat;
	}
li#home a {
	width:62px; /*change names to the same id as the menu li and change widths to same as each menu item*/
	height:135px;
	 }
li#solutions a {
	width:185px;
	height:135px;
	 }
 
li#clients a {
	width:262px;
	height:135px;
	 }
li#contact a {
	width:285px;
	height:135px;
	 }
 	 	 	 
li#home a:hover, li#home a:focus {
	background-position:0px -135px;
	 }
li#solutions a:link, li#solutions a:visited {	
	background-position:-62px 0px;
	}
li#solutions a:hover, li#solutions a:focus {	
	background-position:-62px -135px;
	}

	
li#clients a:link, li#clients a:visited {	
	background-position: -247px 0px;
	}
li#clients a:hover, li#clients a:focus {	
	background-position: -247px -135px;
	}
	
li#contact a:link, li#contact a:visited {	
	background-position: -515px 0px;
	}
li#contact a:hover, li#contact a:focus {	
	background-position: -515px -135px;
	}
	

/* Main navigation "active tabs"
------------------------------------------------------------------*/
body.home ul#nav li#home a {
	background-position:0px -135px;
	}
body.solutions ul#nav li#solutions a {
	background-position:-62px -135px;
	}

body.clients ul#nav li#clients a {
	background-position: -247px -135px
	}
body.contact ul#nav li#contact a {
	background-position: -515px -135px;
	}


/*------------------------------
			=HEADINGS
-------------------------------*/

h1, h2, h3, h4 {
	font-weight: normal;
	letter-spacing: -2px;

}

h1 {
	font-size: 38px;
	background: url(../images/headerline.png) no-repeat left bottom;
	padding-top: 30px;
	margin-bottom: 20px;
}

footer h1 {
	font-size: 30px;
	background: none;
	color: #d7dbcd;
	padding-top: 3px;
}

h1.heading1 {
	background: url(../images/header-bullet1.gif) no-repeat 0 20%;
	padding: 30px 0 10px 30px;
}

h1.heading2 {
	background: url(../images/header-bullet2.gif) no-repeat 0 20%;
	padding: 30px 0 10px 50px;
}


h2 {
	font-size: 26px;
	line-height: 1.4;
}

h3 {
	font-size: 24px;
	line-height: 1.4;
}

h4 {
	font-size: 20px;
	line-height: 1.4;
}


/*------------------------------
			=BLOCKQUOTES
-------------------------------*/

blockquote.casestudies {
	width: 100%;
	clear: both;
	padding: 20px 0;
	margin: 20px 0;
}

blockquote.casestudies p {
	padding: 0;
	margin: 0;
}


blockquote.casestudies ul {
	padding-top: 20px;
	width: 380px;
	margin-left: 100px;

}


blockquote.casestudies img {
	float: left;
	border: 1px solid #7d8a77;
	background: #fff;
	padding: 2px;	
	margin: 10px 30px 10px 0;
	vertical-align: top;
}


/*------------------------------
			=LISTS
-------------------------------*/

article ul {
	padding: 20px 0;
}

article ul li, aside ul li {
	padding: 0 0 12px 16px;
	background: url(../images/bullet3.gif) no-repeat top left;
	color: #505667;
}

article ul.featurelists li {
	background: none;
	padding-left: 0;
}



ul.social {
	padding: 20px 0;
}

ul.social li {
	padding: 14px 0;
		background: none;
}

ul.social li a {
	text-decoration: none;

}

.twitter {
	background: url(../images/twitter.gif) no-repeat 0 50%;
	padding: 20px 40px;
}

.blog {
	background: url(../images/blog.gif) no-repeat 0 50%;
	padding: 20px 40px;
}



footer ul {
	padding-top: 15px;
	padding-right: 10px;
}

footer ul li {
	color: #d7dbcd;
	padding: 6px 0;
	background: url(../images/line1.gif) repeat-x left bottom;
}

/*------------------------------
			=LINKS
-------------------------------*/



a:link, a:visited {
	color: #5b5d53;
	font-weight: bold;
}

a:hover, a:active {
	color: #393a34;
}


#base a:link, #base a:visited {
	display: block;
	position: absolute;
	top: 210px;
	left: 880px;
	text-decoration: none;
	color: #fff;
	font-size: 14px;
}

#base a:hover, #base a:active {
	color: #393a34;
}

footer a:link, footer a:visited {
	text-decoration: none;
	color: #d7dbcd;
	background: url(../images/footerbullet.gif) no-repeat 0 50%;
	padding-left: 20px;
	font-weight: normal;
}

footer a:hover, a:active {
	color: #fff;
}


/*------------------------------
			=TEXT
-------------------------------*/

footer {
	color: #d7dbcd;
	font-size: 13px;
}

/*------------------------------
			=FORMS - subscribe form
-------------------------------*/


form#subscribeform {
	padding: 30px 0;
}

form#subscribeform ol li {
	float: left;
	padding-right: 20px;
	text-transform: uppercase;
	font-size: 20px;
}

form#subscribeform ol li.btn input {
	width: 110px;
	text-transform: uppercase;
	color: #fff;
	margin-top: 10px;
}
form#subscribeform ol li input {
	background: #969688;
	border: none;
	font-size: 18px;
	width: 160px;
	color: #fff;
}

/*------------------------------
			=FORMS - contact form
-------------------------------*/

.contactform  {
	width: 100%;
	height: 400px;
	padding: 0;
	margin: 0;
	margin-bottom: 30px;
}

.fieldset1, .fieldset2 {
	float: left;
	width: 400px;
	height: 340px;
	margin: 0;
	padding: 12px;
	font-size: 14px;
	border: none;
}


.fieldset1 {
	background: #eef2e3 url(../images/fieldset1.gif) no-repeat top left;
}

.fieldset2 {
	margin-left: 20px;
	background: #eef2e3 url(../images/fieldset2.gif) no-repeat top left;
}

.fieldset1 h3, .fieldset2 h3 {
	padding-left: 40px;
	padding-bottom: 20px;
}

.contactform legend {
	margin-left: 10px;
	color: #555;
	font-weight: bold;
	font-size: 27px;
	color: #575a4c;
	line-height: 36px;
	letter-spacing: -3px;
	margin-left: 1em;
	padding: 0;
	text-transform: none;
}

.contactform ol {
	list-style: none;
	margin: 0 10px;
}

.contactform li {
	float: left;
	clear: left;
	width: 100%;
	padding: 0;
	margin: 0;
	margin-left: -10px;
	padding-bottom: 8px;
}

.contactform label {
	float: left;
	width: 90px;
	margin-right: 10px;
	padding-top: 4px;
	display: block;
	text-align: right;
}

.contactform label.widelabel {
	width: 220px;
	text-align: left;
}

.contactform input {
	border: 1px solid #aaa;
	font-size: 16px;
	color: #555;
	font-size: 14px;
	height: 20px;
}

fieldset.fieldset1 input {
	width: 260px;
}

fieldset.fieldset2 input, fieldset.fieldset2 select {
	width: 100px;
}


.contactform textarea {
	border: 1px solid #aaa;
	font-size: 16px;
	color: #555;
	width: 260px;
}



.inputleft {
	margin-left: 0px;
}

.contactform input.submit {
	width: 100px;
	background: #505667;
	color: #fff;
	border: none;
}






/* --- IMAGE SLIDER --- */

#slide-wrapper {
	position: relative;
	z-index: 0;
	width: 960px;
	height: 296px;
	padding-top: 20px;
	background: url(../images/bannerbg.png) repeat-x top left;
}

#slider {
	overflow: hidden;
	width: 710px;
	height: 255px;
	margin:auto;
}	

#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
}

#slider li{ 
	width:710px;
	height:255px;
	overflow:hidden; 
}	

#prevBtn, #nextBtn {
	display:block;
	width:54px;
	height:83px;
	position:absolute;
	left:5px;
	top:100px; 
	text-indent: -9000px;
}	

#nextBtn{
	left:901px; 
}														
#prevBtn a, #nextBtn a{  
	display:block;
	width:54px;
	height:83px;
	background:url(../images/prev.png) no-repeat 0 0;	
}	

#nextBtn a{ 
	background:url(../images/next.png) no-repeat 0 0;	
}	

/*------------------------------
			=TOOLTIPS
-------------------------------*/

.tooltip {
	border-bottom: 1px dotted #999;
	color: #000000;
	outline: none;
	cursor: help;
	text-decoration: none;
	position: relative;
	text-align: center;
}

a.tooltip {
	font-weight: normal;
}

.tooltip span {
	margin-left: -999em;
	position: absolute;
	z-index: 1000;
}

.tooltip:hover span {
	border-radius: 5px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	background: #d7dbcd;
	position: absolute;
	left: 8em;
	top: 0em;
	z-index: 1000;
	margin-left: 0;
	width: 250px;
	font-weight: normal;
	font-style: italic; 
	font-size: 14px;
}
.tooltip:hover img {
	border: 0;
	margin: -10px 0 0 -55px;
	float: left;
	position: absolute;
}

.tooltip:hover em { 
	display: block;
	padding: 0.2em 0 0.6em 0;
}
a.tooltip span {
	padding: 0.8em 1em;
}

* html a:hover {
	background: transparent;
}

a.tooltip span {
	

}