/*
Theme Name: Longstation
Theme URI: http://longstation.storme.com
Description: The official theme of the thing that is Longstation
Version: 1.0
Design: Aaron Long
Build: David Stagg
*/

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, font, 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 {
  margin: 0;
  padding: 0;
  } 
  
a img { border: none; }
a { outline: none; }

body { background: #fff url(../images/body-bg.jpg) repeat top left; color: #333; font: 12px/1.5em Arial, Helvetica, sans-serif; }

ul, ol { margin: 1em 0; padding-left: 2.5em; }
dt { margin: 0.5em 0 0; }
dd { margin: 0.25em 0 0.5em 2.5em; }

h1, h2, h3, h5, h5, h6 { color: #333; font-weight: normal; text-shadow: 0 1px 3px #fff; letter-spacing: -.02em; margin-bottom: 10px;  } 
h1 { font-size: 32px; line-height: 36px; }
h2 { font-size: 24px; line-height: 28px; }
h3 { font-size: 20px; line-height: 24px; }

h1 a, h2 a, h3 a, h5 a, h5 a, h6 a, h1 a:visited, h2 a:visited, h3 a:visited, h5 a:visited, h5 a:visited, h6 a:visited { text-decoration: none; color: #333; }
h1 a:hover, h2 a:hover, h3 a:hover, h5 a:hover, h5 a:hover, h6 a:hover { text-decoration: underline; }

p { margin-bottom: 14px; }

a { color: #797979; }
a:hover { color: #444; text-decoration: none; }
a:active { background: transparent !important; }
a:visited { color: #797979; }

acronym, abbr, span.caps { font-size: 0.9em; letter-spacing: .07em; }

blockquote {
  margin: 15px 30px 0 10px;
  padding-left: 20px;
  border-left: 5px solid #ddd;
  }

/* STRUCTURE */

#container { width: 1000px; margin: 0 auto; border-left: 20px solid #000; border-right: 20px solid #000; }
#header { position: relative; display: block; height: 204px; background: #fff url(../images/header-bg.png) no-repeat top left; }
.sub #header { background: transparent url(../images/header-bg-sub.png) no-repeat top left; }

#longstation-logo { display: block; width: 321px; height: 200px; text-indent: -9999px; background: transparent url(../images/longstation-logo.png) no-repeat top left; }

#menu { padding-top: 14px; position: absolute; top: 0; right: 0; }
ul.tabs, #menu ul.tabs ul { margin: 0; padding: 0; list-style: none; }
ul.tabs li { background: none; margin: 0 14px 0 0; padding: 0 14px 0 0; display: block; float: left; position: relative; }
ul.tabs li a { padding: 0; display: block; color: #fff; }
ul.tabs li a:hover { padding: 0; display: block; color: #fff; }
ul.tabs li a:visited { padding: 0; display: block; color: #fff; }

#search { display: block; width: 270px; height: 56px; background: #F2F276 url(../images/search-box.png) no-repeat top left; position: absolute; top: 43px; right: 0; padding: 22px 0 0 160px; z-index: 10; }

#content { background: #fff; }
  .sub #content { padding: 20px; }
#latest-stream { float: left; width: 423px; padding-right: 75px; padding-bottom: 20px; background: #fff url(../images/latest-stream-bg.png) repeat-y 423px -107px; }
#latest-stream .feed { margin: 0 0 10px 0; padding: 20px; background: transparent url(../images/post-bg.png) repeat top left; width: 372px; }
#right-col { float: right; width: 479px; margin-top: -107px; position: relative; z-index: 1; }
.main-pic { display: block; width: 479px; height: 237px; }
.main-excerpt { margin-top: -10px; }
.main-excerpt h1 { padding: 6px 10px; position: relative; background: #fff; border: 5px solid #000; font-size: 18px; color: #cc6633; display: inline; margin-top: -6px; margin-left: -60px; z-index: 11; }
.main-excerpt h1 a { font-size: 18px; color: #c63; }
.main-excerpt h1 span { background: transparent url(../images/news-h1-bg.png) no-repeat bottom left; position: absolute; bottom: -45px; left: -3px; display: block; width: 61px; height: 45px; z-index: 99; }
.main-excerpt div { width: 460px; float: right; padding-top: 16px; }
#story-bg { background: #F2F276; border: 4px solid #000; height: 20px; width: 200px; position: absolute; right: 20px; z-index: 1; top: 348px; }
#story-nav { position: absolute; right: 40px; z-index: 2; }
#story-nav a { display: block; margin-left: 6px; padding: 8px 6px; color: #000; text-decoration: none; float: left; }
#story-nav a.activeSlide { color: #fff; background: #000; }
#news-header { display: block; width: 136px; height: 114px; text-indent: -9999px; position: absolute; top: 160px; right: 0; background: transparent url(../images/news-header.png) no-repeat top left; z-index: 10; }

#comic-header { display: block; width: 292px; height: 109px; text-indent: -9999px; background: transparent url(../images/comic-of-the-week-header.png) no-repeat top left; z-index: 10; position: relative; }
#comic-of-the-week { margin: -20px 0 20px 0; }
#comic-of-the-week .main-pic { display: block; width: 479px; height: 288px; }

#site-footer { height: 372px; background: #333 url(../images/footer-bg.jpg) repeat-x top center; color: #fff; }
#site-footer a { color: #fff; }

.about-clip { width: 510px; float: left; }
#highlight { padding: 20px; float: right; width: 417px; height: 202px; display: block; background: transparent url(../images/lower-right-bg.png) no-repeat top left; margin-right: 10px; color: #000; }
#highlight a { color: #000; }

#upper-footer { height: 80px; padding-top: 20px; padding-left: 20px; margin-bottom: 20px; }
#lower-footer { margin-left: 20px; }

/* MISC */
input[type="text"], input[type="password"], textarea { margin: 0; }


.clear { clear: both; }