/* Bazza Grey Biz Template  copyright Nadia Perre  www.perrelink.com.au */
 
 body{
color:#333333;
background:#FFFFFF;
font:101% Verdana,Geneva,Arial,Helvetica,sans-serif;
text-align: center;
padding:0;
margin-top:10px;
background-image: url(images/backgif.gif);
}
/* this is used so that any shorter pages do not jumpt around due to no default scrollbar */
html { min-height:100%; margin-bottom:1px; }

/* styles the heading 1 */
h1{
margin-top:5px;
	margin-bottom: 6px;
	font-size: 1.1em;
	color: #CC3433; 
	background-color: transparent;
}

/* to add a border to outline whole layout using the wrapper div */
#wrapper{
width:750px;
margin-left:auto;
margin-right:auto;
border: 2px solid black;
padding: 10px;
text-align: left;
background-color: White;
}

#companyname{
width:100%;
background:url(images/companyname.gif) no-repeat;
height:80px;
}

#topline {
	background-image: url(images/toplinebg.jpg);
	height: 18px;
/*	margin-top:5px;*/
	padding:0;
	width: 725px;
}

/* You can change this image to suit your business - however, 
be aware that the dimensions will need to be the same as these, otherwise, the layout will break */
#headerpic{
float:left;
width:480px;
margin-top:10px;
margin-left:40px; 
background:url(images/header.jpg) no-repeat;
height:150px;
}

/* menu styles */
#menu{
 float:left;
margin: 10px 0px 0px 0px;
}

#menu li{
padding:0px;
}
#menu ul{
margin:0px;
padding:0px;
list-style:none;
}

#menu  a:active{
color:#000000;
background:#B8CA88;
}

/* menu link styles */
#menu a{
display:block;
width:180px;
padding-top:5px;
padding-left:20px;
border-bottom:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
color:#FFFFFF;
background: #565A5D url(images/listback_up.gif) no-repeat left;  /* this is the small arrow used as background image */
font-size:.80em;
text-decoration:none;
text-align:left;
height:24px;
}
#menu a:hover{
background:  #87B500 url(images/listback_hover.gif) no-repeat left; /* this is the small arrow used as background image */
color:#333333;
}
/* styles the current menu marker for the page */
#menu #current{
color:#333333;
background: #CF4141 url(images/listback_hover.gif) no-repeat left; /* this is the small arrow used as background image */
}
/* left column */
#left{
float:left;
width:210px;
margin-top:30px;
padding-right:10px;
font-size:0.8em;
border-right: 1px dotted black;
}
/* styles the paragraphs in the left column */
#left p{
font-size:.80em;
}

/* styles the newsletter signup box */
#newsletter{
width:209px;
margin-top:15px;
padding:24px 0px 0px 10px;
background:url(images/newletterbg.jpg) no-repeat;
height:36px;
}
/* styles the form different, so it does not resemble the original contact form */
#newsletter form {
 margin: 0;
 padding: 0;
text-align: left;
width: 200px;
}
#newsletter input {
padding-top: 0px;
padding-bottom: 0px;
float: left;
 width: 160px;
 height: 16px;
 vertical-align: middle;
/* sytles the newsletter go button */
}
#newsletter .button {
  background-color: #CC3333;
  color: #fff;
  width: 50px;
display: inline;
  border: 1px solid black;
margin-top: 6px;
height: 18px;
vertical-align: middle;
text-align: center;
font-weight: bold;
}
/* end of styles for newsletter signup form */

.date{
width:30%;
margin-top:10px;
color:#FFFFFF;
background:#CC3333;
font-weight:bold;
text-align:center;
}

.leadin{
font-weight:bold;
}
.links{
text-align:right;
}
.ppadbot{
margin-bottom:10px;
}
/* end all styles for left column */

/* right content column */
#right{
margin-top:20px;
width:480px;
margin-left: 240px;
}

/* styles the paragraphs in the right content area */
#right p{
margin-bottom: 1.2em;
font-size: 0.80em;
}

#right h2{
color: #6A8E00;
font-size: 1.0em;
font-weight: bold;
}

/* styles list in the right content area */
#right ul {
padding : 0 0 0 12px;
}

#right li {
	color: #666666;
	font-size: .80em;
}

/* footer styling */
#footer{
float:left;
width:480px;
padding-top:5px;
margin-top:15px;
background:url(images/footerbg.jpg) no-repeat;
font-size:0.7em;
text-align:center;
}

.images{
border:1px solid #DDDDDD;
margin-bottom:5px;
padding:2px;
float:left;
}

#imagegallery{
float:left;
margin-top:15px;
}
#imagegallery img{
}

/* class to clear the divs */
.brclear { 
     clear: both; 
     height:0; 
     margin:0;
     font-size: 1px;
     line-height: 0px;
}

/* basic link styles */
a {
color:#CC3333;
background:transparent;
font-weight:bold;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
/* FORM STYLES */

fieldset { border:0;}
legend {
 font-weight: bold; 
 }
form#contactform {
font-size: 90%; 
color: #505050; 
margin: 60px 20px 30px 30px; 
padding: 5px; 
width: 80%;
background-color: #FEFEFE; 
border: 1px solid black;
}
form#contactform div {
 clear: both; padding-top: 6px; 
 }
label {
 float: left; 
 width: 25%; 
 }
input,textarea { float: right; width: 70%; text-align: left;
border: 1px solid black; 
}

input {
border: 1px #000000 solid;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 9px;
height: 20px;
}

textarea { height: 100px; }

#send { 
float: right; 
margin: 0; 
width:40%; 
text-align: center; 
background-color: #CC3333;
color: white; 
padding: 2px 2px;
}

#contactform textarea:focus, #contactform input:focus, #contactform select:focus {
	background-color: #E6E6E6;
	color: #464545;}
/* end form styles */

/* use this if you want to place an image on a page, so that text sits either on the left or right of the picture */
.imgleft {
	float: left;
	padding: 6px
}
.imgright {
	float: right;
	padding: 6px
}