/**common css**/
*{margin:0px;padding:0px}

/**wrapper**/
#wrapper{width:1000px;height:600px;margin:10px auto;background:#888888}

/**header**/
#header{width:100%;height:100px;background:#008040}

/**content**/
#content{width:100%;min-height:400px}
#top{padding-top:2px;width:100%;height:50px;background:#00A8F9}
#left{float:left;width:50%;height:350px;background:#80FFFF}
#right{float:right;width:50%;height:350px;background:#80FF80}
#image{margin:40px 40px}
#text{font-family:arial;font-size:15px;font-weight:bold;text-align:justify;margin:40px 40px}
/**footer**/
#footer{width:100%;height:100px;background:#008040}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 767px) {
	#header,#footer{width:100%;height:100px;background:#FF0040}
	#text{line-height:35px;color:yellow}
	#left,#right{width:100%;height:400px;background:#408080}
	#right{background:#00FF40}
	#top{color:white;background:#000000}
	
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
	
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	#header,#footer{background:#FF0040}
	#text{line-height:22px;font-style:italic;color:yellow}
	#left,#right{background:#408080}
	#top{text-decoration:underline;font-style:italic;color:white;background:#33BDFF}
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait & landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
  
}
 
/* iPhone 5 (landscape)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
 
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}