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

body {
background-image: url(images/bg.gif);
background-color: #ffffff;
padding:0;
margin: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color: #494949;
}

.clear {
z-index:-999;
clear:both;
padding:0;
margin:0;
}

.whitespacer {
background-color: #fff;
height: 15px;
margin:0 auto;
width:840px;
}

.header {
background-image:url(images/header-bg.gif);
background-repeat:repeat-x;
background-color: #c70706;
height: 71px;
text-align:center;
margin:0 auto;
width:840px
}

.main {
width:840px;
background-color:#FFFFFF;
background-image:url(images/slogan.gif);
background-position:top center;
background-repeat:no-repeat;
margin:auto;
}

.menu {
width: 760px;
margin:0px auto;
padding-top: 50px;
margin-bottom: 25px;

}

.menu-item {
margin-right:34px;
float:left;
}

.menu-item-last {
float:left;
}

.head-title-gry {
font-size: 13px;
font-weight:bold;
color: #494949;
}

.head-title-red {
font-size: 13px;
font-weight:bold;
color: #da0205;
}

.head-title {
margin: 0px 0px 20px 0px;

}

.head-box-title {
margin: 0px auto;
margin-bottom:10px;
width: 200px;
background-image: url(images/title-line.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:5px;
text-align:center;

}

.head-box-title-left {
margin-left: 20px;
margin-bottom:15px;
margin-top:25px;
width: 200px;
background-image: url(images/title-line.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:5px;
text-align:center;

}

.main-container {
width: 760px;
margin: 0px auto;
margin-top: 10px;
}

.image {
float:left;
margin:0 5px 2px 0;
padding-top:2px;

}

.welcome-text {
padding-bottom:20px;
border-bottom: 1px dotted #bfbfbf;
}

.text-end{
padding-bottom:20px;

}

.our-clients {
float:right;
margin-left: 8px;
padding:2px;
border:1px solid #bfbfbf;
width: 160px;
height: 120px;
}

.bottom {
margin: 20px 0;

}

.bottom-box {
width: 235px;
float:left;
}

.bottom-middle-box {
width:235px;
float:left;
border-left: 1px dotted #bfbfbf;
border-right: 1px dotted #bfbfbf;
margin:0 10px;
padding:0 15px;
}

.more {
float:right;
margin: 10px;
}

.more a:link, a:active {
color: #990000;
text-decoration:none;
}
.more a:visited {
color:#990000;
text-decoration:none;
}

.more  a:hover {
text-decoration:underline;
color: #FF0000;
}

.footer-links {

width: 600px;
margin:20px auto 10px auto;
text-align:center;
}

.footer-links a:link, a:active, a:visited {
color: #999999;
text-decoration:none;
}

.footer-links a:hover {
color:#da0205;
text-decoration:underline;
}

.footer {
background-image:url(images/footer-bg.gif);
background-repeat:repeat-x;
height: 22px;
text-align:center;
color:#FFFFFF;
padding-top: 13px;
}

.box-left-shadow {
background-image:url(images/box-left-shadow.gif);
background-repeat:no-repeat;
width:13px;
height:270px;
float:left;
}

.box-container {
background-image:url(images/box-faded-bg.gif);
background-repeat:repeat-x;
float:left;
width:702px;
border: 1px solid #b7b7b7;
padding:15px;
}

.box-right-shadow {
background-image:url(images/box-right-shadow.gif);
background-repeat:no-repeat;
width:13px;
height:270px;
float:left;
}

.title-image {
margin: 15px 0;
}

.lang-text {
margin: 10px 0 0 30px;
color: #767676;
float:left;

}


.pro-image {
	border:#999 1px solid;
	padding: 2px;
	margin: 20px;
	float:right;
}

.spacer {
	border-top:#999 1px dotted;
width: 316px;
height: 1px;
margin: 15px auto;
}


.client1 {
border-bottom:1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width:95px;
height: 75px;
float:left;
padding-top:10px;
text-align:center;
}

.clientleft {
border-bottom:1px solid #CCCCCC;

width:95px;
height: 75px;
float:left;
padding-top:10px;
text-align:center;
}

.clientbottom {
border-right: 1px solid #CCCCCC;
width:95px;
height: 75px;
float:left;
padding-top:10px;
text-align:center;
}


.clientlast {

width:95px;
height: 75px;
float:left;
padding-top:10px;
text-align:center;
}




#slideshow #slidesContainer {
	margin:0 auto;
	width:605px;
	padding:0 15px;
	height:160px;
	overflow:auto; /* allow scrollbar */
	position:relative;
	float:left;

}

#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:635 px; /* reduce by 20 pixels to avoid horizontal scroll */
  height:160px;
}


/**
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:30px;
  height:30px;
  text-indent:-10000px;
  float:left;
  margin-top: 45px;
  cursor: pointer;
}
#leftControl {

  background:transparent url(images/arrow-left.gif) no-repeat 0 0;
}
#rightControl {

  background:transparent url(images/arrow-right.gif) no-repeat 0 0;
}

.portofliocon {
width: 200px;
float:left;
margin:0 0px;
}

.porto-img {
text-align:center;
padding:2px;
border:#CCCCCC 1px solid;
margin:0 auto;
width: 160px;

}


.projects-img {
padding:2px;
border:#CCCCCC 1px solid;
margin:-5px 10px 0 0;
width: 160px;
float:left;

}

.proto-title {
margin-top:10px;
color:#666666;
font-weight:bold;
text-align:center;
}







#slideshow2 #slidesContainer2 {
	margin:0 auto;
	width:605px;
	padding:0 15px;
	height:160px;
	overflow:auto; /* allow scrollbar */
	position:relative;
	float:left;

}

#slideshow2 #slidesContainer2 .slide2 {
  margin:0 auto;
  width:635 px; /* reduce by 20 pixels to avoid horizontal scroll */
  height:160px;
}


/**
 * Slideshow controls style rules.
 */
.control2 {
  display:block;
  width:30px;
  height:30px;
  text-indent:-10000px;
  float:left;
  margin-top: 45px;
  cursor: pointer;
}
#leftControl2 {

  background:transparent url(images/arrow-left.gif) no-repeat 0 0;
}
#rightControl2 {

  background:transparent url(images/arrow-right.gif) no-repeat 0 0;
}




#slideshow3 #slidesContainer3 {
	margin:0 auto;
	width:605px;
	padding:0 15px;
	height:160px;
	overflow:auto; /* allow scrollbar */
	position:relative;
	float:left;

}

#slideshow3 #slidesContainer3 .slide3 {
  margin:0 auto;
  width:635 px; /* reduce by 20 pixels to avoid horizontal scroll */
  height:160px;
}


/**
 * Slideshow controls style rules.
 */
.control3 {
  display:block;
  width:30px;
  height:30px;
  text-indent:-10000px;
  float:left;
  margin-top: 45px;
  cursor: pointer;
}
#leftControl3 {

  background:transparent url(images/arrow-left.gif) no-repeat 0 0;
}
#rightControl3 {

  background:transparent url(images/arrow-right.gif) no-repeat 0 0;
}




#slideshow4 #slidesContainer4 {
	margin:0 auto;
	width:605px;
	padding:0 15px;
	height:160px;
	overflow:auto; /* allow scrollbar */
	position:relative;
	float:left;

}

#slideshow4 #slidesContainer4 .slide4 {
  margin:0 auto;
  width:635 px; /* reduce by 20 pixels to avoid horizontal scroll */
  height:160px;
}


/**
 * Slideshow controls style rules.
 */
.control4 {
  display:block;
  width:30px;
  height:30px;
  text-indent:-10000px;
  float:left;
  margin-top: 45px;
  cursor: pointer;
}
#leftControl4 {

  background:transparent url(images/arrow-left.gif) no-repeat 0 0;
}
#rightControl4 {

  background:transparent url(images/arrow-right.gif) no-repeat 0 0;
}





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




div.sc_menu {
  /* Set it so we could calculate the offsetLeft */
  position: relative;
  height: 145px;
  width: 500px;
  /* Add scroll-bars */
  overflow: auto;
}
ul.sc_menu {
  display: block;
  height: 110px;
  /* Max width here, for users without Javascript */
  width: 1500px;
  padding: 15px 0 0 15px;
  /* Remove default margin */
  margin: 0;
  background: url('navigation.png');
  list-style: none;
}
.sc_menu li {
  display: block;
  float: left;
  padding: 0 4px;
}
.sc_menu a {
  display: block;
  text-decoration: none;
}
.sc_menu span {
  /* We want a caption to display on the next line */
  display: block;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}

.sc_menu span {
  display: none;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.sc_menu a:hover span {
  display: block;
}
.sc_menu img {
  border: 3px #fff solid;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
.sc_menu a:hover img {
  filter:alpha(opacity=90);
  opacity: 0.9;
}


.product-box {
width:210px;
padding:10px;
float:left;
}

.product-box-center {
width:210px;
padding:10px;
border-left:#CCCCCC 1px dotted;
border-right:#CCCCCC 1px dotted;
float:left;
}


.product-bottom-1st {
border-bottom:#CCCCCC 1px solid;
border-right:#CCCCCC 1px solid;
width: 50%;
}


#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 16px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;
}


#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}


.text {
float:left;
margin-top: 3px;
margin-left: 5px;
}