/*
lg: 178x272
md: 178x131
sm: 84x159



NOTES IN HOW TO DO THIS

0.1) Via indesign. object>captions>caption setup
 -- do not add any text before these meta caption setups. just set them TO BE used.
DESCRIPTION/CAPTION = name
HEADLINE = twitter handle
object>captions>generate static caption

1) export indesign document as HTML
1b) maybe i want to export NON-OPTIMIZED images - copy the ORIGINALS - because then they'll have the same file names.


It will save the images to a specified destination
2) do the TRIM action on all the images, to remove the white border
3) at some point, label the chunks in the indesign document so you can go back & reference it when you're arranging the HTML. Each chunk is 2 columns, except for the couple that are 4 columns.
3a) in the HTML find & replace: FIND: "src=[path]" REPLACE: "data-original="images2/" (this makes lazyload work
3b) in the HTML find & replace: FIND: "<img " REPLACE: "<img src="images2/grey.gif" "
4) Separate all the chunks. They get <div class="chunk"></div> around them. Label those chunks in comments so you can reference them. 

5) start by just getting everything in there - work on the save for web later - something's going on wiht that that messes up the page entirely. "jpeg" vs "jpg"? --- vs %20-%20

! How am i going to label every single one of these images with the right comedian? 
! How does search work
! Lightbox with info
! somehow add an <a> link with the twitter url
! add social buttons, so people can share it. 


*/

 /**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://cssreset.com
    */
    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, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 0;
    }
    ol, 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;
    }
    
    
/* end reset */
*
{
	-moz-box-sizing: border-box;
       box-sizing: border-box;
}
 
body {
    width: 15300px;
    padding: 0;
    margin: 0;
    border: 0;
}


#header_container { /*header*/
    padding-top: 20px;
    height: 90px;
    width: 100%;
}

#footer_container { /*header*/
    padding-top: 650px;
    height: 90px;
    width: 100%;
}

#footer {
    width: 100%;
    position: fixed;
}

 #header {
    width: 100%;
    position: fixed;

 }

 #header img {
    width: 360px;
    height: 43px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -180px;
 }

 #cover {
    float: left;
 }

#back_cover {
    float: left;
    background-image: url('images3/back_cover.jpg');
    width: 785px;
    height: 629px;
 }

#credits {
    position: relative;
    top: 3em;
    left: 3em;
}

@font-face
    {
        font-family: futuraBook;
        src: url(fonts/FuturaStd-Book.otf);
}
@font-face {
        font-family: futuraMedium;
        src: url(fonts/FuturaStd-Medium.otf);
}
@font-face {
        font-family: futuraHeavy;
        src: url(fonts/FuturaStd-Heavy.otf);
    }

 #credits p {
    font-family: futuraMedium;
    font-size: .9em;
    color: white;
    line-height: 1.6em; 
    padding-bottom: 10px;
 }

#credits p a:link {
    color: white;
}

#credits p a:hover {
    color: #ffff00;
}

#credits p a:visited {
    color: white;
}

#credits h3 {
    font-family: FuturaHeavy;
    font-size: 1.8em;
    letter-spacing: .2em;
    color: white;
    text-transform: uppercase;
    padding-bottom: 1em;
}

.linkout {
    margin-top: 15px;
}

#footer a {
    font-family: FuturaHeavy;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    color: #9e9e9e;
    letter-spacing: 1px;
}

#footer form {
    padding-left: 280px;
    margin-top: -28px;
}

/* maybe i need this for the facebook iframe */
.fancybox-title iframe {
    min-height: 30px;
    vertical-align: middle;
}


  #custom-tweet-button a {

    display: block;

    padding: 2px 5px 2px 20px;

    background: url('images/tweet.gif') 1px center no-repeat;

    border: 1px solid #ccc;

  }



#body_container {
   // padding-top: 70px;
}


.chunk-2across {
    width: 132px;
    height: 80%;
    float: left;
}

.chunk-3across {
    width: 198px;
    height: 80%;
    float: left;
}

.chunk-4across {
    width: 264px;
    height: 80%;
    float: left;
}

.chunk-6across {
    width: 396px;
    height: 80%;
    float: left;
}

.chunk-5across {
    width: 330px;
    height: 80%;
    float: left;
}
 
.chunk-11across {
    width: 726px;
    height: 80%;
    float: left;
}


// .chunk-2across, .chunk-3across, .chunk-4across, .chunk-5across, .chunk-11across {
   
   // border-top: 1px dotted black;
    //border-bottom: 1px dotted black;
    //border-left: 1px dotted red;
    //border-right: 1px dotted blue;
}


.chunk-2across .image, .chunk-4across .image, .chunk-3across .image, .chunk-6across .image, .chunk-5across .image, .chunk-11across .image {
	float: left;
	margin: 3px 3px 3px 3px; // change this to 3 when ready to publish 
}

.chunk-2across .image_floatright, .chunk-4across .image_floatright, .chunk-3across .image_floatright, .chunk-6across .image_floatright, .chunk-5across .image_floatright, .chunk-11across .image_floatright {
    float: right;
    margin: 3px 3px 3px 3px; // change this to 3 when ready to publish 
}



.subchunk-1 {
    width:93px;
    float: left;
    margin: 0 3px 0 0;
 
}

.subchunk-1b {
    width:93px;
    float: left;
    margin: 0 3px 0 3px;
 
}

.subchunk-2 {
    width:126px;
    float: left;
    margin: 0 3px 0 3px;
}

.image div p {
	display: none;
}


.image_floatright div p {
    display: none;
}

//.image img:hover {
//	position: fixed;
//	left: 30px;
//	width: 400px;
//	height: 400px; 
//}

.image img:hover {
    border: 3px black solid;
    opacity: .7;
}
.image div:hover {
	display: all;
}


.frame-1 {
	width: 60px;
	height: 113px;
	//float: left;
	//margin: 5px;
}

.frame-3 {
	width: 126px;
	height: 93px;
	//float: left;
	//margin: 5px;

}

.frame-4 {
	width: 126px;
	height: 193px;
	//float: left;
	//margin: 5px;
}

.frame-5 {
	width: 258px;
	height: 193px;
	//float: left;
	//margin: 5px;
}

.frame-6 {
    width: 258px;
    height: 193px;
    //float: left;
    //margin: 5px;
}

.frame-7 {
    width: 93px;
    height: 73px;
    //float: left;
    //margin: 5px;
}

.frame-8 {
    width: 388px;
    height: 91px;
    float: left;
}

.frame-9 {
    width: 93px;
    height: 152px ;
}

.fancybox-title {
    letter-spacing: 1px;
}
.fancybox-title a:link {
    color: #555555;
}


.fancybox-title a:hover {
    color: #aaaaaa;
}