/* external stylesheet for Bruce Dunn's Website Design */

body {
 text-align:center;
 background-color: #FFF7E3;
  }
/* This is the header or logo */     
header {
     text-align:center;
      }
/* End header */

div#center p#center{
    text-align:center;
}
#container{
         margin: 0 auto;max-width:100%;width:960px;
         text-align:center;margin-top:2%;
         }
nav{
    margin-top:20px;margin-bottom:20px;height:20px;text-align:center;margin-left:5%;
}

article{
    max-width:100%;background-color:#FFF7E3;
}
h1.title { 
        font-size: 130%;
		text-align:center;
		background-color: transparent;
		font-family: verdana, arial, helvetica, sans-serif;
        font-style: italic;
		color: #000000;
        text-decoration: underline;
        font-weight:800;
        }
.error { 
        font-size: 140%;
        text-align: center;
		margin-top: -36px;
        background-color: transparent;
		font-family: verdana, arial, helvetica, sans-serif;
        font-style: italic;
        color: red;
        font-weight: 600;
        }		
div.work{
    float:left;width:285px;border:1px solid gray;padding:5px;margin-left:8px;text-align:left;background-color:#FFFFE0;}
div.half{
    float:left;width:460px;border:1px solid gray;padding:5px;margin-left:8px;text-align:left;
}

div#clear{
    clear:both;
}
footer{
    background-color:#FFF7E3;float:left;
}
#center{
    text-align:center;
}
 #menu{
        list-style-type:none;text-align:center;
    }

    #menu li{
        float:left;width:auto;list-style-type:none;
    }
    /* -----------Smartphone View----------- */
 /* cell phone screen code */
    @media screen and (max-device-width: 480px) {
            div#container article{
            width:300px;
            margin:0px auto;
            height:100px;
            background:#FFFFFF;
            font-size:6pt;
            }
            #menu li{
            float:none;}
            img{
                 width:100%;
             }
        }
    /* tablet screen */
    @media screen and (max-width: 900px){
            div#container article{
            width:1000px;
            margin:0px auto;
            height:auto;
            background:#FFFFFF;
            font-size:10pt;
            }
            #menu li{
            float:left;width:auto;list-style-type:none;
            }
            img{
                width:100%;
            }
      }
    /* full-size screen */
    @media screen and (min-width: 1300px){
            div#container article{
            width:1200px;
            margin:0px auto;
            height:auto;
            background:#FFFFFF;
            font-size:100%;
            }
        #menu li{
                float:none;
            }
        img {
            width:auto;
        }
    }