/*----------------------------------------------------------*/
/* Rosa's Pizza MAIN Cascading Style Sheet */
/* Author: Steve Pettee, Glacier Web Creative */
/* www.GlacierWebCreative.com */
/*----------------------------------------------------------*/

/* General
------------------------------------------------------------*/
* {
    padding: 0; margin: 0
    }

.decor {
    color: #e71823;
    }

html {
    background: #e5cdb1;
    }
    
body {
    position: relative;
    margin: 20px 0 20px 0;
    font: normal 18px/24px "times new roman";
    }
    
#container {
    position: relative;
    width: 100%;
    min-width: 750px;
    max-width: 1000px;
    margin: 0 auto;
    background: #d9a96f;
    }
    
#masthead {
    width: 100%;
    height: auto;
    }
    
#masthead img#header-image {
    display: inline-block;
    position: relative;
    width: 100%;
    }
    

/* Navigation
****************************************************************/
#nav ul {
    list-style: none;
    border: 1px solid;
    margin-top: 20px;
    margin-left: 2.4%;
    margin-right: 2.4%;
    height: 24px;
    padding: 5px 0 5px 0;
    width: 95.2%;
    background: url(images/nav-bg.gif) repeat-x;
    }
    
#nav li {
    float: left;
    height: 100%;
    border-right: 1px solid;
    }
    
#nav li a {
    display: block;
    font: normal 18px arial;
    width: 100%;
    text-decoration: none;
    height: 100%;
    margin: 0 0 0 0;
    text-align: center;
    }
    
li#home {width: 14%;} 
li#menu {width: 14%;}

li#crew {width: 17%;}
li#story {width: 18%;}
li#pics {width: 18%;}
li#contact {
    width: 16%; 
    border-right: none !important; 
    padding-left: 7px;
    }

    
a:link, a:visited {color: #000;}
a:hover {color: #e71823;}

#nav a#current { 
    font: italic normal 18px arial;
    color: #fff;
    }
    
    
/* Main Content
***************************************************************/
    
    
#left-content h1, #right-content h1 {
    font-style: italic;
    font-weight: bold;
    font-family: "times new roman";
    margin: 0 0 0 0;
    }
    
.shell {
    background: transparent;
    padding: 10px 15px 15px 20px;
    vertical-align: baseline;
    height: 100%;
    }
    
#story h1 {
     width: 80%;
     margin: 0 10% 0 10%;
     text-align: center;
     font-style: italic;
     font-weight: bold;
     font-family: "times new roman";
     padding: 30px 0px 0px 0px;
     }    
    
#story p {
     width: 80%;
     margin: 0 10% 0 10%;
     padding: 30px 0px 40px 0px;
     } 


/* Left Content 
**************************************************************/
#left-content {
    float: left;
    width: 45%;
    margin: 25px 0 0 2.5%;
    }
    
#left-content img#welcome-img {
     display: block;
     padding: 25px 5px 20px 40px;
     }
     
#left-content img#best-quality-img {
     display: block;
     padding: 25px 5px 20px 100px;
     }
    
#left-content h1 {
     width: 100%;
     text-align: center;
     padding-bottom: 8px;
     }
    

/* Right Content
**************************************************************/
#right-content {
    float: left;
    width: 50%;
    margin: 25px 2.5% 0 0;
    }
    
#right-content h1 {
    width: 100%;
    text-align: center;
    }    
    

#right-content img#logo {
    display: block;
    width: 100%;
    height: auto;
    margin: 15px 0 20px 10px;
    }
    
p#fmnphotos {
    width: 90%;
    text-align: center;
    margin-top: -22px;
    margin-bottom: 25px;
    margin-left: 10%;
    padding: 0px 0px 0px 0px;
    color: #fff;
    font: italic bold 13px "times new roman";
    }    

#right-content p#hours {
    width: 80%;
    margin: 0 auto;
    padding: 15px 0 15px 0;
    border-top: 1px solid;
    text-align: center;
    }


/* Clear Div (Scripture)
**************************************************************/
#clear {
    clear: both;
    margin: 0 2.5% 0 2.5%; 
    padding:25px 14% 10px 14%;
    text-align: center;
    border-bottom: 1px solid;
    font: italic 18px "times new roman";
    }
    

/* bottom navigation
***************************************************************/
ul#bot-nav {
    list-style: none;
    width: 70%;
    margin: 0 auto;
    padding: 5px 0 5px 0;
    }

#bot-nav li {
    float: left;
    text-align: center;
    border-right: 1px solid;
    }
    
#bot-nav li a {
    display: block;
    font: bold 12px arial;
    width: 100%;
    }
    
#bot-nav li#contact {
    border-right: none;
    padding-left: 0px;
    }
    
#bot-nav a#current { 
    font: italic bold 14px "times new roman";
    color: #fff;
    }
    
/* footer 
****************************************************************/
    
#footer {
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: #d9a96f;
    }
    
#footer p {
    clear: both;
    text-align: center;
    font: italic 14px "new times roman";
    padding: 10px 0 10px 0;
    }
    
    
    


/* change font size and wrapper size for 481-749 pixels screen
****************************************************************/
@media screen and (min-width: 481px) and (max-width: 749px) {
     body {
          position: relative;
          margin: 20px 0 20px 0;
          font: normal 14px/20px "times new roman";
          }
    
     #container {
          position: relative;
          width: 100%;
          min-width: 481px;
          max-width: 749px;
          margin: 0 auto;
          background: #d9a96f;
          }
          
     #nav li {
          padding: 5px 0 0 0;
          }
          
     #nav li a {
          display: block;
          font: bold 13px arial;
          }
          
     #nav a#current { 
          font: italic normal 13px arial;
          color: #fff;
          }
          
     ul#bot-nav {
          width: 90%;
          }
          
     #clear {
          font-size: 16px;
          }
          
     #left-content h1, #right-content h1 {
          font-size: 24px;
          }
}