@charset "UTF-8"; /* * Last selector in a declaration req's the comma REMOVED, or margin appears on body * DO NOT name class starting with a number! ============================ IE Conditional Comments The DOCTYPE (below) when placed in a page head, allows IE cc's to be placed in this main css file. Target specific IE versions with class prefix: .ie [rule here...] .ie .ie6 (rule here...) .ie .ie7 (rule here...) .ie .ie8 (rule here...) .ie9 (9+ greater than rule here...) NO external IE stylesheets are needed with the conditional HTML head (see HTML document). CThe DOCTYPE onditional comment in the document HEAD references various ie classes. So all IE conditional css can be placed within this main.css simply by adding the IE browser version class at the start of the declaration (rule). For details see: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ Newest recommendation (140416): */ /* CSS CONTENTS ================================================== RESET, BASICS HTML, BODY IMG TYPOGRAPHY LINKS LISTS FORMS MISC - ID/CLASSES BUTTONS LAYOUT */ /* RESET, BASICS ================================================== */ /* 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 /* ---HTML5 selectors --- , 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; } body { line-height: 1; background: #5c5c5c; } ol, ul { list-style: none; } cite { display: block; font-size: 0.9em; color: #fff; margin-top: .4em; } cite:before { content: "\2014 \0020"; } /* HTML, BODY ================================================== */ /*html {css3 bkgnd background: url(../_jncl/01.jpg) no-repeat fixed center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }*/ /* HTML SCROLLBAR FIX - html { overflow-y: scroll; } force scroll bar on content short pgs - to prevent content position shifting on pages without scroll bar.*/ html { overflow-y: scroll; overflow-x: hidden; /* I do NOT want hz scrollbar */ } html, body { font-size: 1rem; height: 100%; width: 100%; padding: 0; margin: 0; /*background: url(../_incl/_random.php) 100% 100%;*/ /*background: #000; this does not work with full bkgnd technique used*/ } /*@media screen and (min-width:500px) { } /* ================================================== IMG */ a img { /* removes default blue "link" border, some browsers */ border: none; } img.flex { max-width: 100%; height: auto; width: auto\9; }/*ie8*/ .img-flr { /*image bdr flush right with margin*/ border: 1px double #ccc; margin:0 0 0.25em 1em; float: right; } .img-fll {/*image bdr flush left with margin*/ border: 1px double #666; margin:0 1em 0.4em 0; float: left; } .ir { /*image replacement, http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ ----*/ display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; } /* TYPOGRAPHY ================================================== */ /* --------- 12px needed to maintain consistent distance for elements from left side of LAYOUT DIVs (EMs vary the spacing because EMs are based on the parent text size). To avoid "box model" math and IE fixes, "margin-left" is used with type/element instead of margin on DIV columns. -------- */ h1, h2, h3, h4, h5, h6 { color: #fff; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: normal; /*text-shadow: 1px 1px 2px rgba(0, 0, 0, .4);*/ } /* TXT SHADOW 1. value = X-coordinate 2. value = Y-coordinate 3. value = blur radius 4. value = color of the shadow RGBA values for the color, for example 40% transparency of white 0.4 .ie h1, .ie h2, .ie h3, .ie h4, .ie h5, .ie h6 { text-shadow: none; } */ h1 { font-size: 2em; line-height: 1.2em; margin-bottom: 1em;} h2 { font-size: 1.8em; line-height: 1.2em; margin-bottom: .5em; } h3 { font-size: 1.5em; line-height: 1.2em; margin-bottom: .5em; } h4 { font-size: 1.5em; line-height: 1.2em; margin-bottom: .5em; } h5 { font-size: 1.5em; line-height: 1.2em; margin-bottom: .5em; } h6 { font-size: 1em; line-height: 1em; margin-bottom: .2em; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } p { margin-bottom: 1.4em; padding: 0; color: #fff; font-family: Tahoma, Geneva, sans-serif; line-height: 1.8em; }/*PX left. See h1-h6 note above*/ /*p img { margin: 0; }*/ abbr { cursor: help; } em { font-style: italic; } strong { font-weight: bold; } /*======================= Blockquote */ blockquote { color: #000; background: url(../_i/bkgnd-w70.png) repeat; margin: 1em 0 2em 0; padding: .8em 2em 2em; font-family: "Courier New", Courier, monospace; line-height: 1.8em; } blockquote p { color: #000; font-family: "Courier New", Courier, monospace; } blockquote.nobk { color: #fff; background: none; font-style: normal; font-weight: bold; /*margin: 1em 0 2em 0; padding: .8em 2em 2em;*/ } @media only screen and (min-device-width : 280px) and (max-device-width : 420px) { blockquote { margin: .8em 0; padding:.5em .8em 1.2em 1.5em; } } blockquote::before{ content: "\201C"; /*Unicode for Left Double Quote*/ /*Font*/ font-family: Georgia, serif; font-size: 5em; font-weight: bold; color: #fff; letter-spacing: 0.1em; /*Positioning*/ position:relative; left: 0; top:.4em; } blockquote::after{ /*Reset to make sure*/ content: ""; } blockquote cite { display: block; margin-top: 1em; font: 0.8em/2em "Palatino Linotype", "Book Antiqua", Palatino, serif; text-transform: uppercase; letter-spacing: 0.2em; } blockquote cite:before { content: "\2014 \0020"; } /*blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }*/ /* LISTS ================================================== */ /* CAREFUL - effects NAV and PROJECTS list*/ ul, ol, dl{ margin: 0 0 1.4em 0; /*font-size: .8em;*/ color: #FFF; } ul.click li { padding-top: .6em;/*Google usability fail - "clickable too close"*/ } @media (min-width: 768px) { .disc { margin-left: 2.2rem; } ul.click li { padding-top:0 ; } } /*#PROJECTS ul li {margin: 0 0 1.5em .5em;}*/ ul { list-style: none outside; } /*especially req for nav, use class below for bulleted lists*/ ol { list-style: decimal; } li { /*font-size: 1.2em;*/ line-height: 1.6em; margin: 0 0 .8em 0; } dt { font-weight: bold; margin-bottom: 0.5em; } dd { /*font-size: 1em;*/ line-height:1.5em; margin: 0 0 .8em 1.4em; } /*size is to counter inherit reduction*/ ol, ul.sq, ul.circle, ul.disc { margin: .8em 0 1.4em 2.4em; } ul.sq { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } ol.alpha { list-style: upper-alpha outside; } /*Bold link, plain author*/ /*.by dt {font-size: 1.1em; margin-bottom: 1.2em;}*/ .by li{ /*font-size: 0.9em;*/color: #666; line-height:1.8em; } /*to get author name be different color*/ .by li a { font-weight:bold;color:#666;margin-right: .6em; } .by a:hover, .by a:focus { color: #000; } dl li { /*font-size: 1.2em;*/ } /*multi-column single ul - http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/*/ ul.multi,ol.multi{ width:57em; margin-bottom:2em; overflow:hidden; /* border-top:1px solid #ccc;*/ } .col2 li{ line-height:1.5em; float:left; display:inline; width:50%; } .col3 li{ line-height:1.5em; float:left; display:inline; width:33.333%; /*padding-right: 1em;*/ } .col4 li{ line-height:1.5em; float:left; display:inline; width:25%; } .col6 li{ line-height:1.5em; float:left; display:inline; width:16.666%; } /* LINKS ================================================== */ a, a:visited { color: #ccc; text-decoration: none; outline: 0; border-bottom: 1px dotted #999; } address a, address a:visited { color: #000; text-decoration: none; outline: 0; border-bottom: 1px dotted #000; } a:hover{/*, a:focus - removed for about pg slideshow or link stays red*/ color: #f03; border-style: none; } .none { cursor: none; } .pointer { cursor: pointer; } p a, p a:visited { line-height: inherit; } .nolink { border-bottom: none; padding-right: .8em; } .grow { transition: all .2s ease-in-out; } .grow:hover { transform: scale(1.1); } /*Google usability fail - "clickable too close"*/ div.click a { padding-right: .5em; padding-top: 1.4em; padding-left: .5em; } @media (min-width: 768px) { div.click a { padding-right: 0; padding-bottom: 0; padding-left: 0; border-bottom: 1px dotted #999; } } /* END Google usability fail - "clickable too close"*/ /* #FORM ================================================== */ #send { margin: 1em 0 2em 0; cursor: pointer; font-size: 1.1em; padding: .5em .5em .5em .5em; background: #000; border: 1px solid #000; color:#fff; } #send:hover { /*border: 1px dotted #999;*/ color: #f00; } button:hover { cursor: pointer; } input:focus, button:focus { border: 2px solid #ffc; } fieldset { margin-bottom: 1em; } input[type="text"], input[type="email"], textarea, select { outline: none; max-width: 100%; display: block; color: #000; margin: 0 0 .8em 0; padding: .5em; font: 1em "Courier New", Courier, monospace;/*font size affects element size*/ background: #ccc; width: 94%; border: 1px solid #000; } @media screen and (min-width:500px) {/*over 500*/ input[type="text"], input[type="email"] { width: 50%; } textarea { width: 100%; } } select { padding: 0; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { border: 2px solid #ffc; box-shadow: 0 0 3px rgba(0,0,0,.2); } textarea { min-height: 3em; } textarea.contact { min-height: 8em; } label, legend { display: block; padding-bottom: 0.5em; color:#fff; font: 0.75em Arial, Helvetica, sans-serif; } select { width: 13.5em; } input[type="checkbox"] { display: inline; } label span, legend span { font-weight: normal; font-size: 1em; color: #666; } /*================================================== CLASSES - IDs */ @media screen and (min-width:768px) { .inline li { display: inline-block; padding-right: 3em; } } /*DIV to group movie posters*/ .posters, .game-posters { width: 204px; text-align: center; margin: 0 auto; } @media screen and (min-width:768px) { .posters, .game-posters { float: left; margin-right: 2em; } } /*DIV to group game posters .game-posters { padding: 1em 0em; }*/ .posters a, .game-posters a { border-bottom: none; padding-right: .8em; } .title a { color: #fff; text-transform: uppercase; margin-right:0.8em; letter-spacing: 0.1em; font: .9em "Palatino Linotype", "Book Antiqua", Palatino, serif; } .title a:hover { color: #f00; } .clr { clear:both;} /*============================ SPACING SIZING */ .line2 { line-height: 2em; } .height0 {line-height: 0px; margin: 0px; padding: 0px; } ul.height0 li{line-height: .5;} .bottom0 { margin-bottom: 0; } .bottom1 { margin-bottom: 1em; } .bottom2 { margin-bottom: 2em; } .bottom4 { margin-bottom: 4em; } .pad-l { padding-left: 1em;} .pad-r { padding-right: 1em;} .marg-r1 { margin-right: 1em;} .marg-r2 { margin-right: 2em;} .padbot1 { padding-bottom: 1em;} .padbot2 { padding-bottom: 2em;} .top0 { margin-top: 0;} .top-5 { margin-top: .5em; } .top1 { margin-top: 1em; } .top2 { margin-top: 2em; } .top6 { margin-top: 6em; } .left1 { padding-left: 1em; } .marg-bottom-3 { margin-bottom: -3em; } .l-marg { padding-left: 2em; margin-bottom: 2em; border-left: 1px dotted #ccc; } .size1 {font-size: 1em;} .size1-3 {font-size: 1.3em;} .size1-5 {font-size: 1.5em;} .size2 {font-size: 2em;} /* -- KEEP FULL PAGE WIDTH # -- */ /*================================================= BORDERS */ .bdr { border: 1px solid #000; margin:0 0 1em 0; } .bdr-capt { border: 1px solid #000; margin-bottom: 0e; } .bdr-top { border-top: 1px dotted #666;padding-top:1em; } .bdr-bottom { border-bottom: 1px dotted #888; padding-bottom: .5em; margin-bottom: 1em; } .bdr-bottom-fff { border-bottom: 1px dotted #fff; padding:1em 0 .5em 0; } .bdr-both { border-top: 1px dotted #888;padding-top:1em; border-bottom: 1px dotted #888; padding-bottom: 1em; margin-bottom: 1em; } /*========================= TYPOGRAPHY */ .capt { color: #fff; font: italic .9em Georgia, "Times New Roman", Times, serif; margin-top: .5em; } .fff, .fff cite { color: #fff; } /*.h1-sm {font-size: 1.3em;}*/ .sm { font: 80%/1.5em Arial, Helvetica, sans-serif; color: #777; } .lg { font-size: 1.3em; line-height: 1em; padding-top: .5em; } .intro { letter-spacing: .05em; font-size: 1.2em; line-height: 1.8em; font-style: italic; } .sans { color: #666; font-family: Tahoma, Geneva, sans-serif; } .ital { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; } .cond {font-family: "Arial Narrow", sans-serif;} .uc { text-transform: uppercase; } sup{ font-size:0.7em; vertical-align:super; line-height: 1em; } sup:before { content: "\005B"; } sup:after { content: "\005D"; } /*to remove brackets, class .nobracket*/ sup.nobracket:before, sup.nobracket:after{ content:""; } sub{ font-size:.7em; vertical-align:sub; line-height: 1em; } /* FONTS */ .typewriter { font-family: "Courier New", Courier, monospace; color: #000; } .palatino { font: small-caps normal 0.9em "Palatino Linotype", "Book Antiqua", Palatino, serif; letter-spacing: 0.18em; color: #666; } /* ===================================================== FLEX */ .flex { max-width: 100%; height: auto; width: auto\9; }/*ie8*/ .flex.bdr, .flex.bdr-capt { max-width: 98%; }/* need - prevent horz scroll on 320 w/bdr - CSS lint disallows double classes */ .flex50 { width: 100%;height: auto; max-width: 50em;} .flex48 { width: 100%; height: auto; max-width: 48em;} .flex44 { width: 100%;height: auto; max-width: 44em;} .flex43 { width: 100%;height: auto; max-width: 43em;} .flex42 { width: 100%;height: auto; max-width: 42em;} .flex41 { width: 100%;height: auto; max-width: 41em;} .flex40 { width: 100%;height: auto; max-width: 40em;} .flex39 { width: 100%;height: auto; max-width: 39em;} .flex38 { width: 100%;height: auto; max-width: 38em;} .flex37 { width: 100%;height: auto; max-width: 37em;} .flex36 { width: 100%;height: auto; max-width: 36em;} .flex35 { width: 100%;height: auto; max-width: 35em;} .flex34 { width: 100%;height: auto; max-width: 34em;} .flex33 { width: 100%;height: auto; max-width: 33em;} .flex32 { width: 100%;height: auto; max-width: 32em;} .flex31 { width: 100%;height: auto; max-width: 31em;} .flex30 { width: 100%;height: auto; max-width: 30em;} .flex29 { width: 100%;height: auto; max-width: 29em;} .flex28 { width: 100%;height: auto; max-width: 28em;} .flex27 { width: 100%;height: auto; max-width: 27em;} .flex26 { width: 100%;height: auto; max-width: 26em;} .flex25 { width: 100%;height: auto; max-width: 25em;} .flex24 { width: 100%;height: auto; max-width: 24em;} .flex23 { width: 100%;height: auto; max-width: 23em;} .flex22 { width: 100%;height: auto; max-width: 22em;} .flex21 { width: 100%;height: auto; max-width: 21em;} .flex20 { width: 100%;height: auto; max-width: 20em;} .flex19 { width: 100%;height: auto; max-width: 19em;} .flex18 { width: 100%;height: auto; max-width: 18em;} .flex17 { width: 100%;height: auto; max-width: 17em;} .flex16 { width: 100%;height: auto; max-width: 16em;} .flex15 { width: 100%;height: auto; max-width: 15em;} .flex14 { width: 100%;height: auto; max-width: 14em;} .flex13 { width: 100%;height: auto; max-width: 13em;} .flex12 { width: 100%;height: auto; max-width: 12em;} .flex11 { width: 100%;height: auto; max-width: 11em;} .flex10 { width: 100%;height: auto; max-width: 10em;} .flex9 { width: 100%;height: auto; max-width: 9em;} .flex8 { width: 100%;height: auto; max-width: 8em;} .flex7 { width: 100%;height: auto; max-width: 7em;} .flex6 { width: 100%;height: auto; max-width: 6em;} .flex5 { width: 100%;height: auto; max-width: 5em;} .flex4 { width: 100%;height: auto; max-width: 4em;} .flex3 { width: 100%;height: auto; max-width: 3em;} @media only screen and (min-device-width : 280px) and (max-device-width : 420px) { .flex10,.flex11,.flex12,.flex13,.flex14,.flex15, .flex16, .flex17, .flex18, .flex19, .flex20, .flex21, .flex22, .flex23 { max-width: 100%; } } /*IE8 can't handle responsive max-width without "width:inherit;" whch needs to go after width:*/ .ie8 .flex50 { width: 100%;width:inherit; height: auto; max-width: 50em;} /*width:inherit; for ie8*/ .ie8 .flex48 { width: 100%;width:inherit; height: auto; max-width: 48em;} .ie8 .flex44 { width: 100%;width:inherit; height: auto; max-width: 44em;} .ie8 .flex43 { width: 100%;width:inherit; height: auto; max-width: 43em;} .ie8 .flex42 { width: 100%;width:inherit; height: auto; max-width: 42em;} .ie8 .flex41 { width: 100%;width:inherit; height: auto; max-width: 41em;} .ie8 .flex40 { width: 100%;width:inherit; height: auto; max-width: 40em;} .ie8 .flex39 { width: 100%;width:inherit; height: auto; max-width: 39em;} .ie8 .flex38 { width: 100%;width:inherit; height: auto; max-width: 38em;} .ie8 .flex37 { width: 100%;width:inherit; height: auto; max-width: 37em;} .ie8 .flex36 { width: 100%;width:inherit; height: auto; max-width: 36em;} .ie8 .flex35 { width: 100%;width:inherit; height: auto; max-width: 35em;} .ie8 .flex33 { width: 100%;width:inherit; height: auto; max-width: 33em;} .ie8 .flex32 { width: 100%;width:inherit; height: auto; max-width: 32em;} .ie8 .flex31 { width: 100%;width:inherit; height: auto; max-width: 31em;} .ie8 .flex30 { width: 100%;width:inherit; height: auto; max-width: 30em;} .ie8 .flex28 { width: 100%;width:inherit; height: auto; max-width: 28em;} .ie8 .flex27 { width: 100%;width:inherit; height: auto; max-width: 27em;} .ie8 .flex26 { width: 100%;width:inherit; height: auto; max-width: 26em;} .ie8 .flex25 { width: 100%;width:inherit; height: auto; max-width: 25em;} .ie8 .flex24 { width: 100%;width:inherit; height: auto; max-width: 24em;} .ie8 .flex23 { width: 100%;width:inherit; height: auto; max-width: 23em;} .ie8 .flex22 { width: 100%;width:inherit; height: auto; max-width: 22em;} .ie8 .flex21 { width: 100%;width:inherit; height: auto; max-width: 21em;} .ie8 .flex20 { width: 100%;width:inherit; height: auto; max-width: 20em;} .ie8 .flex19 { width: 100%;width:inherit; height: auto; max-width: 19em;} .ie8 .flex18 { width: 100%;width:inherit; height: auto; max-width: 18em;} .ie8 .flex17 { width: 100%;width:inherit; height: auto; max-width: 17em;} .ie8 .flex16 { width: 100%;width:inherit; height: auto; max-width: 16em;} .ie8 .flex15 { width: 100%;width:inherit; height: auto; max-width: 15em;} .ie8 .flex14 { width: 100%;width:inherit; height: auto; max-width: 14em;} .ie8 .flex13 { width: 100%;width:inherit; height: auto; max-width: 13em;} .ie8 .flex12 { width: 100%;width:inherit; height: auto; max-width: 12em;} .ie8 .flex11 { width: 100%;width:inherit; height: auto; max-width: 11em;} .ie8 .flex10 { width: 100%;width:inherit; height: auto; max-width: 10em;} .ie8 .flex9 { width: 100%;width:inherit; height: auto; max-width: 9em;} .ie8 .flex8 { width: 100%;width:inherit; height: auto; max-width: 8em;} .ie8 .flex7 { width: 100%;width:inherit; height: auto; max-width: 7em;} .ie8 .flex6 { width: 100%;width:inherit; height: auto; max-width: 6em;} .ie8 .flex5 { width: 100%;width:inherit; height: auto; max-width: 5em;} .ie8 .flex4 { width: 100%;width:inherit; height: auto; max-width: 4em;} .ie8 .flex3 { width: 100%;width:inherit; height: auto; max-width: 3em;} /*POSITIONING*/ @media screen and (min-width:500px) {/*over 500*/ .lgscrn50 { float: left; width: 50%; } } .ctr { text-align: center; } .fl-r { float: right; margin-left: 8px; } /*div flush right with margin*/ div.flr { margin:0 0 0.25em 1em; float: right; } .fl-l { float: left; margin-right: 8px; } /*image replacement, http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ .ir { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; }----*/ a img {border: none; text-decoration: none; }/* removes default blue "link" border, some browsers */ /*COLORS*/ .g { color: #999; } .c-y { color: #fc6; } .k { color: #000; } .f { color: #fff; } .red { color: #f00; } /*ICONS*/ .p {padding-right:28px;background: url(../_i/icon-pdf.gif) no-repeat right;}/*pdf*/ .v {padding-right:40px;background: url(../_i/icon-video.gif) no-repeat right;}/*video*/ .a {padding-right:37px;background: url(../_i/icon-audio.gif) no-repeat right;}/*audio*/ .b {padding-right:40px;background: url(../_i/icon-book.gif) no-repeat right;}/*book*/ .w {padding-right:37px;background: url(../_i/icon-website.gif) no-repeat right;}/*website*/ .t {padding-right:48px;background: url(../_i/icon-article.gif) no-repeat right;}/*article*/ .c {padding-left:37px;background: url(../_i/icon-topic.gif) no-repeat left;}/*topic*/ .u {padding-right:20px;background: url(../_i/youtube.gif) no-repeat right;}/*YouTube*/ .hilite { background-color: #fffccc; padding: 0.3em 0.5em; } /*======================================== SPECIAL VISUAL EFFECTS */ /*home page - reel and film graphics div*/ .reel { max-width: 98%; background: url(../_i/0-reel-icon.png) no-repeat 50% 50%; transition: all .2s ease-in-out; background-size: contain; display: inline-block; padding: 1em; margin: 1rem; } .reel:hover, .film:hover { transform: scale(1.1); } .film { max-width: 98%; background: url(../_i/0-film-icon.png) no-repeat center; transition: all .2s ease-in-out; background-size: contain; display: inline-block; padding: 1rem; margin: 1rem; } @media (min-width: 500px) { /*500+ NOTE: sequence important to override previous css*/ .reel { max-width: 24%; padding: 4em; } .film { max-width: 24%; padding: 4em; } } /*END -- home page div*/ .bx { background: url(../_i/bkgnd-w50.png) repeat; margin: 1em 0 2em; padding: 1.5em 2.2em 1em; border-top: 1px dotted #ccc; border-right: 1px dotted #999; border-bottom: 1px dotted #666; border-left: 1px dotted #ccc; } @media only screen and (min-device-width : 280px) and (max-device-width : 420px) { .bx { background: url(../_i/bkgnd-w50.png) repeat; margin: 0; padding: .5em; border: none; } } .blu { background: #eff9f8; } .yel{ background: url(../_i/yel-bkgnd.png) repeat-x; } .bkgnd-grad {background: url(../_i/bkgnd-grad.png) repeat-x;} /*=========================================== VIDEO */ /*set up a DIV w/ class="v-flex" */ .v-flex { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-bottom: 1em; } .v-flex iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ================================================== LAYOUT (includes #NAV) */ /* Notes 1) If padding is ONLY placed on the top and/or bottom of divs, it eliminates "box model" math. 2) If margin required on floated DIVs. Avoid adding marg to the side it is floating toward (EG. avoid: right margin on DIV floated right). Use padding instead. Add "display:inline" to div rule (for bug-fix on some versions of IE that double margins). */ /* FULL-BKGND, http://css-tricks.com/perfect-full-page-background-image/ - CSS ONLY technique 2 #BKGND-FULL { position: relative; } min-width, min-heigth preserve aspet ratio May set a min-width of the width of the image so that the image never gets smaller than it actually is. #full-bkgnd { z-index: -999; width: 100%; height: auto; position: fixed; top: 0; left: 0; min-height:100%; min-width:100%; } */ #HEAD { background: url(../_i/bkgnd-50.png) repeat; padding: 2em 0.8em 0 1em;/*.8em-right req to remove horz scrollbar*/ height: 2.6em; z-index: 100; position: fixed; top: 0; width: 99%; border-bottom: 1px solid #000; } /*@media screen and (min-width:500px) { #HEAD { height: 2.5em; } }*/ .ie7 #HEAD { margin-left:-16em; } /* DIV for Primary NAV See ul.nav below for styling */ #NAV { max-width: 46em; } /* wraps #NAV #MAIN */ #CONTENT { width:auto; margin: 0 1em; padding: 5em 0 0 0; } @media screen and (min-width:768px) { #CONTENT { max-width: 46em; margin: 0 auto; } } #MAIN { /*30em + 16em side = tablet 768 viewport*/ max-width: 47em; width:auto; /*min-width: 17em;320 viewport float: left;*/ padding: 1em 3% 2em 3%; margin: 0; /*background-color: #999;*/ } #MAIN.center { /*home page - Youtube fills 320 screen better */ float: none; padding: 1em 0 0 0; margin: 0; } /*IE6 CONDITIONAL COMMENT uses class .ie6 #FOOT { height: 100px; }*/ /* #FOOT - full pg width */ #FOOT { background: url(../_i/bkgnd-grad.png) repeat-x; padding: 0 .8em 1.5em 0;/*.8em-right req to remove horz scrollbar*/ position: relative;/* gives IE6 hasLayout to properly clear */ clear: both; border-top:1px solid #ccc; margin: 0 auto; height: 15em; } /* ============================= PRIMARY NAV */ .logo-hd { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; /*appearance*/ font: bold 1em "Courier New", Courier, monospace; color: #fff; background: url(../_i/J-index.png) no-repeat; border-bottom-style: none; height: 50px; width: 50px; position: absolute; left: 1em; top: 10px; } /*#homepg .logo-hd { display: none; } -- NEED TO MODIFY TEMPLATE PROPERTIES ID*/ /*@media screen and (min-width:500px) { .logo-hd { height: 3.7em; } } */ /* OLD a:hover.logo-hd{ color: #f00; background: url(../_i/nav-gifguy.gif) no-repeat -60px; }*/ a:hover.logo-hd{ background: url(../_i/J-index.png) no-repeat -50px; color: #f00; } a.youtube { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; /*appearance*/ font: bold 1em "Courier New", Courier, monospace; color: #fff; background: url(../_i/icon-youtube.png) no-repeat -57px; border-bottom-style: none; height: 40px; width: 57px; /*position*/ position: absolute; left: 45%; transform: translate(-50%,0); bottom: 12px; } @media screen and (min-width:500px) {/*over 500*/ a.youtube { left: 49%; transform: translate(-50%,0); } } a:hover.youtube { background: url(../_i/icon-youtube.png) no-repeat; color: #f00; } a.contact { font: bold 1em "Courier New", Courier, monospace; color: #fff; border-bottom-style: none; float: right; padding-right: 2em; padding-top: .8em; } a:hover.contact { color: #f00; } /* ================================= #FOOT NAV */ #FTNAV {/*div for nftnav, see below*/ margin: 0 auto; padding:0; } .ftnav{ text-align: center; } .ie7 .ftnav { margin-left:1em; } .ftnav li{ font: bold .8em/1.4em Arial, Helvetica, sans-serif; color: #666; list-style: none; /* remove list marker */ padding: 1em .7em 0 0;/*width: 5.5em;assign wdth is the secret*/ display: inline-block; /*Fills entire LI area, reacts to hover. */ text-align: center;} .ie7 .ftnav li{ display: block; /*Fills entire LI area, reacts to hover. */ float:left; padding-bottom:2em; } .ftnav a, .ftnav a:visited { /* grouping selectors ensures links retain button appearance even after being visited */ padding:1em .5em; text-decoration: none; border-bottom: none;/*counteract a*/ color: #444; border-left: 1px dotted #fff;/*for hover effect*/ } .ftnav a:hover, .ftnav a:active, .ftnav a:focus { /* hover apperance (background, text color) for mouse/keyboard users */ color: #000;/*background: url(../_i/bkgnd-10.png) repeat;*/ border-left: 1px solid #f00;/*for hover effect*/ } address { text-align:center; color:#444; font: 0.8em Arial, Helvetica, sans-serif; /*margin: 0 auto;*/ clear: both; /*padding-top: 2em;*/ } /*======================================== OBSOLETE CSS */ /*image replacement, http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ OLD css gifguy a.logo-hd { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden;----*/ /*appearance*/ /*font: bold 1em "Courier New", Courier, monospace; color: #fff; border-bottom-style: none; background: url(../_i/nav-gifguy.gif) no-repeat; height: 3.9em; width: 3.5em; position: absolute; left: 1em; top: .4em; } */