/*
Theme Name: Northport Screens
*/

/* ----------------------------------------------------------------
    RESET
-----------------------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, main, hgroup, menu, nav, section { display: block; }
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: #000; }
body { line-height: 1; }
ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: 0;}
[hidden] { display: none; }
html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
input[type="text"],
input[type="email"],
input[type="password"],
textarea { -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; }
input[type="submit"],
input[type="reset"] { -webkit-appearance: none; }
.input-block-level { display: block; width: 100% !important; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix { display: inline-block; *zoom:1;}
* html .clearfix { height: 1%;} /* Hides from IE-mac \*/
.clearfix { display: block;}

/* ----------------------------------------------------------------
    TYPOGRAPHY
-----------------------------------------------------------------*/

body { font-family: Arial, sans-serif; font-size: 100px; line-height: 104px; font-weight: bold; color: #000; }

/* ----------------------------------------------------------------
    MAIN
-----------------------------------------------------------------*/

html, body, iframe, div { width: 100%; height: 100%; padding-bottom: 0; margin: 0; background: #fff; }
body { height: 1790px; } /* Based on 130px height for crawler */
#the-slider { overflow: hidden; display: none; }

/* Notes: Width of UL is going to be dependent on the count of slider elements (JS required? clear float?) */

/* The Slider, Internal Elements */

iframe, p, embed { overflow: hidden; }
ul { position: absolute; width: 1080px; height: 1790px; list-style-type: none; overflow: hidden; transition-duration: 0.5s; margin: 0; padding: 0; }
li { position: absolute; width: 1080px; height: 1790px; margin: 0; padding: 0; list-style: none; float: left; display: block; z-index: 1 !important; }
li.active { z-index: 2 !important; }

/* White overlay */
#white-overlay { position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; border: 0; background: #ffffff; z-index: 4; display: none; }

/* YouTube Player */
#player { position: absolute; width: 1080px; height: 608px; top: 591px; background-color: black; display: none; }
.video { background-color: black; z-index: 1; }

/* Content Types */
#text-wrapper { height: 100%; width: 100%; margin: 0; padding: 0; border: 0; background: #000; }

#text-container { vertical-align: middle; }
#text-container p { margin: 0 auto; padding: 30px 180px; color: #fff; border-left: 40px solid #ffcc00; }

#image-wrapper { position: relative; }
#image-wrapper .width { width: 100%; display: inline-block; position:absolute; top:0; bottom:0; margin:auto; }
#image-wrapper .height { height: 100%; display:block; margin: 0 auto; }

/* Crawler */

#crawler { position: absolute; bottom: 0; width: 100%; height: 130px; background-color: #ffcc00; }
#crawler span { color: #fff; }
#crawler div { background: none; }
#crawler h3 { font-size: 60px; line-height: 130px; text-align: center; }

#crawler { z-index: 9999; }