body {
margin:     			0 auto;
padding:    			0;
font-family:			verdana;
font-size:				14px;
font-weight:			normal;
text-align:				left;
background-color:		#333333;
color:					white;}

img {border: 1px solid white}

h1, h2, p {font-family: verdana}
h1 {font-size: 24px;	text-align: center; 	color: white; text-shadow: 4px 4px 3px black;  margin-top: 20px; margin-bottom: 40px;}
h2 {font-size: 17px;	text-align: center;		font-weight: normal;	margin-top: 80px; margin-bottom: 0px;}
h3 {font-size: 14px;	text-align: center;		font-weight: bold;		margin-top: 0px;  margin-bottom: 20px;}
p  {font-size: 14px;	font-weight: normal;	margin: 0px}


.middle {
text-align: center;}


.menubar {
width:				100%;
margin:				0 auto;
margin-top:			0px;
margin-bottom:		20px;
text-align:			center;}


.img-banner {
margin:				0 auto;
display:  			block;
width:				100%}


/* ======================================================= FOR DESKTOP  =================================================== */
/* ============================ If the minimum width is greater than 900px, run this code ================================= */

@media only screen and (min-width: 900px) {

a:link, a:visited, a:active  {font-size: 14px; font-weight: bold; text-decoration: none;  color: white;}
a:hover   {text-decoration: none;  color: #888;}

.container {
width:				1400px;
margin:				0 auto;
margin-top: 		10px;
margin-bottom: 		30px;
text-align:			left;}

}


/* ======================================================= FOR LAPTOP & PADS =================================================== */
/* ================ If the minimum width is greater than 500px and maximum less than 1100, run this code ======================= */

@media only screen and (min-width: 500px) and (max-width: 1100px) {

a:link, a:visited, a:active  {font-size: 13px; font-weight: bold; text-decoration: none;  color: white;}
a:hover   {text-decoration: none;  color: #888;}

.container {
width:				800px;
margin:				0 auto;
margin-top: 		10px;
margin-bottom: 		30px;
text-align:			left;}


}


/* ======================================================= FOR MOBILE PHONES =================================================== */
/* =============================== If the maximum width is less than 550px, run this code ====================================== */

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

a:link, a:visited, a:active  {font-size: 7px; font-weight: bold; text-decoration: none;  color: white;}
a:hover   {text-decoration: none;  color: #888;}

.container {
width:				320px;
margin:				0 auto;
margin-top: 		10px;
margin-bottom: 		30px;
text-align:			left;}


}


/* ============================================================================================================================= */
/* ============================================================================================================================= */


/* ================================================================ 
http://www.cssplay.co.uk/menus/final_drop.html
***  This is JUST for menu WITHOUT any boxes
=================================================================== */
.menu { }


/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding: 0; margin: 0; list-style-type: none;}
.menu ul ul {width: 99%;}


/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float: left; width: 109px; position: relative;}	/* width of menu bar units 110*/


/* style the links for the top level */
.menu a, .menu a:visited {
display:			block;
line-height:		25px; 						/* vertically aligns main menu text in box */
color:				white;						/* menu text colour */
background-image:	url("images/blank.gif");}	/* menu bar colour */



/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:			hidden; 
position:			absolute;}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {
position:			absolute; 
left:				0; 
border-collapse:	collapse;}



/* style the drop menu */
.menu ul ul a, .menu ul ul a:visited {
background-image:	url("images/blank.gif");	/* background colour of sub menu */
color:				#666;						/* text colour on sub-menu */
width:				180px; 					    /* width of sub-menu bar */
text-align: 		left;						/* align submenu with main menu */
margin-left: 		15px}						/* move submenu directly under main menu  27px */

.menu :hover > a, .menu ul ul :hover > a {
color:				#99cc99; 						 /* main menu text hover and sub-menu text hover*/
background-image:	url("images/menucolor.jpg");}	 /* main menu background hover and sub-menu background hover  */



/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}



{}