/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 4-Mar-2015, 7:04:38 PM
    Author     : Corinne
*/

/* Base css is for mobile. This allows us to load low-res images first and results in better 
performance on on mobile devices. We will upscale as necessary */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
@import url(http://fonts.googleapis.com/css?family=Didact+Gothic);

html {
    /* lesson learned.  You cannot have a full screen background (cover) attached to the html element
    in iOS. fixed and cover together cause the background to cover then entire document, not just the 
    viewport. Android devices (and others, I suspect) successfully cover just the viewport.
    
    /*background: url( ../img/landing-med.jpg ) no-repeat 70% bottom fixed ; */
   /* background: url( ../img/landing-med.jpg ) no-repeat center top fixed ;
    webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover; 
   */
    height:100% ;  /* required to size section elements */
}
.bg {
    /* Attach photo as background to landing section. In this implementation it will scroll
    off the page with the rest of the section.  We will live with that for now. Maybe later
    we can so parallax stuff to make it more interesting. A fixed background may not work very
    well on iOS.
    */
    background: url( ../img/bg-lr-port.jpg ) no-repeat center top  ;
    background-size: cover;
    webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
}
.bg2 {
    /* Darker image for subtle watermarky type of background for other sectsion */
    background: url( ../img/bg-cover000.jpg ) no-repeat center top  ;
    background-size: cover;
    webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
}
body { 
    width:100% ; /* required to give sections min-height */
    height:100% ;
    min-width:320px ; min-height:320px ; /* small iphone */
    font: 400 16px/1.5 "Open Sans", sans-serif ;
}

a { text-decoration:none ; }

.browserupgrade {
    position:absolute ;
    width:100% ;
    margin: 0.2em 0;
    margin:2em 0  ;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
.browserupgrade a {
    text-decoration: underline ;
    color: blue ;
}

#masthead { 
    position:fixed ; 
    z-index:100 ;
    width:100% ;
    height:4.5em ;
    top:0 ; left:0 ;
    /* this works fabulously on desktops, but not so much on mobile.
    background-position: top left ;
    background: url( ../img/landing-med.jpg ) no-repeat 70% bottom fixed ;
    background-size:cover ;
    */
    box-shadow: 0px 00px 15px 3px #111 ;
    display:none ;
}
/*
#logo-block { 
    position:absolute ;
    padding-left: 1em ;
    padding-top: 1em ; 
    text-align:left ;
    font-size:1.25em ;
    z-index:300 ;
}
*/

#trishtitle {
    /* start small */
    position:relative ;
    width:18em ;
    margin:0 auto ;
    padding-top:35px ; /* shove down so as not to cover menu bar */
    display:block ;
}

#logo-inline {
    position:fixed ;
    padding:0 ;
    text-align:left ;
    font-size:1em ;
    margin-left:10px ;
    margin-top:10px ;
}

#trishHeader { 
    position:relative ;    
    margin-bottom:0 ; 
    margin-top:0 ; 
    font-family: "Noticia Text" ;
    font-weight:900 ;
    font-size:2em ; 
    line-height:1em ;
}

#tagline {
    position:relative ;
    margin-top:0 ;  
    font-family: "Noticia Text" ;
    font-weight:700 ;
    font-size:1.25em ; 
    line-height:1em ;
}

#oldiebackimage { display:none }

/* backgroun positioning for old ie browsers (8 and below). */
html.lt-ie9 { background: none ; }

.lt-ie9 #oldiebackimage {
    display:block ;
    position:fixed ;
    width:100% ; 
    z-index:-1 ;
}

.navbar-toggle,
.page-scroll {}

.navItem {
    font: 400 16px/1.5 "Didact Gothic",sans-serif ;
    text-transform:uppercase ;
    font-weight:bold ;
}

.navItem, .navItem a {
    text-decoration:none ;
}

/* navigation menu.  Generally hidden on small devices and visible on larger ones */

#navDiv-horiz {     
    position:fixed ;
    text-align:center ;
    top:10px ;
    right:10px ;
    display:none ;
    z-index:100 ;
}
#navDiv-horiz .navItem { display:inline-block }

.navDiv .navItem a {
    text-decoration:none ;
    font-size:1.1em ;
    padding-left:.5em ; 
    padding-right:.5em ; 
}

.navDiv .navItem  { 
    /* padding-left:1em ; 
    padding-right:1em ;  */
    border-radius:5px }

/* Docked menu - our default mobile view */

#burgerButton {
    position:fixed ;
    top:10px ;
    right:10px ;
    top:0 ; right:0 ; 
    border-radius:3px ; /* no consideration for non css3 browxsers */
    padding-top:8px ; 
    padding-bottom:8px ;
    border:1px solid transparent ;
    outline:none ;
    display:block ;
    z-index:100 ;
}
#burgerButton .icon-bar {
    display:block ;
    height:2px ;
    border-radius:1px ;
    width: 30px ;
}
#burgerButton .icon-bar+.icon-bar{margin-top:4px}

#navDiv-sm {
    position:fixed ;
    z-index:200 ;
    top:55px ;
    right: 10px ;
    border-radius:5px ; 
    padding:10px 0 10px 0 ;
    display:none ;
}

#navDiv-sm .navItem {
    display:block ;
    text-align:right ;
    line-height:2em ;
    text-align:right ;
    /*padding:0 20px 0 20px ; */
}
#navDiv-sm .navItem a {
    text-decoration:none ;
    padding:0 20px 0 20px ;
}

.section { 
    padding-top:4.5em ;
    min-height:100% ;
    width:100% ;
    margin:0 auto ;
}
.section h1 { 
    font-family: "Noticia Text" ;
    font-weight:700 ;
}

.section#intro { padding-top:0 ;}

.sectionBack {
    position:absolute ;
    top:0 ; left:0 ; height:100% ; width: 100% ;
    background-color:transparent ;
    opacity:.9 ;
    z-index:-1 ;
}
.sectionContent {
    position:relative ;
    margin-top:0 ;
    width:100% ;
    text-align:center ;    
    padding-bottom:4.5em ;
}

#contact a {
    color:inherit ;
    text-decoration:none ;
}
.inline-list {
    list-style-type: none ;
    margin:0 ; 
    padding:0 ;
}
.inline-list li {
    display:inline-block ;
}

#directorList li{
    width:90% ; 
}

#commercialsList li {
    /* video players are more or less the same height so we can size them based on width
    without mucking up the UI too much. Here, the list element constrains the contents. */
    padding:.6em ;  /* this could cause premature wrapping. whatever */
    width:80%
}

#stillsList li { 
    padding:.6em ;
    width:auto ;
    max-width:80% ;
}

.vidWrapper {
    position:relative ;
    margin:1px ;
    padding:2px ;
    background-color:white ;
    border:1px solid #222 ;
    border-radius:2px ;
}
.vidDescription {
    /* wistia embeds margins into the description returns from the api call */
    position:relative ;
    padding: 1em .5em 1em .5em ;
    display:inline-block ;
}
/* It is not possible using Wistia's formatting tools to have a line break that doesn't translate
to an emptyp line. Clear all margins and let the desription div provide the padding */
.vidDescription p {
    margin:0 ;
    box-sizing: border-box ;
}

.wistia_embed {
}

.thumbnail{
    position:relative ;
    border:1px solid black ;
    padding:8px ;
    background-color:white ;
    border-radius:2px ;
    width:100% ;  /* fill the width of the list element */
    max-height: 350px ;
    box-sizing:border-box ;
}

li#filler1,
li#filler2,
li#filler3,
li#filler4 {
    height:0 ;
    display:block ;
}

/* Media queries. Trial and error.  Background loads in medium resolution until the screen gets to 
   about 1280px. Then we swith to hi-res. I'm going to ignore the special cases for IE less than 9 
   since no one will be using old ie on mobile devices. Default css is for mobile (except fot te old 
   ie background) Media queries handle larger devices.
   */

/* background image based on device capabilities -- not browser size */
/*
@media only screen  and (min-device-width : 400px) {
    .bg{ background-image: url( ../img/bg-800.jpg ) ;  }
}
@media only screen  and (min-device-width : 700px) {
    .bg { background-image: url( ../img/bg-800.jpg ) ;  }
}
*/

/* We need to check orientation in addition to screen width to pick the right header. 
Some of the tablets have a device ratio that mucks up the header even though the resolution 
might be reasonably high.  The widest one I know of is the Kindle fire at 800x1280.  */

@media only screen  and (min-device-width : 600px) and ( orientation:landscape ) {
    .bg{ background-image: url( ../img/bg-800.jpg ) ;  }
}
    
@media only screen  and (min-device-width : 801px) {
    .bg { background-image: url( ../img/bg-1200.jpg ) ;  }
}

@media only screen  and (min-device-width : 1280px ) {
    .bg { background-image: url( ../img/bg-2400.jpg ) ;  }
}

@media only screen  and (min-device-width : 2400px) {
    .bg { background-image: url( ../img/bg-3000.jpg ) ;  }
}

/* layout based on browser size.  Building up wrt layout */

@media only screen and ( min-width:700px ) {
    /* blow out burger menu ... leave at top of screen 
    #burgerButton { display:none }
    #navDiv-floating { display:block } 
    */
    #navDiv-sm { display:none }
    #burgerButton { display:none }
    #navDiv-horiz { display:inline-block }
    #directorList li { width:45% }
    #commercialsList li { width:45% }
    #stillsList li { max-width:45% }
    .thumbnail {
        max-height:300px ;
    }
    li#filler1 { 
        height:1em ;
        display:inline-block ;
    }
    #trishtitle { width: 30em ; }
}

@media only screen and ( min-width:1000px ) {
    /* a little more breathing room.  Move logo and menu toward image center 
        #burgerButton { display:none }
        #navDiv-floating { 
        display:block ; 
        top:10% ;
        right:10% ;
    }

    */
    #navDiv-sm { display:none }
    #logo-block { padding-top:1.5em; padding-left:1.5em ; font-size:1.5em }
    #directorList li { width:30% ; }
    li#filler2 { 
        height:1em ;
        display:inline-block ;
    }
    #commercialsList li { width:30% ; } 
    #stillsList li { max-width:30% ; }
    .thumbnail {
        max-height:350px ;
    }
    #trishtitle { width:40em }
}

@media only screen and ( min-width:1200px ) {
    /* Larger device.  Enlarge everything 
    #navDiv-floating { 
        display:block ; 
        top:45% ;
        margin-top:-6em ;
        right:15% ;
    }
    #burgerButton { display:none }
    */
    #navDiv-sm { display:none }
    #logo-block { padding-top:2em ; padding-left:2em ; font-size:2em ; text-align:center ;}
    #directorList li { width:22% }
    li#filler3 { 
        height:1em ;
        display:inline-block ;
    }
    #commercialsList li { width:22% ; } 
    #stillsList li { max-width: 22% ; }
    .thumbnail {
        max-height:350px ;
    }
}

/* ================================  
   color stuff 

   dark : 222 ...       34,34,34,
   vdark : #232314 ...  35,35,20
   midlight: #b1ada4    177,173,164
   light: #d0cec8       208,206,200
   vlight :E1DCD8       225,220,219

according to wiki (so we know it's true :) 
teal = 
Color coordinates
Hex triplet	#008080
sRGBB  (r, g, b)	(0, 128, 128)
HSV       (h, s, v)	(180°, 100%, 50[1]%)
Source	HTML/CSS[2]
B: Normalized to [0–255] (byte)

Blue Teal:
Color coordinates
Hex triplet	#367588
sRGBB  (r, g, b)	(54, 117, 136)
CMYKH   (c, m, y, k)	(60, 14, 0, 47)
HSV       (h, s, v)	(194°, 60%, 53%)
Source	Kelly, Kenneth L. and Judd, Deanne B. (December 1976) "Color: Universal Language and Dictionary of Names", National Bureau of Standards, Spec. Publ. 440
=================================*/

body { 
    background-color: #232314 ;
    color: #E1DCD8 ;
}
a { color: #222 } 
#masthead  { background-color: #222 ; }
#trishHeader, #tagline { color:#d0cec8 ;}

.lightbg .navItem, .lightbg .navItem a { color:#232314 ; }
.darkbg .navItem, .darkbg .navItem a { color: #b1ada4 ;}

.navItem:hover a { color: #E1DCD8 }

#burgerButton {
/*    color: #232314 ;
    background-color:#b1ada4 ;
    background-color: rgba( 177,173,164,0.8 ) ;
*/
    background-color:transparent ;
}
#burgerButton.lightbg .icon-bar { 
    background-color: #232314  ;
}
#burgerButton.darkbg .icon-bar { 
    background-color: #b1ada4  ;
}

#navDiv-sm { 
    /* burger flyout menu */
/*    background-color: #b1ada4 ;
    background-color: rgba( 177,173,164,0.8 ) ; */
    background-color:rgba( 177,173,164,0.9 ) ;
    background-color:#232314 ; ;
    background-color:rgba( 35,35,20,0.9 ) ;
   
}
#navDiv-sm a {
     color: #b1ada4 ;
}
#navDiv-sm .navItem:hover a{
    color: #d0cec8 ;
}


.section {
    background-color: #222 ;
    color:#E1DCD8 ; }
.vidDescription { color: #555 }