/* CSS Document */

		html, body 		{ margin: 0; padding: 0; }
		body 			{ color: #333; font: 18px Helvetica, Arial, sans-serif; line-height: 22px; background-color: #e3e9dc; padding-left:10px; padding-right:10px; }
		h2				{ color: #333; }
		a				{ color: #337810; }
		p				{ margin: 0 0 18px; }
		#wrapper		{ float: right; width: 100%; margin-left: -225px; }
		
		/* description-panel Style */
		#navigation		{ border-bottom: 1px solid #ccc; padding-left: 10px; }
		#navigation ul	{ padding: 16px 18px 9px; }
		#video-panel			{ border-bottom: 1px solid #ccc; padding-left: 10px; }
        #fullpage       { border-bottom: 1px solid #ccc; padding-left: 10px; }
		#video-panel small	{ font-size: 14px; line-height: 18px; }
		#description-panel p, #video-panel p, #fullpage p { padding-right: 10px; }
		
		/* description-panel Positioning and Size */
		#description-panel		{ font-size:18px; padding-top:10px; line-height:22px; }
        #fullpage       { font-size:18px; padding-top:10px; line-height:22px; }
		#video-panel	{ float:left; padding-top:10px; font-size:18px; line-height:22px; }
        #navigation		{ float:right; font-size:18px; padding-top:10px; line-height:22px; }
        /* Footer */
		#footer			{ margin-top: 10px; font-size:16px; background: #333; border-bottom: 2px solid #999; clear: both; float: right; }
		#footer a		{ color: #eee; }
		#footer	p		{ color: #ccc; margin: 0; padding: 0 16px 10px; }
		#footer ul		{ border-bottom: 1px solid #555; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
		#footer li		{ display: none; font-weight: bold; padding-right: 15px; }
        
	    #header {float:left; display:inline; height:30px;margin:0 0 5px 5px}
	
        #banner {float:right; display:inline; font-size:18px; list-style-type:none; padding-left:13px; width:650px}
		#banner #index { padding-top:5px; height:35px; width:110px}
		#banner #map { padding-top:5px; height:35px; width:110px}
        #banner #about_us { padding-top:5px; height:35px; width:110px}
    	#banner #contact_us { padding-top:5px; height:35px; width:110px}
    	#banner #join_contribute { padding-top:5px; height:35px; width:110px}
        #banner #widebanner { padding-top:5px; height:35px; width:200px}
        #banner #widebanner2 { padding-top:5px; height:35px; width:200px}
   		#banner li {float:right; margin:0; font-size:18px; border-right:2px groove #e1e3e3}
		#banner li a {display:block; height:30px; padding-top:5px; text-align:center; color:#0e7297; text-decoration:none}
		#banner li a:hover {color:#62acff; text-decoration:none} 
                
         @media screen and (max-width: 640px) and (orientation: landscape)
         {
           #description-panel	{ position: relative; margin-left: 1%; width: 98%; }
           #video-panel	{  position: relative; margin-left: .5%; width: 99%; }
           #navigation	{ margin-top: 10px; margin-left: .5%; width: 99%; }
           #fullpage { position: relative; margin-left: 1%; width: 98%; }
         }
        @media screen and (min-width: 641px) and (max-width: 2200px) and (orientation: landscape) and (max-height: 800px)
         {
           #description-panel	{ position: absolute; margin-left: .5%; width: 49%; }       
           #video-panel	{ margin-left: 50%; width: 49%; }
           #navigation	{ margin-top: 10px; margin-left: 50%; width: 49%; }
           #fullpage { position: relative; margin-left: 1%; width: 98%;  }
         }
        @media screen and (min-width: 641px) and (max-width: 2200px) and (orientation: landscape) and (min-height: 801px)
         {
           #description-panel	{ position: absolute; margin-left: .5%; width: 49%; }       
           #video-panel	{ margin-left: 50%; width: 49%; }
           #navigation	{ margin-top: 10px; margin-left: 50%; width: 49%;  }
           #fullpage { position: relative; margin-left: 1%; width: 98%;  }
         }
        @media screen and (min-width: 2201px) and (orientation: landscape)
         {
           #description-panel	{position: absolute; margin-left: 34%; width: 33%; }      
           #video-panel	{ margin-left: .5%; width: 33%; }      
           #navigation	{ margin-top: 10px; margin-left: 67%; width: 33%; }
           #fullpage { position: relative; margin-left: 1%; width:98%; }
         }
        @media screen and (orientation: portrait)
         {
           #description-panel	{ position: relative; margin-left: 1%; width: 98%;}
           #video-panel	{ position: relative; margin-left: .5%; width: 99%; }
           #navigation	{ margin-top:10px; margin-left: .5%; width: 99%; }
           #fullpage { position: relative; margin-left: .5%; width: 99%; }
         }
                    
    img {
        max-width: 100%;
        height: auto;
	    border-radius: 8px;
    }
    video {
        max-width: 100%;
        height: auto;
    }