/* CSS Document - Don't prefix gradients for: Chrome 26+, Firefox 16+, Opera 12.10+, IE10+ */
header, section, footer { position: relative; top: 0; left: 0; }

body { background: #E8E8E8; }

header { background-color: #F2F2F2; height: 56px; width: 100%; border: 1px solid #000; border-width: 0 0 1px 0; }
header h1 { position: absolute; top: 0; left: 10px; height: 56px; margin: 0; font: 600 2.25em/56px "Lucida Sans Unicode","Open Sans",sans-serif; color: #222; }

.no-cssgradients.svg header, .no-cssgradients.svg footer, .no-js header, .no-js footer { background: #F2F2F2 url("../style/Header_Gradient.svg") 0 0 repeat-x; }

.cssgradients header, .cssgradients footer, .no-js header, .no-js footer { background: #F2F2F2 linear-gradient(180deg, #EAEAEA 0%, #A2A5A7 100%); }

.textshadow h1 { text-shadow: 0 1px 0 #FFF, 0 -1px 0 #000; }

.textshadow footer { text-shadow: 0 1px 0 #FFF; }

#paypal { position: absolute; top: 5px; right: 5px; height: 20px; width: 74px; }

nav { position: absolute; bottom: 0; right: 0; padding: 0; margin: 0; overflow: hidden; }
nav a, nav b { background: #06C; color: #FFF; float: left; font: 700 13px/24px "Open Sans",sans-serif; text-align: center; font-variant: small-caps; position: relative; height: 24px; padding: 0 12px; border: 1px solid #000; border-width: 1px 0 0 1px; margin: 0; display: block; z-index: 0; }
nav a, nav a:link, nav a:visited, nav a:hover, nav a:active { text-decoration: none; color: #FFF; }
nav a:hover { background: #EEE; color: #000; }
nav b { background: #FFF; color: #000; }

section { background-color: #F2F2F2; min-height: 25px; width: 100%; padding: 8px 0; }
section a:link, section a:visited { color: #00F; }
section a:hover, section a:active { color: #008000; }
section p { margin: 0 8px 16px; }

footer { background: #F2F2F2; height: 25px; width: 100%; border: 1px solid #404040; border-width: 1px 0 0 0; text-align: center; font: 12px/25px "Lucida Sans Unicode","Open Sans",sans-serif; color: #000; }
footer a { text-decoration: none; }
footer a:link, footer a:visited { color: #00F; font-weight: 600; }
footer a:hover, footer a:active { color: #008000; }

/*  MEDIA QUERIES  */
@media screen and (max-width: 1023px) and (orientation: portrait) { header { height: 40px; margin-bottom: 29px; }
  header h1 { height: 40px; font-size: 1.8em; line-height: 40px; }
  #paypal { top: 10px; right: 10px; }
  nav { position: absolute; bottom: 0; left: 0; width: 100%; margin-bottom: -30px; }
  nav a, nav b { width: 28.7%; border-width: 0 1px 1px 0; height: 28px; line-height: 28px; }
  nav a:last-child, nav b:last-child { border-right-width: 0; }
  .csscalc nav a, .csscalc nav b { width: calc( ( 100% - 74px ) / 3 ); }
  footer { height: 40px; }
  footer span { display: block; margin: 0 auto; line-height: 20px; } }
@media screen and (min-width: 1024px) { body { background: #EEE url("../style/100px-Grid_Paper.png") 50% 0% repeat; }
  #warning_bar { position: relative; top: 0; left: 0; height: 42px; width: 1000px; margin: 0 auto; display: block; }
  header { width: 998px; border-width: 0 1px 1px 1px; margin: 0 auto 5px; border-radius: 0 0 8px 8px; }
  header h1 { left: 25px; }
  nav { padding: 0 0 0 24px; border-radius: 0 0 6px 0; }
  nav a, nav b { border-width: 1px 0 0 0; }
  nav a:first-child, nav b:first-child { border-radius: 6px 0 0 0; }
  nav a:last-child, nav b:last-child { padding: 0 12px 0 6px; }
  .csstransforms nav a::before, .csstransforms nav b::before { background: #06C; content: ""; z-index: -1; -webkit-transform: skew(-45deg); -ms-transform: skew(-45deg); transform: skew(-45deg); display: block; position: absolute; top: 0; left: 0; height: 24px; width: 24px; border-left: 1px solid #000; margin-left: -12px; }
  .csstransforms nav a:first-child, .csstransforms nav b:first-child { border-radius: 0; padding: 0 30px 0 6px; }
  .csstransforms nav a:nth-child(2), .csstransforms nav b:nth-child(2) { padding: 0 30px 0 6px; }
  .csstransforms nav a:last-child, .csstransforms nav b:last-child { padding: 0 18px 0 6px; }
  .csstransforms nav a:hover::before { background: #EEE; color: #000; }
  .csstransforms nav b::before { background: #FFF; color: #000; }
  section { min-height: 25px; width: 998px; padding: 8px 0; border: 1px solid #404040; margin: 5px auto; border-radius: 8px; overflow: hidden; }
  footer { width: 998px; border-width: 1px; margin: 5px auto; border-radius: 8px; } }