/*------------------------------------------------------------------
[Master Stylesheet]

Project:		Squaremonitor.com V7
Version:		1.0
Last change:	25/05/10 [ ]
Author:			Andrew Yee (andrew@citruscube.com)
Primary use:	Web site
-------------------------------------------------------------------*/

/* Main Layout */
* {
margin: 0;
padding: 0;
}

html {
	/* non-ie browsers short page fix */
	margin-bottom: 1px;
	height: 100%;
	margin: 0 auto;
}

body {
	font: 12px Verdana, Arial, sans-serif;
	color : #1b1b1b;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	height: 100%;
	background-image:url(http://www.squaremonitor.com/media/background.jpg);
	background-repeat:no-repeat;
}

#wrap {
	text-align:left;
	margin:0 auto;
}

#main {
	width: 960px;
	margin:0 auto;
	margin-top:10px;
	margin-bottom:10px;
}  

#footer-main{
	background:url(http://www.squaremonitor.com/media/background-footer.jpg);
	background-repeat:no-repeat;
	background-position:top;
	
}

#foot{
	width: 940px;
	margin:0 auto;
	padding: 15px 10px 10px 10px;
}

#navigation{
	height: 32px;	
	padding: 14px 0 0 10px;
	width: 960px;
	margin:0  auto;
}  


#header-main{
	height: 148px;
	padding:15px 0 0 0;
	width: 960px;
	margin:0  auto;
}

#header-main-left{
	width:660px;
	float:left;
	padding: 0 10px 0 10px;
	
}

#header-main-right{
	width: 260px;
	float:left;
	margin-right:10px;
}

#main-left{
	float:left;
	width:660px;
	margin:8px 10px 0 10px;
}

#main-right{
	float:left;
	width: 270px;	
	margin:0 10px 0 0;
}

.intro-text{
	margin: 15px 0 15px 0;
}

.follow-links{
	float:left;
	width:auto;
	margin: 0 10px 0 0;
}

/* Sub headings */

.sub-section{
	background-color:#FFF;
	font-size:10px;
}

.sub-heading-twitter{
	height:22px;
	width:auto;	
	background-color:#34CCFF;	
	color:#FFF;
	font-size:14px;
	margin:0 0 10px 0;
	padding: 3px 0 0 10px;
}

.sub-heading-latest-work{
	height:22px;
	width:auto;	
	background-color:#5A0000;
	color:#FFF;
	font-size:14px;
	margin:10px 0 10px 0;
	padding: 3px 0 0 10px;
}

.sub-heading-posterous{
	height:22px;
	width:auto;	
	background-color:#FFE06F;
	color:#333;
	font-size:14px;
	margin:10px 0 10px 0;
	padding: 3px 0 0 10px;
}


.clear{
	clear:both;
		
}

/* Footer */


#leftfootercontent {
	width: 340px;
	float: left;
	text-align:left;
}
#middlefootercontent {
	width: 240px;
	float: left;
	text-align:left;
}


#rightfootercontent {
	width: 350px;
	float: left;
	text-align:left;
}



/* Text sizes/colours */

li{
	list-style-image:url(http://www.squaremonitor.com/media/bullet.gif);
	margin-left:20px;
	margin-bottom: 3px;
}

h1 {
	/*font-size: 4em;
	text-align: center;*/
	
	font-size: 28px;
	font-weight:normal;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	margin:0 0 20px 0;
	}
	
	
h2 {
	font-size: 22px;
	font-weight:normal;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	margin:0 0 5px 0;
	}

h3 {
	font-size: 18px;
	font-weight:bold;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	margin:0 0 5px 0;
	}

h4{
	font-size: 14px;
	font-weight:normal;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	margin:0 0 10px 0;
	color:#FFF;
}


p{
	margin: 2px 0 5px 0;	
}

#navigation{
	color:#FFF;	
	font-size:16px;
}

#navigation a{
	color:#FFF;	
	text-decoration:none;
}

#navigation a:hover{
	color:#FFF;	
	text-decoration:underline;
}

.intro-text{
	font-size:14px;
	color:#FFF;	
	line-height:18px;
}

.intro-text a{
	color:#C00;
}

.follow-links{
	font-size:10px;
	color:#FFF;
}

.follow-links a{
	font-size:10px;
	color:#FFF;
}


#middlefootercontent a{
	color: #ffffff;
}

#middlefootercontent a:hover{
	color: #999;
}

#rightfootercontent a{
	color: #ffffff;
}

#rightfootercontent a:hover{
	color: #999;
}

#main {
	line-height:20px;
}  

#foot{
	color:#FFF;
	font-size:11px;
}

/* Image */

.portfolio-image{
	border: 10px solid #000;	
}

.follow-links img{
	margin: 0 10px 0 0;
}

/* Colours */

.grey{
	color:#666;	
}




/* Contact forms */

form label {
	display: block;
	float: left;
	width: 80px;
  
}

.main-contact-form {
	display: block;
	float: left;
	width: 190px;
  
}

#contact_name {

	background-color: #CCCCCC;
	border: 0px; 
	margin: 2px;
	padding: 2px;
}

#email_address {

	background-color: #CCCCCC;
	border: 0px; 
	margin: 2px;
	padding: 2px;
}

#comments {

	background-color: #CCCCCC;
	border: 0px; 
	margin: 2px;
	padding: 2px;
	font-family: verdana , arial, hevetica, sans-serif;
	font-size:12px;
}

#howdidyouhear {

 background-color: #CCCCCC;
 border: 0px; 
 margin: 2px;
 padding: 2px;
 font-family: verdana , arial, hevetica, sans-serif;
  font-size:12px;
}

#telno {

 background-color: #CCCCCC;
 border: 0px; 
 margin: 2px;
 padding: 2px;

}

input.inputText {
  width: 170px;
  padding: 1px 3px;
  margin: 0 0 0 0;
}

textarea{
	width: 170px;
	padding: 1px 3px;
	margin: 0 0 0 0;
}

input {
   margin-top:5px;
}

.hideform {
	display: none;
}

/* Toggle msg */

.msg{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana;
	padding:3px 4px;
	border:solid 1px #DEDEDE;
	background:#FFFFCC;
	font-size:11px;
	color:#333333;
	width:200px;
	margin-left:2px;
}