/* global
============= */

html {
  overflow-y: scroll;
}
body {
  background: #e6e6e6 url(../img/bcg.png) top center repeat-x;
  font-family: 'Open Sans', sans-serif;
}

#refresh {
  width: 100px;
  text-align: center;
  margin: 40px auto;
}
#refresh a {
  cursor: pointer;
}


/* header
============= */

#header {
  height: 175px;
  width: 1300px;
  margin: 0 auto;
}

#logo img {
  width: 299px;
  height: 71px;
  margin-top: 34px;
}
#nav {
  list-style: none;
  margin-left: 80px;
}
#nav li {
  float: left;
  width: 112px;
  height: 157px;
  display: block;
}
#nav li a{
  width: 112px;
  height: 157px;
  display: block;
  background: url('../img/menu.png') no-repeat;
  position: relative;
}
#nav li a .text {
  position: absolute;
  width: 112px;
  display: block;
  font-size: 12px;
  color: #cccccc;
  text-align: center;
  top:96px;
}
#nav .mobileVertical {background-position: -49px -12px}
#nav .mobileHorizontal {background-position: -161px -12px}
#nav .tabletVertical {background-position: -273px -12px}
#nav .tabletHorizontal {background-position: -385px -12px}
#nav .desktop {background-position: -497px -12px}


#searchBar {
  width: 304px;
  height: 175px;
  position: relative;
  background: url('../img/menu.png') no-repeat -609px -12px;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
}
#searchBar input {
  top: 62px;
  border-radius: 3px;
  border: none;
  height: 29px;
  position: absolute;
}
#searchBar .input {
  width: 157px;
  padding: 0 6px;
  background: #fff;
  color: #666;
  left: 82px;
}
#searchBar .submit {
  width: 52px;
  background: #666666;
  color: #fff;
  cursor: pointer;
  left: 253px;
}

#searchBar .submit:hover {
  background: #6f6f6f;
}

.selector {
  width: 22px;
  height: 18px;
  position: absolute;
  background: url('../img/selected.png') no-repeat;
  top: 123px;
  left: 45px;
  display: none;
}
.active .selector {
  display: block;
}

/* devices shared
============= */

#device {
  margin: 0 auto;
  position: relative;
  background-repeat: no-repeat;
}
#device iframe {
  border: none;
  position: absolute;
}


/* devices
============= */

#device.mobileVertical {
  width: 380px;
  height: 798px;
  background-image: url('../img/device/iphoneframevernoclock.png');
}

#device.mobileVertical iframe {
  width: 318px;
  height: 503px;
  top: 138px;
  left: 33px;
}


#device.mobileHorizontal {
  margin-top: 90px;
  width: 798px;
  height: 380px;
  background-image: url('../img/device/iphoneframehornotoolbar.png');
}

#device.mobileHorizontal iframe {
  width: 568px;
  height: 319px;
  top: 28px;
  left: 117px;
}


#device.tabletHorizontal {
  width: 1266px;
  height: 992px;
  background-image: url('../img/device/ipadframehor.png');
}

#device.tabletHorizontal iframe {
  width: 1024px;
  height: 768px;
  top: 113px;
  left: 121px;
}


#device.tabletVertical {
  width: 992px;
  height: 1266px;
  background-image: url('../img/device/ipadframever.png');
}

#device.tabletVertical iframe {
  width: 768px;
  height: 1024px;
  top: 121px;
  left: 111px;
}


#device.desktop {
  width: 1400px;
  height: 830px;
  background-image: url('../img/device/screen.png');
}

#device.desktop iframe {
  width: 1044px;
  height: 659px;
  top: 50px;
  left: 175px;
}

/* clock */

#clock {
  position: absolute;
  display: none;
  width: 70px;
  height: 20px;
  color: #ffffff;
  top: 117px;
  left: 160px;
  text-align: center;
  font-weight: 600;
  opacity: 0.8;
}

#device.mobileVertical #clock {
  display: block;

}