@charset "utf-8";

/* ----------------------------------/ BODY /-------------------------------------------------------------*/
body {
	background-repeat: no-repeat;
	background-position: 49% -1px;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #4D4D4D;
	height:100%;
	padding:0;
}

a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #4D4D4D;
}
a:link {
	text-decoration: none;
	color: #666666;
}
a:visited {
	text-decoration: none;
	color: #5D807C;
}
a:hover {
	text-decoration: underline;
	color: #879598;
}
a:active {
	text-decoration: none;
	color: #5D807C;
}


/* ---------------------------------/ PAGE STRUCTURE- COLLUMN iphone /------------------------------------------------------------*/

#containerIPHONE{
	width:891px;
	margin:0 auto;
	height:500px;
}
#mainIPHONE{width:auto; display:block; padding:10px 0;}
#column_centerGalleryIPHONE{
	width:790px;
	margin-right:43px;
	float:left;
	margin-left: 53px;
	padding-top: 35px;
	height: 340px;
}

/* ---------------------------------/ PAGE STRUCTURE- COLLUMN /------------------------------------------------------------*/

#container{
	width:891px;
	margin:0 auto;
	height:100%;
}
#topbar{width:auto; display:block; height:60px;}
#navbar{
	width:auto;
	display:block;
	height:38px;
	margin-top: 91px;
	margin-left: 12px;
}
#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;}

#main{width:auto; display:block; padding:10px 0;}
#column_left{
	width:525px;
	margin-right:40px;
	float:left;
	margin-left: 50px;
	margin-top: 50px;
	color: #999999;
	margin-bottom: 0px;
}
.column_left_image { /* you can specify a width here, or allow it to default to 100% of its containing box */
	margin-left: 10px;
	margin-right: 15px;
	}
	
#column_left p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px
}
#column_center{
	width:790px;
	margin-right:43px;
	float:left;
	margin-left: 53px;
	padding-top: 35px;
	height: 379px;
}

#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{
	float:left;
	margin-top: 51px;
	color: #CCCCCC;
	margin-left: 10px;
	margin-right: 10px;
}
div.spacer{clear:both; height:10px; display:block;}


#footer{
	width:100%;
	display:block;
	padding:10px 0 80px 0;
	font-size:11px;
	color:#666666;
	background-color: #000000;
	text-align: center;
	bottom: 0;
	clear: both;
	position: static;

}







/* -----------------------------/ BOXES BRICKETS /--------------------------------------------------------*/

#containerBOXES {
	width:790px;
	margin-right:33px;
	float:left;
	margin-left: 20px;
	padding-top: 35px;
	width: 850px;
	height: 100%;
   }
#col1 {
	width: 280px;
	height: 100%;
	float: left;
   }
#col2 {
	width: 280px;
	height: 100%;
	float: left;
   }
#col3 {
	width: 280px;
	height: 100%;
	float: left;
   }


#left {
	float: left;
	width: 600px; /* minimum 512px (500px image + 12px padding), maximum 1000px */}

#right {
	float: right;
	width: 300px; /* minimum 237px (225px image + 12px padding), maximum 450px */
	}

.box { /* you can specify a width here, or allow it to default to 100% of its containing box */
	width: 270px; 
	}

.box h2 {
	float: left; /* this allows you to float content to the right */
	width: 200px;
	padding-left: 32px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color: #000000;
	margin-top: 12px;
	text-align: center;
	}
/* top border */
.tr {height: 40px; /* i have set the height to 40px to allow for header content */}

.tl { /* title div */
	clear: both;
	float: left;
	width: 100%; /* required */
	height: 40px; /* this is variablr but must match .tl height */
	}
/* mid border */
.mr {}

.ml {
	height: 100px; /* here is where you set your heights, I am arbitrarily setting it to 100px */
	padding-top: 10px;
	text-align: left;
	color: #666666;
	padding-left: 21px;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	}
#ml_readmore {
	padding-right: 30px;
	color: #515109;
	font-size: 8px;
	font-style:italic;
	font-family: Arial, Helvetica, sans-serif;
	}

/* bottom border */
.br {}

.bl { /* content div */}

/* top border */
.b3b .tr {
	background: url(../images/bricket3b/tr.png) top right no-repeat;
	height: 30px;
}
.b3b .tl {
	background: url(../images/bricket3b/tl.png) top left no-repeat;
	height: 30px;
}

/* mid border */
.b3b .mr {
	background: url(../images/bricket3b/mr.png) right repeat-y;
}
.b3b .ml {
	background: url(../images/bricket3b/ml.png) left repeat-y;
}

/* bottom border */
.box .br {
	background: url(../images/bricket3b/br.png) bottom right no-repeat;
	height: 13px;
}
.box .bl {
	background: url(../images/bricket3b/bl.png) bottom left no-repeat;
	height: 13px;
}

/* shadow border */
.box .brs {
	background: url(../images/bricket3b/brs.png) top right no-repeat;
	height: 41px;
}
.box .bls {
	background: url(../images/bricket3b/bls.png) top left no-repeat;
	height: 41px;
}
/* shadow border */
.box .btom {
	background: url(../images/bricket3b/sect-shadow.png) bottom right no-repeat;
	height: 41px;
}


div#myAlternativeContent{
	float:left;
	width:240px;
}

/* --------------------------------/ GALLERY SLIDER /--------------------------------------------------------*/
.containergallery {
	margin: 0 auto;
	position: relative;
	width: 700px;
	font-size:0.8125em;
}
#gallery {
	height:350px;
	overflow:hidden;
	background:url(../images/gallerry-bg.gif) 0 0 repeat-x;
	z-index:-1;
}
.roundabout-holder  {
	width:500px;
	height:400px;
	margin:0 auto;
}
.roundabout-moveable-item {
   width: 646px;
   height: 268px;
   cursor: pointer;
   border:7px solid #000000;
   border:7px solid rgba(0, 0, 0, 0.08);
   border-radius:9px;
   -moz-border-radius:9px;
   -webkit-border-radius:9px;
   behavior: url(border-radius.htc);
	z-index:-1;
}
.roundabout-moveable-item img{
		width:100%;
}
.roundabout-in-focus {
	border:9px solid rgba(0, 0, 0, 0.2);
}

/*--- loopedSlider styles ---*/
#loopedSlider .wrap { width:295px; height:295px; overflow:hidden; position:relative;}
#loopedSlider .slides { position:absolute; top:0; left:0; }
#loopedSlider .slides div { position:absolute; top:0; width:295px; display:none; }
#loopedSlider { width:295px; position:relative; clear:both; }
#loopedSlider .nav-controls {
	width:100%;
	overflow:hidden;
	padding-top:10px;
}
#loopedSlider li {
	display:inline;
}
#loopedSlider li a.previous {
	float:left;
}
#loopedSlider li a.next {
	float:right;
}

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