/* ########## General ########## */
body {
	background-color: #FFFFFF;
	text-align: center;
}

h1 {
	height: 95px;
	color: #fff;
	font-weight: normal;
	font: 22px "harrow", "Lucida Grande", arial, sans-serif;
	line-height: 95px;
	text-indent: 23px;
	width: 400px;
}

.clear {clear: both;}
/* ########## End General ########## */

/* ########## Body ########## */
#container{
	text-align:left;
	margin: 0 auto;
	width: 900px;
	padding:5px;
}

#wrapper {
	font: 12px arial, sans-serif;
}

#header {
	margin-left: 0px;
	height:125px;
	width:95%;
}

#header a, #header a:visited, #header a:hover {
	color:#AAAAAA;
	text-decoration: none;
}

#branding{
	margin-top:0px;
	float:right;
	width:250px;
}

#branding img{
	padding:0;
	margin:0;
}

#midcontent{
	width:95%;
	margin:-10px 10px 10px 10px;
	padding:10px;
}

#innercontent{
	width:100%;
	margin:0px;
	padding:0px;
}

#designer{
	text-align:center;
	margin-top:35px;
	padding-right:75px;
	font-size:10px;
}

.descr{
	font-size:18px;
	color:#665500;
}

.pg_title{
	font-size:18px;
	font-weight:bold;
	color:#000066;
}

.exec_name{
	font-size:16px;
	font-weight:bold;
	color:#000066;
}

.exec_title{
	font-size:16px;
	font-weight:bold;
	color:#AAAAAA;
}

.full_p{
	width:100%;
	font-size:12px;
}

.full_p2{
	width:100%;
	font-size:14px;
}

.img_link{
	border-style:none;
}
/* ########## End Body ########## */

/* ########## Navigation ########## */
#navContainer {
	padding-left:50px;
	padding-top:5px;
	margin-left:20px;
	height: 25px;
	width:500px;
	position: relative;
	background-color:#000066;
}

#nav {
	margin:0px;
	padding:0px;
	font-size: 14px;
	font-weight: bold;
	position:absolute;
}

#nav a{
	text-decoration: none;
	color: #FFFFFF;
}

#nav ul{
	margin: 0;
	padding: 0;
	whitespace: nowrap;
}

#nav li{
	display: inline;
	list-style-type: none;
	padding-left: 30px;
}

#nav a:link{
	color: #FFFFFF;
	text-decoration: none;  
}

#nav a:visited{
	color: #FFFFFF;
	text-decoration: none;  
}

#nav a:hover{
	color: #FFFFFF;
	text-decoration: none;  
}

/* ##### Anylink Menu ##### */
.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: #000066;
}

/* ### Default class for drop down menus ### */
.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border-bottom-width: 0;
font: normal 10px Verdana;
line-height: 14px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: #99BBDD;
width: 160px; /* default width for menu */
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkmenu ul li a{
color: #000000;
width: 100%;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
text-indent: 5px;
}

.anylinkmenu a:hover{ /*hover background color*/
background: #0044DD;
}

/* ### Alternate multi-column class for drop down menus ### */
.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #99CCDD;
}

.anylinkmenucols li{
padding-bottom: 3px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #99CCDD;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/* ### class for shadow DIV ### */
.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}
/* ##### End AnyLink Menu ##### */
/* ########## End Navigation ########## */


/* ########## About ########## */
#about_desc{
	width: 55%;
}

#about_desc p{
	width: 100%;
	font-size:11px;
}

#about_pic{
	margin-top:125px;
	float: right;
}
/* ########## End About ########## */


/* ########## Contact ########## */
#contact_desc{
	width:250px;
}

#contact_desc p{
	width:100%;
	font-size:12px;
}

#address{
	float:right;
	width:200px;
	font-size:14px;
}
/* ########## End Contact ########## */

/* ########## Team ########## */
#exec{
	float:left;
	margin-top:25px;
	width:400px;
}

#exec img{
	width:200px;
	height:150px;
}

#exec a, #exec a:visited{
	color:#000066;
	font-weight:bold;
	text-decoration:underline;
}

#exec a:hover{
	color:#0088BB;
	font-weight:bold;
	text-decoration:underline;
}

#exec_detail{
	float:left;
	width:500px;
	margin-left:50px;
	font-size:12px;
}
/* ########## End Team #########*/

/* ########## Market ########## */
#market {
	text-align:center;
	width:300px;
	margin-top:40px;
	margin-left:50px;
	padding:0;
}

#market img{
	padding-bottom:5px;
	width:250px;
	height:160px;
	border-style:none;
}

.market_title{
	font-size:16px;
	font-weight:bold;
}

#market_clients{
	float:right;
	margin-top:30px;
	width:300px;
}

#market_clients a{
	padding-bottom:5px;
	text-decoration:none;
	color:black;
	font-weight:bold;
}

#market_clients a:hover{
	color:#000066;
	text-decoration:underline;
}

#market_detail{
	width:400px;
}

#market_detail img{
	float:right;
	width:425px;
	height:275px;
	margin-top:15px;
	padding-bottom:20px;
}

.market_detail_pic{
	float:right;
	width:400px;
	height:250px;
	margin-top:25px;
	padding-bottom:20px;
}

#market_detail ul{
	padding-bottom:10px;
}

#market_detail li{
	list-style-type:circle;
}

.project_desc{
	width:100%;
	font-size:12px;
	margin-top:8px;
	padding-bottom:20px;
}

.project_desc_special{
	width:100%;
	font-size:12px;
	margin-top:8px;
	padding-bottom:5px;
}
/* ########## End Market ########## */

/* ########## Feature Slider ########## */
#SliderContainer {
	width:400px;
	margin-top:25px;
	text-align:left;
}

#SliderContainer2 {
	width:400px;
	text-align:left;
}

#s3slider {
   width: 450px; /* important to be same as image width */
   height: 325px; /* important to be same as image height */
   margin-top:-10px;
   text-align: left;
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3Slider ul, li { list-style-type: none;}

#s3sliderContent {
   width: 400px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
   padding-left:0;
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage img{
	width:400px;
	height:300px;
}
.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   bottom: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.s3sliderImage span strong {
    font-size: 16px;
}
/* ########## End Feature Slider ########## */


/* ######### SlideViewer ########## */
/*preload classes*/
.svw {width: 50px; height: 20px; background: #fff;}
.svw ul {position: relative; left: -999em;}

/*core classes*/
.stripViewer { 
position: relative;
overflow: hidden;
margin: 0 0 5px 0;
}
.stripViewer ul { /* this is your UL of images */
margin: 0;
padding: 0;
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
}
.stripViewer ul li { 
float:left;
}
.stripTransmitter {
overflow: auto;
width: 1%;
margin-bottom:15px;
}
.stripTransmitter ul {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
}
.stripTransmitter ul li{
width: 20px;
float:left;
margin: 0 1px 1px 0;
}
.stripTransmitter a{
font: bold 10px Verdana, Arial;
text-align: center;
line-height: 22px;
background: #000066;
color: #fff;
text-decoration: none;
display: block;
}
.stripTransmitter a:hover, a.current{
background: #fff;
color: #000066;
}

/*tooltips formatting*/
.tooltip
{
padding: 0.5em;
background: #fff;
color: #000;
border: 5px solid #dedede;
}

/* ######### End SlideViewer ########## */


/* ######### Pickachoose ########## */
#pikame{width:425px;}
.pikachoose{width:630px;position:relative; margin-left:450px;}
.jcarousel-skin-pika,.no-carousel{top:5px;position:absolute;}
.jcarousel-skin-pika{right:90px;}
.pika-image {position: absolute; top:5px; left:0; height: 300px; width: 425px; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px;}
	/*position image holders */
	.pika-image .animation, .pika-image .main-image {position: absolute; top: 10px; left: 10px;}
	.pika-image .animation {display: none;z-index:2;}
	.pika-image img {border:0; width:425px; height:275px;}

.pika-image .caption {position: absolute; background: url(http://www.htouchdesigns.com/jbj-technology/img/pickachoose/75-black.png);  border: 1px solid #141414; font-size: 11px; color: #fafafa; padding: 10px; text-align: right; bottom: 50px; right: 25px;}
	.pika-image .caption p {padding: 0; margin: 0; line-height: 14px;}

.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
	.pika-imgnav a.previous {background: url(http://www.htouchdesigns.com/jbj-technology/img/pickachoose/prev.png) no-repeat left 50%; height: 275px; width: 40px; top: 10px; left: 10px;cursor:pointer;}
	.pika-imgnav a.next {background: url(http://www.htouchdesigns.com/jbj-technology/img/pickachoose/next.png) no-repeat right 50%; height: 275px; width: 40px; top: 10px; right: 10px;cursor:pointer;}
	.pika-imgnav a.play {background: url(http://www.htouchdesigns.com/jbj-technology/img/pickachoose/play.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:45%;display: none;cursor:pointer;}
	.pika-imgnav a.pause {background: url(http://www.htouchdesigns.com/jbj-technology/img/pickachoose/pause.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:45%;display:none;cursor:pointer;}

.pika-textnav {overflow: hidden; margin: 10px 0 0 0;}
.pika-textnav a {font-size: 12px; text-decoration: none; font-family:  helvetica, arial, sans-serif; color: #333; padding: 4px;}
		.pika-textnav a:hover {background: #e5e5e5; color: #0065B2;}
	.pika-textnav a.previous {float: left; width: auto; display: block;}
	.pika-textnav a.next {float: right; width: auto; display: block;}
	
.pika-thumbs {margin: 325px 0 0 0; padding: 0; overflow: hidden; }
	.pika-thumbs li {float: left; list-style-type: none; width: 68px; padding: 3px; margin: 5px 2px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
		.pika-thumbs li:last {margin: 0;}
		.pika-thumbs li .clip {position:relative;width: 65px; height: 40px; text-align: center; vertical-align: center; overflow: hidden;}
ul.no-carousel{width:175px;}
/* ######### End Pickachoose ########## */


/* ########## Services ########## */
#services{
	float:right;
	margin-top:25px;
	width:400px;
	font-size:14px;
	font-weight:bold;
	color:#000066;
}

#services a{
	font-size:14px;
	font-weight:bold;
	color:#000000;
}

#services a:hover, a:visited, a:link{
	text-decoration:none;
}

#service_desc{
	width:400px;
}

#service_desc ul{
	padding-bottom:10px;
}

#service_desc li{
	list-style-type:circle;
}

#services_homepage{
	width:175px;
	float:right;
}

#services_homepage h2{
	margin-top:0px;
	font-size:14px;
}

#services_homepage a{
	font-size:12px;
	font-weight:bold;
	color:#000066;
}

#services_homepage a:visited, a:hover, a:link{
	text-decoration:none;
}
/* ########## End Services ########## */


/* ########## Footer ########## */
#footer {
	margin-top:10px;
	margin-left:0px;
	height: 70px;
	border-top: 4px ridge black;
}

#footer img{
	float:left;
	height:50px;
	width:50px;
}
#footer p{
	float:left;
	margin-top:0;
	padding-top:20px;
}

#footer a{
	text-decoration: none;
	color: #000000;
}

#footer table{
	float:right;
	margin-top:8px;
	margin-right:50px;
	color:#000000;
}
/* ########## End Footer ########## */