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-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
table{border-collapse: collapse;border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;vertical-align: middle;}
q, blockquote {quotes:none;}
q:before, q:after, blockquote:before, blockquote:after {content:""; content: none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
#viewport-shadow {position:relative;width:1200px;margin:0px auto;}
#viewport, #box, .slide {width:1200px;height:500px;}
.slide img{display:block;width:100%;height:auto;}
#viewport{overflow: hidden;}
#controls{position:relative;top:-30px;float: right;overflow: hidden;}
#controls li{display:inline;}
.goto-slide {
  margin-left:10px;
  width: 14px;
  height: 14px;
  display: block;
  float: left;
  border: solid 1px #000;
  background-color: #555;
  border-radius: 8px;
  -webkit-box-shadow: inset 0px 0px 8px #333;
  -moz-box-shadow: inset 0px 0px 8px #333;
  box-shadow: inset 0px 0px 8px #333;
}
.goto-slide.current{background:#2edbac;}
#prev{
  position:absolute;
  top:240px;
  left:20px;
  width:28px;
  height:48px;
  background:url(../images/arr.png) left no-repeat;
  display: block;
  -webkit-transition: background .4s;
  -moz-transition: background .4s;
  transition: background .4s;
  z-index:111111;
}
#prev:hover {background:url(../images/arr.png) -66px no-repeat;border: none;}

#next{
  position:absolute;
  top:240px;
  right:20px;
  width:28px;
  height:48px;
  background:url(../images/arr.png) -132px no-repeat;
  display: block;
  -webkit-transition: background .4s;
  -moz-transition: background .4s;
  transition: background .4s;
  z-index:111112;
}
#next:hover {background:url(../images/arr.png) right no-repeat;border: none;}



#effect-switcher h2 {border-bottom: solid 1px #555; margin: 0 0 10px;}
#effect-list {overflow: hidden;}
#effect-list li {display: inline;}
.effect,.effect:hover {
  display: block;
  float: left;
  margin: 0 10px 0 0;
  border: solid 1px black;
  border-radius: 7px;
  padding: 10px 12px 6px;
  color: #ccc;
  text-decoration: none;
  background-color: #555;
  -webkit-box-shadow: inset 0px 0px 8px #000;
  -moz-box-shadow: inset 0px 0px 8px #333;
  box-shadow: inset 0px 0px 8px #333;
}
.effect.current, .effect:hover.current {color: #2edbac;}
#time-indicator{
  width:0px;
  height:3px;
  background-color: #2edbac;
  position: absolute;
  top:497px;
  left:0px;
}