/* grahamlockyer.css */
/* header wrap charcoal= #2e2e2e  header red= #ae2e2e  header cream= #e8dba7 */
/* menu grey= #4c4d51  menu hover red= #ae2e2e menu hover border= #d45951 */
/* left content cream background= #e8dba7  right content cream background= #fef8db */
/* latestnews wrap= #f4edd3  latestnews text background= #bbb082 */

/* my screen = 1680*1050 */
/* designing on screen = 1024*768 */
/* width 91.796875% = 940px */
/* width 95.703125% = 980px */

/* width 96% = 983.04px */
/* testing on 800*600 and above */

html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, a, p{
	margin:0;
	border:0;
	padding:0;
}
body{
/*	font-size:62.5%; /* = 1em, 7.5pt, 10px */
	font-size:100.01%; /* = 1em, 12pt, 16px=medium */
	font-family:"Arial","Helvetica","Verdana","sans-serif";
	background-color:#2e2e2e; /* charcoal */
	color:#111111; /* black */
}
a{
	color:#ae2e2e; /* header red */
	font-size:1em;
}
a, img{
	border-style:none; /* removes different browser highlights around links AND images */
}
p{
	font-size:1em;
}
img.left {
	float: left;
	margin-right:1%;
}
img.right{
	float: right;
	margin-left:2px;
}
/* form filling ----------------------------------------------------- */

legend {
	color:#000; /* IE styles legends with blue text by default */
	*margin-left:-7px; /* A hack that only ie reads to position the legend in the same place cross browser */
}
	*margin-left:-7px; /* A hack that only ie reads to position the legend in the same place cross browser */
}
fieldset {
	border:1px solid #dedede; /* Default fieldset borders vary cross browser, so make them the same */
}
fieldset div {
	overflow:hidden; /* Contain the floating elements */
	display:inline-block; /* Give layout in ie to contain float */
}
fieldset div {display:block;} /* Reset element back to block leaving layout in ie */
label {
	float:left; /* Take out of flow so the input starts at the same height */
	width:5em; /* Set a width so the inputs line up */
}

.radio {
	position:relative; /* Position so children are relative to this container */
	border:0; /* Remove the border */
}
.radio span {
	position:absolute; /* Take the content of the legend out of flow */
	top:0;left:0; /* and position it to the top left of the fieldset */
	width:5em; /* Same width as labels */
}
.radio ul {
	margin-left:10em; /* Since the legend is out of flow. set margin, so inputs are inline */
	list-style:none; /* Dont want bullets */
}
.radio li {
	position:relative; /* Fix a bug in IE zoom functionality */
	display:inline; /* Display the inputs in a line */
	white-space:nowrap; /* We dont want a label to wrap between the input and label */
}
.radio label, .radio input {
	width:auto; /* Reset the width on the label from the 5em, set earlier */
	float:none; /* Reset the float from left on the label, set earlier */
	vertical-align:middle; /* Align the radio buttons with the inputs */
}

/* another */



/* ----------------------------------------------------------------------- */

/* COMMON COLUMN SETTINGS */
.bot-cont{
	position:relative; /* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%; /* width of Col1 area (not including padding)*/
	overflow:hidden; /* This chops off any overhanging divs */
}
.other-cont{
	float:left;
	width:100%;
	position:relative;
}
.col{
	float:left;
	position:relative;
	overflow:hidden;
	padding:1%;
	text-align:justify;
}
/* ----------------------------------------------------------------------- */
/* HEADER (1024*768) */
.header-wrap{
	width:100%; /* = 1024px */
/*	height:48em; /* = 768px */
	background-color:#2e2e2e; /* charcoal */
	clear:both;
	float:left;
}
.header-area{
	width:95.703125%; /* = 980px */
	height:7em; /* = 112px */
	background-color:#ae2e2e; /* header red */
	margin:auto; /* auto centers header */
	margin-top:1em; /* = 16px */
}
/* ----------------------------------------------------------------------- */
/* HEADER COLUMNS */

.hcont3{
	background-color:#ae2e2e; /* header red */
}
.hcont2{
	right:20%; /* move container-left 20% LEFT to let bot-head-cont3 show up 20% on RIGHT */
	background-color:#ae2e2e; /* header red */
}
.hcont1{
	right:33%; /* move container-left 33% LEFT to let head-cont2 show up 33% on RIGHT */
	background-color:#ae2e2e; /* header red */
}
.hcol-left{
	width:45%;
	left:53%; /* move col-left 53% RIGHT (aggregate of all previous CONTAINER 'right's 20+33) back to start position */
	text-align:center;
}
.hcol-mid{
	width:31%;
	left:53%; /* move cola 53% RIGHT (aggregate of all previous CONTAINER 'right's 20+33) back to start position */
	text-align:center;
}
.hcol-right{
	width:18%;
	left:53%; /* move cola 53% RIGHT (aggregate of all previous CONTAINER 'right's 20+33) back to start position */
}
.hcol-left h5{
	padding-top:5%;
	font-size:2.8em;
	text-align:center;
	color:#e8dba7; /* header cream */
}
.hcol-mid h6{
	font-size:2.4em;
	text-align:center;
	font-style:italic;
/*	color:#4c4d51; /* nbnbnbn */
	color:#bbb082; /* latestnews background */
}
.hcol-right img{
	float:right;
}
/* ----------------------------------------------------------------------- */

/* MENU */
#menu-wrap{
	clear:both;
	background:#2e2e2e; /* charcoal */
	width:100%; /* = 1024px */
	height:2em; /* = 32px */
}
#menu{
	background-color:#4c4d51; /* menu grey */
	width:95.703125%; /* = 980px */
	height:2em; /* = 32px */
	margin:auto; /* automatically centres grey background */
}
#menu ul{
	padding:2px; /* long menu grey bar padding before menu items are placed */
	list-style:none;
}
#menu li{
	display:inline;
}
#menu .menublock a{
	background-color:#ae2e2e; /* header red */
	border:1px;
	border-color:#ae2e2e; /* header red */
	border-style:solid;
	color:#ffffff; /* white */
	text-transform:uppercase;
}
#menu a{
	float:left;
	margin-right:2px;
	border:1px;
	border-color:#ae2e2e; /* header red */
	border-style:solid;
	padding:7px 20px 6px 20px;
	background-color:#4c4d51; /* menu grey */
	text-decoration:none;
	text-transform:uppercase;
	font-weight:bold;
	font-size:12px;
	color:white;
}
#menu a:hover{
	text-decoration:none;
	background-color:#ae2e2e; /* header red */
	color:white;
	border:1px;
	border-color:#ae2e2e; /* header red */
	border-style:solid;
}

#menu2-wrap{
	clear:both;
	background:#2e2e2e; /* charcoal */
	width:100%;
	height:2em;
}
#menu2{
	background-color:#4c4d51; /* menu grey */
	width:95.703125%; /* = 980px */
	height:2em;
	margin:auto;
}
#menu2 ul{
	padding:2px;
	list-style:none;
}
#menu2 li{
	display:inline;
}
#menu2 .menublock a{
	background-color:#ae2e2e; /* header red */
	border:1px;
	border-color:#ae2e2e; /* header red */
	border-style:solid;
	color:white;
	text-transform:uppercase;
}
#menu2 li img{
	padding-left:5px;
}
#menu2 a{
	float:left;
	margin-right:2px;
	border:1px;
	border-color:#ae2e2e;  /* header red */
	border-style:solid;
	padding:5px 20px 5px 20px;
	background-color:#4c4d51;  /* menu grey */
	text-decoration:none;
	text-transform:capitalize;
	font-weight:bold;
	font-size:12px;
	color:white;
}
#menu2 a:hover{
	text-decoration:none;
	background-color:#ae2e2e; /* header red */
	color:white;
	border:1px;
	border-color:#ae2e2e; /* header red */
	border-style:solid;
}
/* ----------------------------------------------------------------------- */

/* CONTENT */
.content-wrap{
	clear:both;
	width:100%; /* = 1024px */
	background-color:#2e2e2e;  /* charcoal */
}
.content-area{
	background-color:#e8dba7;  /* header cream */
	width:95.703125%; /* = 980px */
	margin:auto; /* auto centres content area */
}
.content-area a, .content-area p{
	font-size:1em;
}
/* ----------------------------------------------------------------------- */
/* GL COLUMNS */

/* GL 1 COL */
.gl1-cont{
	background-color:#e8dba7; /* header cream */
}
.gl1-col{
	width:98%; /* width left column CONTENT (no padding) */
	left:0%;
}
/* ----------------------------------------------------------------------- */

/* GL 2 COL EQUAL HEIGHT */
.gl2cont-right{
	background-color:#fef8db; /* light cream */
}
.gl2cont-left{
	right:35%; /* move container-left 35% LEFT to let container-right show up 35% on RIGHT */
	background-color:#e8dba7; /* header cream */
}
.gl2cola{
	width:63%; /* width left column CONTENT (no padding) */
	left:35%; /* move cola 35% (aggregate of all previous CONTAINER 'right's) RIGHT back to start position */
}
.gl2colb{
	width:33%; /* width right column CONTENT (no padding) */
	left:35%; /* move colb 35% (aggregate of all previous CONTAINER 'right's) RIGHT back to start position */
}
/* ----------------------------------------------------------------------- */

/* GL 3 COL EQUAL HEIGHT */
.gl3cont3{
	background-color:#e8dba7; /* right container3 content cream */
}
.gl3cont2{
	right:6%; /* move container-left 6% LEFT to let container-3 show up 6% on RIGHT */
	background-color:#fef8db; /* light cream */
}
.gl3cont1{
	right:33%; /* move container-left 33% LEFT to let container-2 show up 33% on RIGHT */
	background-color:#e8dba7; /* left container1 content cream */
}
.gl3col1{
	width:59%;
	left:39%; /* move cola 39% RIGHT (aggregate of all previous CONTAINER 'right's 6+33) back to start position */
}
.gl3col2{
	width:31%;
	left:39%; /* move colb 39% (aggregate of all previous CONTAINER 'right's 6+33) RIGHT back to start position */
}
.gl3col3{
	width:4%;
	left:39%; /* move colc 39% (aggregate of all previous CONTAINER 'right's 6+33) RIGHT back to start position */
}
.gl3col2 a, .gl3col2 p, .gl3col3 a, .gl3col3 p{
	line-height:15.8px;
	font-size:10px;
}
/* ----------------------------------------------------------------------- */

/* GL 4 COL EQUAL HEIGHT */
.gl4cont4{
	background-color:#fef8db; /* right container3 content cream */
	border-bottom:0.1%;
	border-bottom-color:#ae2e2e; /* header red */
	border-bottom-style:solid;
}
.gl4cont3{
	right:79%; /* move container-left 10% LEFT to let container-right show up 10% on RIGHT */
	background-color:#e8dba7; /* mid container2 content cream */
}
.gl4cont2{
	right:7%; /* move container-left 10% LEFT to let container-right show up 10% on RIGHT */
	background-color:#fef8db; /* mid container2 content cream */
}
.gl4cont1{
	right:7%; /* move container-left 30% LEFT to let container-right show up 30% on RIGHT */
	background-color:#e8dba7; /* left container1 content cream */
}
.gl4col1{
	width:5%;
	left:93%; /* move cola 94.9% RIGHT (aggregate of all previous CONTAINER 'right's 84.7+5.1+5.1) back to start position */
	text-align:center;
}
.gl4col2{
	width:5%;
	left:93%; /* move cola 40% (aggregate of all previous CONTAINER 'right's 10+30) RIGHT back to start position */
	text-align:center;
}
.gl4col3{
	width:5%;
	left:93%; /* move cola 40% (aggregate of all previous CONTAINER 'right's 10+30) RIGHT back to start position */
	text-align:center;
}
.gl4col4{
	width:77%;
	left:93%; /* move cola 40% (aggregate of all previous CONTAINER 'right's 10+30) RIGHT back to start position */
	text-align:justify;
}
.gl4col4 a{
	font-size:1em;
}
.newscolor{
	background-color:#bbb082;
	color:white;
}
/* ----------------------------------------------------------------------- */
/* LATESTNEWS */

#latestnews-wrap{
	clear:both;
	background-color:#bbb082;
	width:100%;
	border-top:0px #bbb082 solid;
	border-bottom:0px #bbb082 solid;
}
#latestnews{
	background-color:#bbb082;  /* jhjhjhjh */
	width:95.703125%; /* = 980px */
	margin:auto;
	padding:0;
	font-size:1em;
	color:white;
}
#latestnews p{
	font-weight:bold;
	text-align:center;
	color:white;
}
/* ----------------------------------------------------------------------- */
/* FOOTER */

#footer{
	width:95.703125%; /* = 980px */
	background-color:white;
	clear:both;
	margin:0 auto;
	padding:6px 0 6px 0;
	text-align:center;
}
#footer a{
	color:#ae2e2e; /* header red*/
	font-size:0.9em;
}
#footer a:hover{
	background-color:#bbb082;
}
#footer span{
	margin:0;
	font-size:0.7em;
	color:#2e2e2e;
}
/* ----------------------------------------------------------------------- */