@import url('reset.css');
 
@font-face { 
  font-family: 'FranchiseRegular';
  src: url(//:) format('no404'),
  url('franchise-bold-webfont.woff') format('woff'),
  url('franchise-bold-webfont.ttf') format('truetype'),
  url('franchise-bold-webfont.svg#webfontsrhBB4QZ') format('svg');
  font-variant: normal;
  font-weight: normal;
  font-style: normal;
}

@font-face { 
    font-family: 'monofur';
    src: url(//:) format('no404'),
    url('monof55-webfont.woff') format('woff'),
    url('monof55-webfont.ttf') format('truetype'),
    url('monof55-webfont.svg#webfontnI5VXsei') format('svg');
    font-variant: normal;
    font-weight: normal;
    font-style: normal;
}

/* body and general styles */
body { margin: 0; padding: 0; background: #38373c url('../graphics/sidebar.png') left top repeat;
    font-family: Arial, Helvetica, sans-serif; color: #333333; font-size: 14px; }
.body { width: 960px; margin: 0 auto; clear: both; }
h1 { font-family: 'FranchiseRegular'; font-size: 44px; font-weight: normal; }
h2 { color: #474747; font-family: 'FranchiseRegular'; font-size: 30px; text-shadow: 0 1px 0 #ffffff;
    margin-bottom: 15px; font-weight: normal; }
h3 { font-family: 'FranchiseRegular'; font-size: 24px; margin-bottom: 10px; font-weight: normal; }
p { margin-bottom: 15px; }
a { color: #5454ab; text-decoration: underline; }
a:hover { text-decoration: none; }
ul { padding-left: 20px; list-style-type: disc; margin-bottom: 15px; }
li { margin-bottom: 3px; }
p, li { line-height: 1.2em; }
hr { width: 80%; }

/* header */
header.body { height: 147px; background: url('../graphics/sprite.png') top left repeat-x;
    color: #ffffff; position: relative; }
header.body h1 { padding: 7px 0 0 10px; color: #242670; text-shadow: 0 1px 0 rgb(255, 255, 255), 0
    -1px 0 rgb(0, 0, 0); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.17), 0 -1px 0 rgba(0, 0, 0, 0.7);
    float: left; }
#header-right { float: right; background: url('../graphics/sprite.png') center -155px repeat-x; margin:
    6px 15px 0 0; border: 3px solid rgb(255, 255, 255); border: 3px solid rgba(255, 255, 255, 0.2);
    -moz-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding;
    -webkit-background-clip: padding; background-clip: padding-box; -moz-background-origin: padding;
    -webkit-background-origin: padding; background-origin: padding-box; font-variant: small-caps;
    font-weight: bold; -moz-box-shadow: 0 1px 5px #000000; -webkit-box-shadow: 0 1px 5px #000000;
    box-shadow: 0 1px 5px #000000; }
#header-right a { color: #ffffff; text-shadow: 0 -1px 0 rgb(0, 0, 0); text-shadow: 0 -1px 0 rgba(0,
    0, 0, 0.4); text-decoration: none; padding: 8px; display: block; }
#header-right a:hover { text-shadow: 0 0 8px #ffffff, 0 -1px 0 rgb(0, 0, 0); text-shadow: 0 0 8px
    #ffffff, 0 -1px 0 rgba(0, 0, 0, 0.4); }

/* nav */
nav { position: absolute; top: 50px; margin: 15px 0; width: 960px; text-align: center; }
nav>h3 { display: none; }
nav>ul { margin: 8px auto 0 auto; padding: 0; }
nav>ul>li { display: inline; position: relative; padding-top: 10px; }
nav>ul>li>a { color: #d1d1d1; font-variant: small-caps; font-weight: bold; font-size: 18px; margin:
    7px 0; padding: 8px 15px; text-decoration: none; text-shadow: 0 -1px 0 rgb(0, 0, 0); text-shadow: 0
    -1px 0 rgba(0, 0, 0, 0.4); z-index: 3; position: relative; }
nav>ul>li>a>span { font-size: 10px; position: absolute; bottom: -2px; left: 50%; margin-left: -5px; }
nav>ul>li>a:hover>span { display: none; }
nav>ul>li>ul { background: #f4f4f4; width: 170px; font-variant: normal; font-weight: bold; color:
    #5454ab; -moz-border-radius: 8px; border-radius: 8px; -moz-box-shadow: 0 3px 5px #000000;
    -webkit-box-shadow: 0 3px 5px #000000; box-shadow: 0 3px 5px #000000; border: 1px solid #999999;
    list-style-type: disc; text-align: left; padding: 8px 30px 8px 30px; font-size: 12px; position:
    absolute; left: 50%; top: 45px; margin-left: -115px; z-index: 20; }
nav>ul>li>ul:before { background: url('../graphics/arrow-trans.png') center bottom no-repeat; height:
    13px; width: 230px; display: block; content: ""; position: absolute; top: -13px; left: 0; }
nav>ul>li>ul li { margin: 5px 0; }
nav>ul>li>ul a { color: #5454ab; }
nav>ul>li>ul a:hover { text-decoration: none; }
nav>ul>li>ul>li>ul { padding-left: 30px; list-style-type: decimal; }
div#navigation_blob { -moz-border-radius: 5px; border-radius: 5px; background: #181818; background:
    rgba(255, 255, 255, 0.1); -moz-box-shadow: 0 1px 5px #000000; -webkit-box-shadow: 0 1px 5px #000000;
    box-shadow: 0 1px 5px #000000; position: absolute; z-index: 2; }

/* section */
section.body { background: #dddddd url('../graphics/gray.png') top left repeat-y; -moz-box-shadow:
    inset 0 2px 5px #000000; -webkit-box-shadow: inset 0 0 5px #000000; box-shadow: inset 0 0 5px
    #000000; border: 15px solid #ffffff; border: 15px solid rgba(255, 255, 255, 0.1); -moz-border-image:
    url('../graphics/stitches-trans.png') 15 15 15 15 repeat; -webkit-border-image:
    url('../graphics/stitches-trans.png') 15 15 15 15 repeat; border-image:
    url('../graphics/stitches-trans.png') 15 15 15 15 repeat; margin-bottom: 15px; -moz-background-clip:
    padding; -webkit-background-clip: padding; background-clip: padding-box; -moz-background-origin:
    padding; -webkit-background-origin: padding; background-origin: padding-box; }
section.body>div { float: left; display: inline; width: 620px; padding: 20px 0 10px 10px; }
section.body:after { content: ""; display: block; clear: both; }
section.body>div.pagination { text-align: center; position: relative; }
p.timestamp, section.body>div.pagination { background: #aaaaaa; padding: 3px; -moz-border-radius: 3px;
    border-radius: 3px; font-size: 12px; color: #474747; }

/* aside */
section.body aside { float: right; display: inline; width: 270px; padding: 20px 10px 10px 20px; color: #d4d4d4;
    text-shadow: 1px 1px 0 #000000;}
section.body aside a { color: #7777bc; }

/* footer */
footer.body { background: url('../graphics/shoe-trans.png') center center no-repeat; height: 450px; color:
    #dfdfdf; font-weight: bold; text-shadow: 1px 1px 1px #000000; text-align: right; position: relative;
    }
footer.body p { position: absolute; right: 0; bottom: 0; line-height: 1.4em; }
footer.body a { color: #7777bc; }

/* home page slider. todo - fix so <li> height = <li> lineheight, get rid of <li> and <a> padding */
#slider-code { width: 960px; height: 400px; overflow: hidden; margin: 0 auto 20px auto; background:
    #000000; color: #00ff00; z-index: 2; border: 3px solid rgb(255, 255, 255); border: 3px solid
    rgba(255, 255, 255, 0.2); -moz-border-radius: 5px; border-radius: 5px; -moz-background-clip:
    padding; -webkit-background-clip: padding; background-clip: padding-box; -moz-background-origin:
    padding; -webkit-background-origin: padding; background-origin: padding-box; -moz-box-shadow: 0 1px
    5px #000000; -webkit-box-shadow: 0 1px 5px #000000; box-shadow: 0 1px 5px #000000; }
#slider-code .viewport { float: left; width: 760px; height: 400px; overflow: hidden; position: relative; }
#slider-code .overview { list-style: none; padding: 0; margin: 0;  position: absolute; left: 0; top: 0; }
#slider-code .overview li{ float: left; margin: 0; padding: 0; height: 400px; width: 760px;
    position: relative; }
#slider-code .pager { list-style: none; float: left; width: 200px; height: 400px;
    background: #474747; margin: 0; padding: 0; z-index: 560; }
#slider-code .pager li { margin: 0; padding: 0; position: relative; z-index: 570; height: 80px;
    background: #474747 url('../graphics/sprite.png') left -197px repeat-x; line-height: 80px; width: 200px; }
#slider-code .pagenum { text-decoration: none; text-align: center; color: #666666; font-size: 14px;
    font-weight: normal; display: block; margin: 0; padding: 0 37px 0 0; position: relative; z-index: 580; font-family:
    'monofur'; font-size: 40px; text-shadow: 0 -1px 0 #000000; width: 200px; }
#slider-code .pagenum:hover { color: #f4f4f4; background: url('../graphics/gray-arrow.png') top left
    no-repeat; }
#slider-code .active { color: #f4f4f4; position: relative; z-index: 580; background:
    url('../graphics/gray-arrow.png') top left no-repeat; }
#slider-code .overview li img { display: block; float: left; }
#slider-code .overview li h2 { font-family: 'monofur'; font-weight: normal; font-size: 150px; position:
    absolute; top: 75px; left: 50px; color: #ffffff; color: rgba(255, 255, 255, 0.3); text-shadow:
    0 0 0 rgba(0, 0, 0, 0); }
#slider-code .overview li p { position: absolute; bottom: 0; left: 15px; width: 530px; padding: 10px
    100px 10px 100px; background: #000000; background: rgba(0, 0, 0, 0.7); color: #ffffff;
    font-weight: bold; font-size: 14px; text-shadow: 0 1px 0 #000000; }
    
/* nextgen styles */