@charset "utf-8";
/* CSS Document */
<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> 
	<title>Media Responsive Web page</title>
	

        <style  type="text/css">
		
		  body {
    			background-color: #ffffff;
    			background-repeat: repeat;
    			font-family: Arial,Helvetica,sans-serif;
    			font-size: 12px;
    			font-weight: normal;
    			height: 100%;
    			margin: 0 auto;
    			width: 100%;
			}

          #banner {
             margin-left:auto; 
             margin-right:auto; 
             width:1000px;  
          }

          #banner img { 
             max-width:1000px; 
             max-height:300px; 
          }
		  #ribbon {
			position: relative;
    		text-align: right;
    		width: 100%;
			margin-left:auto; 
            margin-right:auto; 
			z-index:10;
			background-color: #bf5700;
		} 
 
          #main {
            margin-left:auto;
            margin-right:auto;
            width:1000px; 
          }    

          #main-content {
            padding:10px;
            width:625px; 
            float:left;
          } 
		  
		  #footer {
            position: relative;
    		text-align: left;
			width:500px; 
			top: 40px;
			padding:10px;
			margin-left:auto; 
            margin-right:auto; 
			background-color:FFFFFF; 
			z-index:-1;  
          }
		  
		  

          

          #widget-container {
            padding:5px;
            width:180px; 
            float:left;
          }   

          .widget-content {
             margin:20px; 
             padding:1px;
             width:160px;
             background-color:#DDDDDD; 
          }    

          .widget-title {
             font-weight: 300;
             padding:5px;
             background-color:#EEEEEE;  
          }    

          .widget-text {
             padding:10px;
             background-color:#FCFCFC;   
          } 
		  
		  
           
          
		  @media (min-width: 768px) and (max-width: 1000px) {
            #banner { width:850px; }
            #banner img { max-width:850px; max-height:222px; }
            #main { width:100%; }            
            #main-content { width:400px; float:left; }
            #widget-container { width:180px; float:left; }
            .widget-content { width:160px; }
			#footer { width:500px; float:left; position:static;}
          } 
		  
          @media (min-width: 481px) and (max-width: 768px) {
            #banner { width:740px; }
            #banner img { max-width:740px; max-height:222px; }
            #main { width:100%; }            
            #main-content { width:400px; float:left; }
            #widget-container { width:180px; float:left; }
            .widget-content { width:160px; }
			#footer { width:500px; float:left; position:static;}
          } 

          @media (min-width: 321px) and (max-width: 480px) {
            #banner { width:450px; }
            #banner img { max-width:450px; max-height:135px; }
            #main { width:100%; }            
            #main-content { width:400px;}
            #widget-container { width:300px; }
            .widget-content { width:200px; margin:5px; float:left;}
            .widget-text { display:none; } 
			#footer { width:450px; float:left; position:static;}
          }

          @media (max-width: 320px) {
            #banner { width:275px; }
            #banner img { max-width:275px; max-height:83px; }
            #main { width:250px; }            
            #main-content { width:250px;padding:0px;}
            #widget-container { width:300px; padding:0px; float:left;}
            .widget-content { width:250px; margin:5px;}
            .widget-text { display:none; } 
			#footer { width:225px; float:left; position:static;}
          }