screen.css


/********** tablets, phones and screen sizes 1024px ********************/
.mobile-indicator-1024 {
	 display:block;
}
.mobile-indicator-780 {
	 display:none;
}
.mobile-indicator-540 {
	 display:none;
}
.mobile-indicator-480 {
	 display:none;
}
.mobile-indicator-320{
	 display:none;
}



#container
{
    width:900px;
      margin:0 auto;
}

#masthead
{
    width:100%;

}

#navigation
{
    width:100%;
}

#maincontent
{
    width:100%;
}

#leftcolumn
{
    width:600px;
    float:left;
}

#rightcolumn
{
    width:300px;
    float:left;
}

#footer
{
    width:100%;
    height:75px;
}

#navigation ul{
	margin:0;
	padding:0;
}

#navigation li{
	display:inline;
}


#masthead h1
{
	display:inline;
}


/********** tablets, phones and screen sizes 780px ********************/

@media only screen and (max-width: 760px){

	.mobile-indicator-1024 {
	 	display:none;
	}
	.mobile-indicator-780 {
		 display:block;
	}
	.mobile-indicator-540 {
	 	display:none;
	}
	.mobile-indicator-480 {
	 	display:none;
	}
	.mobile-indicator-320{
	 	display:none;
	}


	
	#container{
		margin:0 auto;
		width: 750px;
	}
	
	#maincontent{
		width: 100%;
	    background-image: url('Images/background750.jpg');
	    overflow:hidden;
	}
	
	#leftcolumn{
		width:500px;
		float:left;
	}
	
	#leftcolumn img{
		width: 60%;
	}

	#rightcolumn{
		width:250px;
		float:left;
	}
	#rightcolumn img{
		width: 60%;
	}

	
}

/********** tablets, phones and screen sizes 540px ********************/

@media only screen and (max-width: 540px){
	.mobile-indicator-1024 {
	 	display:none;
	}
	.mobile-indicator-780 {
	 	display:none;
	}
	.mobile-indicator-540 {
	 	display:block;
	}
	.mobile-indicator-480 {
	 	display:none;
	}
	.mobile-indicator-320{
	 	display:none;
	}

	#container{
		width:510px;
		margin:0 auto;
	}
	
	#navigation{
		width:100%;
	}
	
	#maincontent{
		background-image:none;
		background-color:#FFFFFF;
	}

	#navigation li{
		display:block;
		width:100%;	
	}
	
	#leftcolumn{
		width: 100%;
	}
	
	#leftcolumn img{
		width: 50%;
	}
	
	#rightcolumn{
	   width: 100%;
	}
	
	#rightcolumn img{
		width: 50%;
	}

	
}

/********** Smartphones landscape and screen sizes 480px ********************/

@media only screen and (max-width: 480px){

.mobile-indicator-1024 {
	 display:none;
}
.mobile-indicator-780 {
	 display:none;
}
.mobile-indicator-540 {
	 display:none;
}
.mobile-indicator-480 {
	 display:block;
}


	#container{
		width:450px;
		margin:0 auto;
	}
	#masthead{
		width:100%;
	}
	
	#navigation{
		width: 100%;
	}
	#leftcolumn{
		width: 100%;
	}
		#leftcolumn img{
		width: 45%;
	}

	#rightcolumn{
	   width: 100%;
	}
		#rightcolumn img{
		width: 45%;
	}

	#footer{
		width:100%;
	}
	
}

/********** Smartphones portrait and screen sizes 320px ********************/

@media only screen and (max-width:320px){

	.mobile-indicator-1024 {
	 	display:none;
	}
	.mobile-indicator-780 {  
	 	display:none;
	}
	.mobile-indicator-540 {
	 	display:none;
	}
	.mobile-indicator-480 {
	 	display:none;
	}
	.mobile-indicator-320{
	 	display:block;
	}

	#container{
		width:300px;
		margin:0 auto;
	}
	#masthead{
		width:100%;
	}
	
	#masthead h1{
	  display:block;
}
	#leftcolumn{
		width: 100%;
	}
	
	#leftcolumn img{
		width: 45%;
	}

	#rightcolumn{
	   width: 100%;
	}
	
	#rightcolumn img{
		width: 45%;
	}

	#footer{
		width:100%;
	}
	
}