@charset "utf-8";

/* --- Body, fonts, and header styles starts here --- */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #CCC;							/* --- font colour --- */
	background-color: #C00;					/* --- backgroud colour --- */
}
a {
	color:#fff;
	}
a:hover {
	color:#ffff00;
	}	
h1 {
	margin-bottom: 5px;
	margin-top: 25px;
	font-size:30px;
	color: #666;
	} 
h2 {
	margin-bottom: 5px;
	margin-top: 20px;
	font-size:24px;
	color: #999;
	} 
h3 {
	margin-bottom: 5px;
	margin-top: 15px;
	font-size:18px;
	color: #666;
	} 
h4 {
	margin-bottom: 5px;
	margin-top: 10px;
	font-size:14px;
	color: #CCC;
	} 
h5{
	margin-bottom: 5px;
	margin-top: 15px;
	font-size:14px;
	color: #999;
	} 
h6 {
	margin-bottom: 5px;
	margin-top: 15px;
	font-size:12px;
	color: #fff;
	} 
/* --- Body, fonts, and header styles ends here --- */


/* --- Page Layout starts here --- */
#container {
	background-image: url(images/content.jpg);
	background-repeat: repeat-y;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}
#header {
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
	clear: both;
	height: 167px;						/* --- Header height --- */
	width: 960px;
}
#header-menu {
	background-image: url(images/header-menu.jpg);
	background-repeat: no-repeat;
	clear: both;
	height: 113px;						/* --- Header-menu height --- */
	width: 960px;
}
#content {
	background-image: url(images/content.jpg);
	background-repeat: repeat-y;
	clear: both;
	height: 142px;						/* --- Content height --- */
	width: 860px;
	min-height: 100px;
	padding-left:50px;
	padding-right:50px
}
#footer-menu {
	background-image: url(images/footer-menu.jpg);
	background-repeat: no-repeat;
	clear: both;
	height: 114px;						/* --- Footer-menu height --- */
	width: 960px;
}
#footer {
	background-image: url(images/footer.jpg);
	background-repeat: no-repeat;
	clear: both;
	height: 184px;						/* --- Footer height --- */
	width: 960px;
}

#footer-notes-spacer {
	clear: both;
	height: 100px;						/* --- Content height --- */
	width: 560px;
	margin-right: auto;
	margin-left: auto;
}
#footer-notes {
	clear: both;
	height: 30px;						/* --- Content height --- */
	width: 560px;
	margin-right: auto;
	margin-left: auto;
}

#push-next-layout-container {
  float: left;
  width: 860px;
}
/* --- Page Layout ends here --- */


/* --- Navigation buttons - horizontal starts here--- */
 #navbar {
  	width:560px;
	margin-right: auto;
	margin-left: auto;
 } 

 #navbar #holder {
  height:38px;
  border-bottom:2px solid #000;
  width:560px; 	
  padding-left:25px; 
 } 

 #navbar #holder ul {
  list-style:none;
  margin:0;
  padding:0; 
 } 

 #navbar #holder ul li a { 
  text-decoration:none;
  float:left;
  margin-right:5px;
  line-height:15px;
  font-family:"Arial Black", Gadget, sans-serif;
  color:#000;
  border:2px solid #000;
  border-bottom:none;
  padding:10px;
  width:75px;
  text-align:center;
  display:block;
  background: #C00; 				/* --- tab backgroud colour --- */
  -moz-border-radius-topleft:15px;
  -moz-border-radius-topright:15px;
  -webkit-border-top-left-radius:15px;
  -webkit-border-top-right-radius:15px; 
 } 

 #navbar #holder ul li a:hover {
  background:#F90;
  color:#FFF;
  text-shadow:1px 1px 1px #000;
 } 
 
  #holder ul li a#onlink {
  background:#FFF;
  color:#000;
  border-bottom:1px solid #FFF; 
 } 

 #holder ul li a#onlink:hover {
  background:#FFF;
  color:#C00;  					 /* --- text hover colour --- */
  text-shadow:1px 1px 1px #000; 
 }
/* --- Navigation buttons - horizontal ends here--- */

 
 
 /* --- gallery 5 colums Start --- */

.grid {
  width: 810px;
	margin-right: auto;
	margin-left: auto;
}

.start {
  float: left;
  width: 0px;
  height: 1px;
}

.thumbnail {
  float: left;
  width: 138px;
}

.spacer {
  float: left;
  width: 25px;
  height: 1px;
}
/* --- gallery 5 colums End --- */


/* --- Float images to the left or right of page start here--- */

/* --- Float Single framed image to the right horizontal --- */
.floatright-framed
{
	float: right;
	width: 103px;
	margin: 20px 0 20px 20px;
	background-color: #C00;
	padding: 10px;
	border-top: 2px solid black;
	border-right: 4px solid black;
	border-bottom: 4px solid black;
	border-left: 2px solid black;
}

div.floatright-framed img
{
border-top: 2px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 2px solid black;
}

/* --- Float Single framed image to the left horizontal --- */
.floatleft-framed
{
	float: left;
	width: 103px;
	margin:20px 20px 20px 0;
	background-color: #C00;
	padding: 10px;
	border-top: 2px solid black;
	border-right: 4px solid black;
	border-bottom: 4px solid black;
	border-left: 2px solid black;
}

div.floatleft-framed img
{
border-top: 2px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 2px solid black;
}

/* --- Float Single image about 100 to the right horizontal --- */
.floatright
{
float: right;
width: 103px;
margin: 20px 0 20px 20px;
padding: 10px;
}

/* --- Float Single image to the left horizontal --- */
.floatleft
{
float: left;
width: 103px;
margin:20px 20px 20px 0;
}

p { margin-top: 0; }


/* --- Float Single image to the right vertical --- */
.floatright-clear
{
float: right;
margin: 20px 0 20px 20px;
clear: right;
}

/* --- Float Single image to the left vertical --- */
.floatleft-clear
{
float: left;
margin:20px 20px 20px 0;
clear: left;
}

/* --- Float Single image about 240 to the right horizontal --- */
.floatright-2
{
float: right;
width: 320px;
margin: 20px 0 20px 20px;
padding: 10px;
}

/* --- Float Single image to the left horizontal --- */
.floatleft-2
{
float: left;
width: 320px;
margin:20px 20px 20px 0;
}

p { margin-top: 0; }


/* --- Float Single image to the right vertical --- */
.floatright-2-clear
{
float: right;
margin: 20px 0 20px 20px;
clear: right;
}

/* --- Float Single image to the left vertical --- */
.floatleft-2-clear
{
float: left;
margin:20px 20px 20px 0;
clear: left;
}

.containingbox p { margin-top: 0;}
/* --- Float images to the left or right of page codes ends here--- */

/* --- Basic object alignment with no size restrictions --- */
.align-right { float:right; margin: 0 0 15px 15px; }
.align-left { float:left; margin: 5px 30px 15px 0; }
.frame { padding: 5px; border: 3px solid black; }
.center img { display:block;
	margin-left:auto;
	margin-right:auto;
}

.text_line  /* --- Move object to next line down to the left, reset both left and right--- */
{
clear:both;
margin-bottom:2px;
margin-top:25px
}

.text_line-r  /* --- Move object to next line down to the left, reset left only --- */
{
	clear:left;
	margin-bottom:2px;
	margin-top:25px
}

.text_line-l  /* --- Move object to next line down to the left, reset right only --- */
{
	clear:right;
	margin-bottom:2px;
	margin-top:25px
}


.thumbnail {
float:left;
width:115px;
height:100px;
margin:5px;
}

#imageParent {float: left; padding-right:15px; padding-left:10px;}
#imageParent p {text-align: center; font-style; italic}
/* take out the above  "border: thin black solid;" */

#imageParent-l {float: right; padding-right:15px; padding-left:10px;}

#imageParent-tr {
	float: right;
	padding-right:15px;
	padding-left:10px;
	width: 400px;
}
#imageParent-tl {
	float: left;
	padding-right:15px;
	padding-left:10px;
	width: 400px;
}