* { box-sizing: border-box; }
header, nav, main, footer { display: block; }

body { background-color: #FCEBB6; 
      color: #221811;
      font-family: Verdana, Arial, sans-serif;
	 background-image: url(background.gif);
}
	  
	 
header { background-color:#E6FFF7;
        height: 150px;
        background-image: url(mylogo.jpg);
         background-repeat: no-repeat;
     	
       
}

h1  { padding-top: 45px;
    padding-left: 220px;
    font-size: 3em;
	 
	 
}
h4 { background-color: #F0B300;
    font-size: 1.2em;
	padding-left:   .5em;   
	padding-bottom: .25em;  
    text-transform: uppercase;
    border-bottom: solid 3px #231814;
	padding-bottom: 0;
	clear: left;
}
nav { text-align: center; 
     font-weight: bold; 
	 font-size: 1.5em;
	 padding-top: 10px;
	 float: left;
	 width: 200px;
}
	 
nav a { text-decoration: none; }
nav a:link { color: #CC0000; }
nav a:visited { color: #471A1A; }
nav a:hover { color: #FF9900; }
nav ul { list-style-type: none;
       padding-left: 0; }
	   
main { padding: 0 0 2em 0;
      margin-left: 200px;
	  background-color: #F2FFFF;
	  display: block;
	  
}
main h2, main h3, main h4, main p, main div, main ul, main dl { padding-left: 3em; padding-right: 2em; }

footer { background-color:#FFCCFF;
       font-size: .60em;
	   font-style: italic;
	   text-align: center;
}
#wrapper { width: 80%;
           margin-right: auto;
		   margin-left: auto;
		   background-color: #66FFCC;
		   min-width: 900px;
		   max-width: 1280px;
		   box-shadow: 3px 3px 3px #666666;
		    
}
.details { padding-left: 20%;
           padding-right: 20%;
		   overflow: auto;
}
img { padding-left: 10px;
     padding-right: 10px;
}
#home_b { background-image: url(home_b.jpg); 
           background-size: 100% 100%;
		   height: 250px; }
#parents_b { background-image: url(parents_b.jpg); 
           background-size: 100% 100%;
		   height: 250px; }
#exhibition_b { background-image: url(exhibition_b.jpg); 
           background-size: 100% 100%;
		   height: 250px; }
#school_b { background-image: url(school_b.jpg); 
           background-size: 100% 100%;
		   height: 250px; }
#aboutus_b { background-image: url(aboutus_b.jpg); 
           background-size: 100% 100%;
		   height: 250px; }
		   
#mobile 
{display:none;}

#desktop
{display:inline;}
		   

table { width: 90%; margin:auto;
border-spacing: 0;
background-color: #ffc;}

th, td {padding:10px;}
tr:nth-of-type(odd) {background-color:#D9BF00;}

@media only screen and (max-width:1024px) {
	body { margin:0px; background-image:none;}
	
#wrapper {width:auto; min-width:0; margin:0;
	     padding:0; box-shadow:none;}
		 
header    {border-bottom:5px solid #fef6c2;}

h1       { margin-top:0; margin-bottom:1em; padding-top:1em;
        padding-bottom:1em; font-size:2.5em;}
		
nav     {float:none; width:auto; padding-top:0; margin:10px; font-size:1.3em;}
nav li { display:inline-block;}
nav a {padding:1em; width:8em; font-weight: bold; border-style:none;}
nav ul { padding:0; margin: 0;}



main {padding:0; margin:0; font-size:90%;}



@media only screen and (max-width:768px)
{
	
header {background-image:url(mini.jpg);
	height:128px;}
	
h1   {font-size: 2em;
      text-align: center;
       padding-left: 0;}

nav {margin:0;}

nav a
       { display: block;
         padding: 0.2em;
        width: auto;
        border-bottom: 1px solid #fef6c2}

 nav li {display: block;}
 
 main {padding-top: 1px}
 
 h2    { padding:0.5em 0 0 0.5em;
         margin-right: 0.5em; }
	 
 .details    { padding-left:0px
             padding-right:0px;}
 
 
.floatleft     { float:left;
                 padding-right:2em;
                padding-bottom:2em;}


#mobile { display:inline;}

#desktop { display:none;}