@charset "utf-8";
/* CSS Document */

body {background: url(/content/images/iwhite/bg_body.jpg) repeat-x top #FFFFFF; margin-bottom: 0px; }
#wrap 
{
    background:url(/content/images/iwhite/bg_wrap.jpg) no-repeat top;
    width:997px;     
    margin: 0 auto; 
    display:block;  
    overflow: hidden; 
    margin-bottom: 40px 
}
#topsection {background: url(/content/images/iwhite/bg_top.jpg) no-repeat top center; width: 849px; height: 106px; margin-top: 40px; margin-left: 75px;}
.logo {background:url(/content/images/iwhite/logo_iwhite.png) no-repeat; width: 147px; height: 106px; margin-left: 10px; float:left;}
.logo h1 a{ text-indent: -5000px; display: block; width: 147px; height: 90px; }
.client_login {float: right; margin: 20px 10px 0 0;}
.client_login a{font-weight:bold; color: #486AB2;}
#menu {background: url(/content/images/iwhite/bg_menu.jpg) no-repeat; width: 866px; height:52px; margin-left: 65px;}
#header {background:url(/content/images/iwhite/header_image.jpg) no-repeat; width: 869px; height: 236px; margin-left: 61px; }
#header-services {background:url(/content/images/iwhite/header_image_services.jpg) no-repeat; width: 869px; height: 236px; margin-left: 61px; margin-top: 0px;}

div, span, p, td, th, li, a, input, select,h1, h2, h3 { font-family: Arial, Tahoma, Helvetica; color: #666666; font-size: 12px;}

.menu-nav {
	font-family: Arial; font-size:13px; font-weight: bold; color:#FFFFFF; padding-top: 20px;
}

a {text-decoration: none; border: 0px; color: #FFFFFF;}
a:hover {text-decoration: none;}
a:active {color: #addcfc; text-decoration: none}
a:visited {text-decoration: none}
a img {border: none;}

.first { margin-left: 7px; width:82px; display: block; text-align: center;}
.second { width:85px; display: block; text-align: center;}
.third { width:88px; display: block; text-align: center;}
.fourth { width:218px; display: block; text-align: center;}
.fifth { width:212px; display: block; text-align: center;}
.sixth { width:71px; display: block; text-align: center;}
.seventh { width:90px; display: block; text-align: center;}

/*** SlIDE SHOW ***/
.fade-box {
	width: 330px;
	position: absolute;
	text-align:center;
	padding-top: 40px;
}

#image-container {
	width: 330px;
	height: 150px;
	background: url(/content/images/iwhite/fade-image-bg.gif);
	background-position:center;
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 30px;		
}

#image-container img 
{
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader;					
}

.menu-nav ul { padding: 0px; margin: 0px;}
.menu-nav li {
  float: left;
  list-style-type: none;
  list-style-position: outside;  
}

.line_menu {margin-left: 15px; margin-top: 20px;}


.ferdinand-slider div {
	font-family:Tahoma;
}
.ferdinand-slider p {
	padding:2px 4px 4px 6px;margin:0;
}
.ferdinand-slider a.title {
	font-size: 18px;
	color:#fff;
	padding:2px 4px;
	text-decoration:none;
}
.ferdinand-slider p.tekst {
	font-size:11px;
	color:#fff;
}

#service {width: 100%; float: left;}
#service .arrow_service {height: 35px; padding-left: 75px; padding-top: 10px; color: #0099ff}
#service .h2 {font-family: Arial; font-size: large; padding-left: 100px; color: #0099ff; margin-top: -30px;}
#service-section {
	padding: 0px 0px 0px 75px;
}

#service-section .col-1 {
	width:196px;
	float:left;
	margin: 0 16px 0 0;
}
.subHead {
	margin-bottom: 10px;
	margin-top: 5px;
}
#service-section p {
	margin-top: -5px;
	/*font-family: Tahoma;*/
	color:#666666;
	font-size:12px;
	width: 196px;
}
#service-section .col-2 {
	width:196px;
	float:left;
	margin: 0 16px 0 0;
}
#service-section .col-3 {
	width:196px;
	float:left;
	margin: 0 16px 0 0;
}
#service-section .col-4 {
	width:196px;
	float:left;	
}



#readmore-service 
{
	clear: both;
	width: 800px;
	height: 16px;
	padding: 25px 0 0 0;
}
#readmore-product {
	width: 800px;
	height: 16px;
	padding: -200px 0 5px 0;
}

#readmore-service .web {
	padding-left: 75px;

}

#readmore-service .dev {
	padding-left: 290px;
	margin-top: -15px;
}

#readmore-service .cus {
	padding-left: 505px;
	margin-top: -15px;
}

#readmore-service .oms {
	padding-left: 725px;
	margin-top: -18px;
}
#readmore-product .cms {
	padding-left: 30px;
	margin-top: -30px;
}

#readmore-product .sms {
	padding-left: 310px;
	margin-top: -18px;
}

#product {width: 100%; padding-top: 30px;}
#product .arrow_service {height: 35px; padding-left: 75px; padding-top: 10px; color: #0099ff}
#product .h2 {font-family: Arial; font-size: large; padding-left: 100px; color: #0099ff; margin-top: -30px;}
#product-section {
	width: 850px; padding: 10px 0px 0px 100px;
}

.box-cms {
	background: url(/content/images/iwhite/box_product.jpg) no-repeat; width: 260px; height: 239px;
}

.box-cms-product {
	width: 78px; height: 74px; margin-left: 30px; padding-top: 15px;
}
.box-cms-title {
	font-family: Arial; font-size: 14px; width: 200px; padding-left: 100px; color: #0099ff; margin-top: -30px;
}
#product-section p {
	padding-top: 10px;
	padding-left: 30px;
	/*font-family: Tahoma;*/
	color:#666666;
	font-size:12px;
	width: 196px;
}

.box-sms {
	background: url(/content/images/iwhite/box_product.jpg) no-repeat; width: 260px; height: 239px; margin: -240px 0px 0px 280px;
}

.featured-showcase {
	width: 260px; height: 239px; margin: -240px 0px 0px 570px; 
}

.title-showcase {
	width: 247px; height: 37px; margin-top: -30px;
}


/* ABOUT US -------------------- */
#about-page {width: 850px; float: left; margin-left: 50px;}
#about-content {padding: 0 0 30px 50px; }
#about-content p {font-family: Arial; line-height: 22px; font-size: 12px; color: #666666;}
#about-content h3 {font-family: Arial; line-height: 22px; font-size: 16px; color: #666666;}




/* SERVICES -------------------- */
#services-page {width: 100%; float: left; padding-bottom: 20px; overflow: hidden;}
#service-menu {background: url(/content/images/iwhite/services.png) no-repeat; 
               width: 213px; height: 229px; margin-left: 90px; float: left;}
#service-menu li {display:block; padding: 3px 0; margin: 0 0 10px 0;}
#service-menu a {color: #c3c3c3; width: 196px; height: 38px;}
#service-menu a:hover {color: #addcfc; }
#service-menu a:active {color: #addcfc;}
.services-menu-item {font-family: Arial; font-size: 14px; padding: 5px; margin-top: 35px; color: #c3c3c3; list-style: none; }

#service-content {width: 570px; margin-left: 40px; float: left;}
#service-content h3 {font-family: Arial; font-size: 14px; color: #666666; margin-top: 0px; clear: left;}
#service-content p {font-family: Arial; line-height: 22px; font-size: 12px; color: #666666;}
#service-content-webdesign {width: 50%; height: 650x; margin-top: -250px; margin-left: 350px;}
#service-content-webdesign h3 {font-family: Arial; font-size: 14px; color: #666666;}
#service-content-webdesign p {font-family: Arial; line-height: 22px; font-size: 12px; color: #666666;}

.careers-menu-item {font-family: Arial; font-size: 14px; padding: 5px; margin-top: 30px; color: #c3c3c3; list-style: none; }
#careers-menu li {display:block; padding: 3px 0; margin: 5px 0 20px 0;}

#quote-address {background: url(/content/images/iwhite/services.png) no-repeat; width: 213px; height: 229px; margin-left: 700px; margin-top: -600px;}
.services-quote-address {font-family: Arial; font-size: 12px; padding: 35px 20px 5px 5px; color: #c3c3c3; margin-left: 15px;}

		.accordion_toggle {
			display: block;
			height: 30px;
			width: 680px;
			background: url("") no-repeat top right #a9d06a;
			padding: 0 10px 0 10px;
			line-height: 30px;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			outline: none;
			font-size: 12px;
			color: #000000;
			border-bottom: 1px solid #cde99f;
			cursor: pointer;
			margin: 0 0 0 0;
		}
		
		.accordion_toggle_active {
			background: url("");
			color: #ffffff;
			border-bottom: 1px solid #f68263;
		}
		
		.accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
		}
			
			.accordion_content h2 {
				margin: 15px 0 5px 10px;
				color: #0099FF;
			}
			
			.accordion_content p {
				line-height: 150%;
				padding: 5px 15px 15px 10px;
			}
			
		.vertical_accordion_toggle {
			display: block;
			height: 30px;
			width: 560px;
			background: url("/content/images/iwhite/toggle_plus.png") no-repeat left ; margin-top: 8px;
			padding: 0 10px 0 20px;
			line-height: 30px;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			outline: none;
			font-size: 12px;
			color: #000000;

			cursor: pointer;
			margin: 0 0 0 0;
		}

		.vertical_accordion_toggle_active {
			background: url("/content/images/iwhite/toggle_minus.png") no-repeat left ; 
			color: #ffffff;

		}

		.vertical_accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
		}

			.vertical_accordion_content h2 {
				margin: 15px 0 5px 10px;
				color: #0099FF;
			}

			.vertical_accordion_content p {
				line-height: 150%;
				padding: 5px 10px 15px 10px;
			}
  			
		/*
			Horizontal Accordion
		*/
		
		.horizontal_accordion_toggle {
			/* REQUIRED */
			float: left;	/* This make sure it stays horizontal */
			/* REQUIRED */

			display: block;
			height: 100px;
			width: 30px;
			background: url(/content/images/iwhite/h_accordion_toggle.jpg) no-repeat top left #a9d06a;
			color: #ffffff;
			text-decoration: none;
			outline: none;
			border-right: 1px solid #cde99f;
			cursor: pointer;
			margin: 0 0 0 0;
		}
		
		.horizontal_accordion_toggle_active {
			background: url(/content/images/iwhite/h_accordion_toggle_active.jpg) no-repeat top left #e0542f;
			border-right: 1px solid #f68263;
		}
		
		.horizontal_accordion_content {
			/* REQUIRED */
			height: 100px;	/* We need to define a height for the accordion as it stretches the width */
			float: left;	/* This make sure it stays horizontal */
			/* REQUIRED */
			
			overflow: hidden;
			background-color: #ffffff;
			color: #444444;
		}
			
			.horizontal_accordion_content p {
				width: 450px;
				line-height: 150%;
				padding: 5px 10px 15px 10px;
			}
					
					
    /* Container styling*/
    #horizontal_container {
      margin: 20px auto 20px auto;
      width: 600px;   
      height: 100px;    
    }
    
	#vertical_container {
      margin: 20px auto 20px auto;
      width: 620px;
    }
    #vertical_nested_container {
      margin: 20px auto 20px auto;
      width: 620px;
    }


/* CMS -------------------- */

#cms-section {width: 800px; padding: 10px 0px 20px 80px; position: relative}
#cms-section p {font-family: Arial; line-height: 22px; font-size: 12px; color: #666666;}
#cms-word {width: 370px; margin-top: -270px; margin-left: 200px;}

#cms-features { width: 250px; height: 204px; position: absolute; top: 80px; ~top: 50px; right: -40px; background: url('/content/images/iwhite/box-features.jpg') no-repeat;}
.box-features { }
.box-benefits { }
#cms-feature-text { padding: 66px 0 0 23px; line-height: 22px; font-size: 12px; line-height: 22px; font-size: 12px; color: #666666;}
.cms-feature-point { background: url('/content/images/iwhite/tick.png') no-repeat; padding: 0 0 4px 21px; }

#cms-benefits { position: absolute; width: 250px; height: 204px; top: 280px; ~top: 250px; right: -40px; background: url('/content/images/iwhite/box-benefits.jpg') no-repeat; }
#cms-benefits-text { padding: 66px 0 0 23px; line-height: 22px; font-size: 12px; line-height: 22px; font-size: 12px; color: #666666; }
.cms-benefits-point {background: url('/content/images/iwhite/tick.png') no-repeat; padding: 0 0 4px 21px; }



/* SMS -------------------- */
#sms-word {width: 370px; margin-top: -270px; margin-left: 200px;}

#sms-features { width: 250px; height: 204px; position: absolute; top: 80px; ~top: 50px; right: -40px; background: url('/content/images/iwhite/box-features.jpg') no-repeat; }

#sms-feature-text { padding: 66px 0 0 23px; line-height: 22px; font-size: 12px; line-height: 22px; font-size: 12px; color: #666666;}
.sms-feature-point { background: url('/content/images/iwhite/tick.png') no-repeat; padding: 0 0 4px 21px; }
#sms-benefits { position: absolute; width: 250px; height: 204px; top: 280px; ~top: 250px; right: -40px; background: url('/content/images/iwhite/box-benefits.jpg') no-repeat; }
#sms-benefits-text { padding: 66px 0 0 23px; line-height: 22px; font-size: 12px; line-height: 22px; font-size: 12px; color: #666666; }
.sms-benefits-point { background: url('/content/images/iwhite/tick.png') no-repeat; padding: 0 0 4px 21px; }

.request-fot-quote {margin-left: -10px;}



/* CONTACT -------------------- */
#contact {width: 100%; float: left; margin-bottom: 20px;}
#contact .arrow_service {height: 35px; padding-left: 75px; padding-top: 10px; color: #0099ff}
#contact .h2 {font-family: Arial; font-size: large; padding-left: 100px; color: #0099ff; margin-top: -30px;}
#contact-section {width: 800px; padding: 10px 0px 0px 100px;}
.share-icon-contact {margin: 10px 0 10px 10px; float: left;}
.form {
	/*width: 335px;*/
	font-family: Arial, Tahoma;
	color:#aaaaaa;
	font-size:12px;
}

div.error { position: relative; padding-left: 145px; }
div.error-textarea { padding-left: 145px; }
div.error span, div.error-textarea span { color: #990000 !important; }

.col1 {
	text-align: right;
	width: 135px;
	height: 31px;
	margin: 0;
	float: left;
	margin-right: 2px;
	background: url(/content/images/iwhite/bg_label.gif) no-repeat;
}
.col-service 
{
	text-align: right;
	width: 135px;	
	margin: 0;
	float: left;
	margin-right: 2px;
	background: url(/content/images/iwhite/bg_label.gif) no-repeat;
}

.col2 {
	width: 195px;
	height: 31px;
	display: block;
	float: left;
	margin: 0;
	background: url(/content/images/iwhite/bg_textfield.gif) no-repeat;
}

.col2comment {
	width: 195px;
	height: 98px;
	margin: 0;
	display: block;
	float: left;
	background: url(/content/images/iwhite/bg_textarea.gif) no-repeat;
}

.col1comment {
	text-align: right;
	width: 135px;
	height: 98px;
	float: left;
	display: block;
	margin-right: 2px;
	background: url(/content/images/iwhite/bg_label_comment.gif) no-repeat;
}

div.row {
	clear: both;
	width: 450px;
}
div.coll {
	clear: both;
	height: 335px;
}

div.row-comment {
	clear: both;
	width: 335px;
	margin-left: 90px;
}

.submit {		
	clear: both;
	margin-left: 135px;
} 

input {
	background-color: #fff;
	font: 11px/14px Arial;
	color: #5A698B;
	width: 180px;
	margin: 0px 0 5px 8px;
	padding: 1px;
	border: 1px solid #c3c3c3;
}

div.checkbox 
{
	clear: both;
	float: none;
}

div.checkbox input
{
	width: auto;
	clear: left;
	float: left;
	border: none;	
}

div.checkbox label
{	
	float: left;
	margin-left: 10px;
	width: 250px;
}

div.checkbox-list { overflow: hidden; margin-top: 4px; }

textarea {
	border: 1px solid #c3c3c3;
	background-color: #fff;
	font: 11px/14px Arial, Helvetica, sans-serif;
	color: #5A698B;
	width: 180px;
	margin: 4px 0 5px 8px;
}


#line_contact {background: url(/content/images/iwhite/line_contact.png) no-repeat; height: 292px; width:12px; margin-top: -300px; margin-left: 400px;}
#contact-address { width: 300px; height: 300px; font-family: Tahoma; font-size: 12px; color: #7d7f81; margin-top: -225px; margin-left: 480px; margin-bottom: 20px;}
.contact-title {font-family: Arial; font-size: 16px; font-weight: bold; color: #7d7f81;}
#thanks{font-family: Arial; font-size: 14px; color: #7d7f81; height: 250px;}




/* CLIENT -------------------- */

#client-page {width: 700px; float: left; margin-left: 120px;}
#client-content {width: 110px; height: 200px; margin-top: 0px; margin-left: 100px; float:left;}
.client-picture {width: 150px; height: 113px; margin-right: 10px; border: 1px solid #a9a9a9; padding: 5px;}
#client-box {width: 155px; text-align:center;}
.client-title {width: 150px; text-align:center;}
.client-title a {font-family: Arial; font-size: 12px; color: #C3C3C3;}
.client-title a:hover {color: #ADDCFC;}
#client-ss{
	border:  #CCC solid 1px; padding: 5px;
	width: 500px;
	float: left;
	margin: 10px 0 10px 75px;
}
#client-detail{
	margin-top: 0px;
	width: 300px;
	float: right;
	margin-right: 75px;
}
#client-share {
	margin-top: 10px;
	margin-right: 10px;
	float: right;
}
.icon-share{
	padding-right: 2px;
}
.visit {
	color:#0099FF;
}

/* CAREERS -------------------- */
#careers-page{
	margin-top: 100px;
	padding-bottom: 20px;
	margin-left: 100px;
}
#careers-page div.row {
	clear: both;
	width: 150px;
	margin-bottom: 10px;
}



/* LIGHTBOX -------------------- */

#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(..//content/images/iwhite/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(..//content/images/iwhite/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; }



/* FOOTER -------------------- */
#footer{
	background: url(/content/images/iwhite/bg_footer.jpg) no-repeat; margin-top: -40px; padding: 0px; width: 980px; height: 80px;
}

.sitemap {text-align:center; width: 800px; font-family: Arial; font-size:10px; color: #FFFFFF; padding-top: 10px;}
.sitemap a {font-family: Arial; font-size:10px; color: #FFFFFF; }

.copyright {
	font-family: Arial; font-size:12px; color: #FFFFFF; text-align:center; padding-top: 20px;
}
#blank{
	height: 50px;
}