/* Defining basic reusable items */

div.clearBox{
  clear:both;
  font-size:0px;
  height:0px;
  width:100%;
  line-height:0px;
}

/* Basic HTML reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  padding-bottom:20px;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* defining basic background properties */

body{
  background-image:url(../img/bodyBG.png);
  background-repeat: repeat-x;
  background-position: top center;
  font-size:67.5%;
  font-family:verdana;
}

/* setting general content width to 960px */

body > *{
  width:960px;
  margin:0px auto;
}

/* styling the header */
header{
	position: relative;
  background-image:url(../img/headerBG.png);
  width:960px;
  height:307px;
  background-repeat: no-repeat;
}
header > *{
  padding-top:308px;
}
header h1, header h2 {

	display: none;
}

#language-switcher {
	position: absolute;
	top: 195px;
	right: 10px;
	z-index: 10000;
	padding-top: 0px;
	cursor: pointer;
	color: #fff;
	font-family: 'Ubuntu Condensed', Arial, sans-serif;
    text-rendering: optimizeLegibility;
	font-size: 14px;
}

#language-switcher .current-language {
	padding: 0 15px 0 0;
	background: url(../img/bg_lang_selector.png) no-repeat scroll center right;
}

#language-switcher .menu {
	display: none;
	width: 65px;
	position: absolute;
	top: 20px;
	right: -10px;
	background: #fff;
	padding: 20px 20px 10px 20px;
		z-index: 10000;
		box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.5);
}

#language-switcher .menu div {
	width: 100%;
	margin-bottom: 8px;
	color: #006bb8;
	cursor: pointer;
	font-size: 13px;
	text-align: right;
}

#language-switcher .menu div.close {
	position: absolute;
	top: -1px;
	right: 13px;
	cursor: pointer;
	width: 11px;
	height: 11px;
	background: url(../img/btn_close.png) no-repeat;
}

/* Styling the top slideshow */

#topSlideShow{
  background-image:url(../img/slideShow-initialBG.png);
  width:910px;
  height:285px;
  margin-top:-110px;
  padding:43px;
  position: relative;
}

#topSlideShow ul{
  list-style-type: none;
  display:block;
  width:910px;
  height:284px;
  overflow:hidden;
  position:relative;;
}

#topSlideShow ul li{
  position: absolute;
  top:0px;
  left:0px;
  display:none;
}

#topSlideShow ul li:first-child{
  display:block;
}

/* slide show cycle navigation */

#cycleNav{
  position: absolute;
  bottom:-18px;
  right:40px;
  z-index: 9999;
}

#cycleNav a{
  height:24px;
  width:24px;
  background-position: bottom;
  background-image:url(../img/cycleNavigateButton.png);
  display:block;
  float:left;
  font-size:0px;
}

#cycleNav a.activeSlide{
  background-position: top;
}

#slideControl a {
  display:block;
  height:335px;
  background:url(../img/slideshow-direction-sprite.png) no-repeat 0 155px;
  position: absolute;
  top:15px;
  z-index:100;
}


#slideControl .prevTop{
  left:18px;
  width:27px;
  background-position: -27px;
  cursor: pointer;
}

#slideControl .prevTop:hover{
  background-position:0px;
}
#slideControl .nextTop{
  width:26px;
  right:18px;
  background-position:-54px;
  cursor: pointer;
}
#slideControl .nextTop:hover{
  background-position:-80px;
}


/* Building out navigation tabs */



/* building out tabs product navigation */
#deviceNavigation{
  margin:0px auto 0px;
  position: relative;
  padding-top:40px;
  width:996px;
}

#deviceNavigation nav#tabNav{
  height:30px;
  width:100%;
  position: absolute;
  top:26px;
  left:18px;
  z-index:90;
}

#tabNav li{
  float:left;
  display:block;
  padding:0px 30px;
  background-color:#1d3f86!important;
  border:1px solid #111;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  line-height:30px;
  color:#87d3ff;
  cursor:pointer;
  text-transform: uppercase;
  margin-right:2px;
  /*text-indent: -9999px;  using images hide text */
  -webkit-box-shadow:  0px -4px 4px 2px #0e2854;
  box-shadow:  0px -5px 5px 1px #0e2854;
  height:30px;
  font-size: 16px;
  font-family: 'Ubuntu Condensed', Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

#tabNav li:hover,
#tabNav li.active{
  background-color:#FFF!important;
  color:#007dc5;
  border:1px solid #FFF;
  -webkit-box-shadow: none;
  box-shadow: none;
 /* background-position:center -30px!important;*/
}


/* set the image for the tab background 
#tabNav .tab0, #tabNav .tab1, #tabNav .tab2, #tabNav .tab3 {
	width:123px;

	overflow: hidden;
}
*/

/* css for HOSTS 
body#hostsPage #tabNav .tab0 {
	background: transparent url(../img/_tabs/tabs-pc.png) no-repeat top center;
}
body#hostsPage #tabNav .tab1 {
	background: transparent url(../img/_tabs/tabs-motherboard.png) no-repeat top center;
}
*/

/* css for DEVICES 
body#devicesPage #tabNav .tab0 {
	background: transparent url(../img/_tabs/tabs-storage.png) no-repeat top center;
}
body#devicesPage #tabNav .tab1 {
	background: transparent url(../img/_tabs/tabs-audio.png) no-repeat top center;
}
body#devicesPage #tabNav .tab2 {
	background: transparent url(../img/_tabs/tabs-dock.png) no-repeat top center;
}
body#devicesPage #tabNav .tab3 {
	background: transparent url(../img/_tabs/tabs-camera.png) no-repeat top center;
}
*/


/* BUilding out cycle and info for product navigation */
#deviceNavigation {
}
#deviceNavigation #devices{
  width:960px;
  padding:18px;
  background-image:url(../img/productCarouselBG.png);
  height:142px;
  position: relative;
  overflow: hidden!important; /* hides pointer when slides outside navigation */
}


/* thumbnail stuff here */
#deviceNavigation #devices .row:hover .image,
#deviceNavigation #devices .row.active .image{
  cursor:pointer;
  height:122px;
  width:180px;
  overflow: hidden;
}

#deviceNavigation #devices .row:hover .image,
#deviceNavigation #devices .row.active .image{
	background:#d9f1ff;
}

#deviceNavigation #devices .row .image {
  text-align: center;
  padding:10px 0;
  border-right:2px solid #d2d2d2;
}

/* adding arrow to :active state thumb */
#deviceNavigation #devices .row.active .pointer {
	width:180px;
	height:17px;
	position:absolute;
	top:160px;
	background: url(../img/thumb-point-bg.png) no-repeat;
	border-right:0;
	z-index: 10;
}


/* Building out the device carousel and related info functionality */
#devices > div{
  display:none;
  margin:0px 25px;
}

#devices .data{
  display:none;
}

/* styling previous and next carousel functionality */

#devices a{
  display:block;
  height:142px;
  background-image:url(../img/carousel-direction-sprite.png);
  position: absolute;
  top:18px;
}

#devices .prev{
  left:18px;
  width:27px;
}

#devices .prev:hover{
  background-position:-27px 0px;
}
#devices .next{
  width:26px;
  right:18px;
  background-position:-54px 0px;
}
#devices .next:hover{
  background-position:-80px 0px;
}

/* Styling the information section */

#deviceNavigation #information{
  background: #04244b url(../img/descriptionSpace.png) no-repeat bottom center;
  width:910px;
  padding:30px 25px 10px;
  margin:0px auto;
  position: relative;
  top:-18px;
  z-index: 1;
  min-height: 105px;
}

#information .left{
  float:left;
  width:285px;
  padding-right:25px;
}

#information h2{
  font-size:20px;
  font-weight: bold;
  color:#fff;
  margin-bottom:15px;
}

#information h3{
  color:#87d3ff;
  font-size:14px;
  font-weight: bold;
}

#information .right{
  float:right;
  width:580px;
  font-size:14px;
  float:right;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#information .right p.description{
  color:#FFF;
  margin-bottom:15px;
  line-height:20px;
}

#information .right p.website a{
  color:yellow;
  text-decoration: none;
}

#information . right p.website a:hover{
  text-decoration: underline;
}
/* Building out the footer */

footer > img{
  float:left;
  padding-top:10px;
}

footer{
  padding-top:0;
  font-size:10px;
}

footer .right{
  float:right;
  text-align: right;
  padding-top:13px;
}

footer .right p{
  color:#5082b1;  
}

#footerNav ul{
  margin:7px 0px 0px;
  padding:0px;
}

#footerNav ul li{
  display:inline-block;
  display:inline; zoom:1; /* IE hack for 7 */
  border-left:1px solid #5082b1;
  padding-right:3px;
  padding-left:7px;
}

#footerNav ul li:first-child{
  border-left:none;
}

#footerNav a{
  color:#FFF;
  text-decoration: none;
  font-weight:bold;
}