source: other-projects/nz-flag-design/trunk/main-form/css/storystyle.css@ 29530

/* stylesheet for innovation stories */

body.story { 
}

div#idea {
    width:120px;
    height:108px;
    margin: 0 auto; 
}

img.status    {   
    position: absolute;
    bottom:2%;
    left:35%;
    width:25%;  
}
 
body {  
    margin:0;
    padding:0;
    border: none;

    /* Safe fonts web.mit.edu/jmorzins/www/fonts.html */    
    /* Can't find out what the designer used and custom fonts are a pain to set up anyway. Supposed to be sans-serif but stout, Garamond is serif but stout */
    /*font-family: "Century Gothic", "Garamond", "Tahoma", "Helvetica", sans-serif; */
    font-family: "Century Gothic", serif;
}

div.story-title {
    position:relative;
}
.center {
    text-align:center;
}

.swipe-text {
    position:absolute;          
    background-image:url("../images/textforswipe.png"); 
    width: 466px;
    height: 300px;  
    right:7%;
    bottom:9%;
}

/* The Go Back button */
.back-button {
    z-index:100;
    position:absolute;  
    display: inline;
    /*float:left;*/ 
    background-image:url("../images/backbutton.png");   
    width: 116px;
    height: 162px;  
}

.back-left {
    /*top:20px;
    left:60px;*/
    top:2%;
    left:2%;
}

.back-right {
    right:5%;
    bottom:5%;  
}

/* The forward anchor link - bottom right */
a.fwd-button {
    z-index:100;
    
    position:absolute;  
    display: inline;
    /*float:left;*/ 
    background-image:url("../images/forwardbutton.png");    
    width: 116px;   
    height: 162px;  
    
    right:5%;
    bottom:5%;
    /*width: 69px;  
    height: 72px;*/
}


/* Forward and Back buttons on the left and right */
.left-button {  
    position:absolute;  
    top:50%;    
    width: 28px;
    height: 31px;
}

.right-button { 
    position:absolute;  
    top:50%;    
    width: 28px;
    height: 31px;
}

.idea-fwd {background-image:url("../images/idea-forward.png");}
.idea-back {    background-image:url("../images/idea-back.png");}
.res-fwd {background-image:url("../images/research-forward.png");}
.res-back {background-image:url("../images/research-back.png");}
.dev-fwd {background-image:url("../images/development-forward.png");}
.dev-back {background-image:url("../images/development-back.png");}
.test-fwd {background-image:url("../images/testing-forward.png");}
.test-back {background-image:url("../images/testing-back.png");}
.sol-fwd {background-image:url("../images/solution-forward.png");}
.sol-back {background-image:url("../images/solution-back.png");}
.gen-fwd {background-image:url("../images/general-forward.png");}
.gen-back {background-image:url("../images/general-back.png");}


/* demo-page is defined in the jquery sliding part of this phonegap app*/

/* http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/ */
div.story-page {    
    background: none; /*#632468;*/
    
    /*overflow: scroll;*/
    position:absolute; /* position with respect to entire window */
    

    /* To get total width of textbox, add 2x padding. To get total height, add 2x padding. */
    
    /*left: 160px;
    top: 80px;
    width: 610px; 
    height: 350px;
    padding: 10px;
    */
    
    /*border:2px solid white;*/
    
    margin:5.5% 10.5%;
    width: 71%; 
    height: 74.5%;
    padding: 2%;
    
    /*
    width: 62%; 64%;
    height: 67%;    
    margin:9% 14.5%; 6.5% 15%; margin:7% 14.5%;
    padding:2%; 
    */
    
}

div.story-page {
    line-height: 1.5; /* no unit means number of lines, e.g. 2 is double-spaced */      
}   

div.story-page h1, h2 { /*, h3, h4, h5, h6*/
    font-weight: normal;
}

div.story-page h2, h3, h4, h5, h6, p {
    /*padding-left:50px;*/ /*indented*/
}

div.story-page p {
    font-size: 250%;
    /*text-align: justify;*/
}

img.left, video.left {
    float:left; 
    margin-right:20px;
}
img.right, video.right {
    float:right; 
    margin-left:20px;
}

/* Section Icons 
http://stackoverflow.com/questions/1496203/css-displaying-one-particular-icon-from-an-image-file 
*/
.story-icon {
    display: inline;
    width: 53px;
    height: 53px;
    background-image:url("../images/icons_smaller.png");
    float:left;
    margin-right:10px;
}
.idea {
    background-position: -30px -12px ;  
    /*background-position: top left;*/
}
.research {
    background-position: -88px -12px ;      
}
.testing {
    background-position: -145px -12px ;     
}
.development { /* 4th image down */
    background-position: -202px -191px ;        
}
.solution {
    background-position: -255px -12px ;
}
/* End Section Icons */

/* Image and video */
img.bodyimg {
    
}

.constrainHeight {
height:200px; /*100px*/
}

.constrainHeight2 {
height:180px;
padding-top:10px;
}

.constrainHeight3 {
height:220px;
}

.constrainWidth {
width:320px; /*100px*/
}

.full-length {
position:relative;
height:100%
}

.full-width {
position:relative;
width:100%
}

.h75 {
position:relative;
height:75%
}