html,body {
    margin:0;
    padding:0;
    height:100%;      
}

.testBodyClass {		
    background:linear-gradient(to right, #ffe6ff, #ffcaff, #ffe6ff);   
/*    background:linear-gradient(to right, #f8f8f8, gainsboro, #f8f9f9);    */
    padding:0px;
    height:100%;
}
.productionBodyClass {
	background:linear-gradient(to right, #f8f8f8, gainsboro, #f8f9f9);
    padding:0px;
    height:100%;
}

.paddedDiv {
    padding:10px;
}

#container {    
    margin: 0 auto;       
    width: 100%;    
    height:auto !important;
    height:100%;
    min-height:100%;               
          
    border:0;
    text-align:center;
}

#header {    
    background:linear-gradient(#ccffcc, #99ff99);    
	padding:5px;
	border-bottom:2px solid darkGray;  
}

#content {    
	text-align:left;
	padding:15px;
    border:2px solid darkGray;
    border-radius:10px;
    background-color:white;

    margin:auto;         
    margin-bottom:15px;
    margin-top:15px;

    width:36%;
}

#footer {   
    text-align:center;
    padding:0;   
    padding-top:2px;          
    background:linear-gradient(to right, gainsboro, darkGray, gainsboro);
    border:0;    
}

#footer-content {
    background:linear-gradient(to right, #f8f8f8, gainsboro, #f8f9f9);    
    padding-top:10px;
    padding-bottom:10px;
}

.navigation-row {
    margin:0;
}

.navigation-button {    
    padding:0px;       
    border:1px solid darkgray;
    border-radius:5px;
    background:linear-gradient(white, gainsboro); 
    width:25%;   
    margin:0;
    height:35px;
}

.navigation-page-selector {
    margin:0;
    height:35px;
    padding-top:0;
    padding-bottom:0;
   
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    border:1px solid darkGray;
    border-radius:5px;
        
    width:15%;        

    font-size:100%;
    text-align:center;
}

.zoom-button {
    width:5%;
    margin:0px;
    height:35px;
        
    padding:0px;       
    border:1px solid darkgray;
    border-radius:5px;
    background:linear-gradient(white, gainsboro);
    
    font-size:100%;     
}

.content-image {
    width:100%;
}


/* --------- iphone portrait -----------  */
/*@media screen and (max-width: 320px) {*/
@media screen and (max-width: 540px) {
	#content{    
        width:100%;
        padding:5px;
        
        margin-top:0px;
        margin-bottom:0px;

        border-radiu
    }

    .navigation-button {        
        height:75px;
        width:34%;
    }

    .navigation-page-selector{
        height:75px;
        width:30%;
    }	

    .zoom-button {
        height:0px;
        width:0px;
        visibility:hidden;
    }
}

/* --------- ipad portrait -------------  */
@media screen and (min-width: 481px) and (max-width: 1366px) {
    #content{    
        width:95%;
        padding:5px;
    }

    .navigation-button {        
        height:45px;
        width:35%;
    }

    .navigation-page-selector{
        height:45px;
        width:20%;
    }

    .zoom-button {
        height:45px;
        width:5%;
    }
}