@import "base.css";
@import "base.structure.css";
@import "elements.structure.css";

body#observation { background: black url(/images/observation/banner.jpg) fixed no-repeat; width: 100%; }
#content > h2 a { color: white; }
#content > h2 .description { text-transform: none; }

h1, h2, h3 { text-shadow: black 0px 1px 0px; }
p, ul, ol, dl { text-shadow: black 0px 1px 0px; }

#page-wrapper { background: url(/images/observation/phone_top.png) top left no-repeat; height: 552px; width: 384px; z-index: -1; position: absolute; top: 0; }

#content-wrapper { width: 95%; margin-left: 0; margin-top: 120px; }
#content { }
#primary { margin-left: 384px; color: #c0c0c0; min-height: 336px; }

#secondary { display: none; }

#header #logo a { color: #d9d9d9; }
#header #mainnav dt a:hover { color: white; }
#footer { color: #646464; }
#footer a:hover { color: white; }

#content > h2 { margin-bottom: 24px; margin-left: 384px; border: 1px solid transparent; }
#content > h2 a { text-decoration: none; }
#content > h2 a .title { float: left; 
    display: block; font-size: 48px; 
    letter-spacing: -0.075em; line-height: 48px; }
#content > h2 a .description { text-align: right; margin-top: 24px;
    display: block; font-size: 18px; font-weight: 100; line-height: 24px; }

ul#tabs { width: 100%; display: table; background-color: #323232; border: 1px solid #404040; 
    font-weight: 300; text-transform: uppercase; font-size: 12px; 
    -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; 
    margin: 0; padding: 0; margin-bottom: 36px; position: static; 
    line-height: 36px; }
ul#tabs li { display: table-cell; border: 0; border-right: 1px solid #404040; text-align: center; padding: 0; width: 20%; }
ul#tabs li:last-child { border: 0; }
ul#tabs li a { background-image: none; border: 0; color: #969696; padding: 0; }
ul#tabs li a.current{ background-image: none; border: 0; color: #0088cc; background-color: #363636; }
ul#tabs li a:hover { background-image: none; border: 0; color: white; }
ul#tabs li:first-child  a{ border-left: 1px solid transparent; 
    -moz-border-radius-topleft: 18px; -webkit-border-top-left-radius: 18px; border-top-left-radius: 18px; 
    -moz-border-radius-bottomleft: 18px; -webkit-border-bottom-left-radius: 18px; border-bottom-left-radius: 18px; }
ul#tabs li:last-child a { border-right: 1px solid transparent; 
    -moz-border-radius-topright: 18px; -webkit-border-top-right-radius: 18px; border-top-right-radius: 18px; 
    -moz-border-radius-bottomright: 18px; -webkit-border-bottom-right-radius: 18px; border-bottom-right-radius: 18px; }

#screenshots { text-align: center; margin-top: 24px; }
#screenshots a { display: inline-block; padding: 0 0.5em; opacity: 0.5; }
#screenshots a:hover { opacity: 1.0; }
#screenshots img { border: 8px solid #323232; }

#pagenav { list-style: none; padding: 24px 24px; text-align: center; }
#pagenav li { margin: 0; padding: 0; display: inline; text-align: center; margin: 0 6px; }
#pagenav li a { color: #707070; text-decoration: none; padding-left: 12px; }
#pagenav li a:hover { background-color: transparent; color: white; }
#pagenav li#current a { color: white; }