/**************************************************************

STYLESHEET CONTENTS
1. Fonts
2. HTML Tags
3. Layour Divs
4. Specific formatting
      a. Header
	  b. Footer
	  c. Navigation
	  d. Content Column
      e. Contact Form
5. General Formatting Classes

COLOUR SCHEME
#282828 - Dark grey (background, text)
#3777B5 - Light blue (H1, some headers/titles)
***************************************************************/

/********************* Fonts ********************/
h1, h2, h3,
.latestProjTitle, #weAre, #portfolioClientName, #portClientComment {	
	font-family: "Lucida Fax", Georgia, "Times New Roman", Times, serif}
	
body {	
	font-family: Arial, Helvetica, sans-serif;}	

#mainNav, .tmName, #conTel {	
	font-family:Georgia, "Times New Roman", Times, serif;}
	
#header a {
	font-family: "Lucida Sans", Arial, Helvetica, sans-serif;}	
/********************* End Fonts ********************/

/********************* HTML Tags ********************/
* { margin: 0px;
	padding: 0px;
	border: 0px;
	color: #282828;}

html {	}	

body {
	background:url(../Images/BodyBG.png) top center repeat-x #282828;}

p {	
	line-height:185%;
    margin-bottom: 10px;
    font-size:13px;}

li {list-style-type: none;}

a:link, a:active, a:hover, a:visited { 
	text-decoration:none;
	color: #282828;}

h1 {
	font-size:32px;
	margin: 17px 0px 15px 0px;
	color: #3777B5;
	letter-spacing: -2px;
	font-weight:normal;}

h1 #smallTitle {
	font-size:21px;
	color: #3777B5;}	

#weAre {
	font-size:30px;
	margin: -15px 0px 15px 0px;
	color: #282828;}

/*h1 span { color:#282828;}*/

h1#port {
    float:left;}

#smaller {
    color:#3777B5;
    font-size:21px;
    float:left;}
		
h2 { 
	font-size:26px;
	margin: 25px 0px;
	letter-spacing:-1px;  }
	
h3 { 
	font-size:20px;	
	letter-spacing:-1px;  }
	/*
h3 { 
	font-size:15px;
	color: #FF0000;}	
*/	
/********************* End HTML Tags *********************/
		
/********************* Layout Divs *********************/

#container {	
	width: 1000px;
	margin:auto;
	padding: 0px;
	background-color:#FFFFFF;
	overflow:hidden;}
			
#header {	
	position:relative;
	overflow:hidden;
	margin-bottom:10px;
	height:240px;
	background:url(../images/TopBG.gif) top right no-repeat #FFF;}		
				
#content {	
	width: 550px;
	float:left;
	margin-left:50px;	
	padding-bottom: 150px;}

#wrapper {
	background:url(../images/BottomBG.gif) bottom left no-repeat;
	overflow:hidden;}

#infoColumn {
	width:300px;
	float:left;
	margin-left:50px;}

#footer {	
	clear:both;
	border-top: 20px solid #282828;
	background:url(../images/FooterBG.png) top left repeat-x #366998;
	padding: 20px 20px 20px 50px;
	overflow:hidden;
	position:relative;}
		
#mainNav {	
	font-size:19px;}


/********************* End Layout Divs *********************/
	
/********************* Specific formatting *********************/

/* -------- Header -------- */

#logo {
	position:absolute;
	bottom: 25px;
	left:55px;}	

#headerLinks {
	margin: 12px 70px;}

#headerLinks, #headerLinks a {
	font-size:11px;}
		
#headerLinks a:hover {
	text-decoration:underline;}		
/* -------- End Header -------- */

/* -------- Footer -------- */

#footer p, #footer a, #footer strong {
	color:#FFF;
	font-size:13px;}
	
#footer a:hover{
	text-decoration:underline;}	
	
#footer img {	
	}

#validIcons {
	position:absolute;
	right: 20px;
	top: 38px;}

/* -------- End Footer -------- */

/* -------- Navigation -------- */

#menu {}

#mainNav {
    padding-bottom: 190px;}

#mainNav ul{
	border-bottom: 1px solid #CCC;}

#mainNav ul li a{	
	line-height:43px;
	display:block;
	border-top: 1px solid #CCC;
	padding-left:20px;}

#mainNav ul li ul 	{
    border: none;}

#mainNav ul li ul li a {
    line-height:30px;
	display:block;
	border: none;
	padding-left: 15px;
	margin-left: 40px;
	background: url(../images/subNavBullet.gif) left no-repeat;
	font-size: 17px;}	

#mainNavActive, #menu a.mainNavActive, #mainNav ul li a:hover{	
	color: #3777B5;}

#mainNav ul li ul li a.subNavActive, #mainNav ul li ul li a:hover
{
    color: #3777B5;}
	
/* -------- End Navigation -------- */

/* -------- Info Column -------- */

/* -------- End Info Column -------- */

/* -------- Content Column -------- */

p.intro {
	background:url(../images/ParaBG.gif) repeat;
	margin-bottom: 20px;
	font-size:16px;}

#services {
	overflow:hidden;
	margin-top: -20px;}

#serviceList {}

#serviceList .serviceBtn {
	height:102px;
	float:left;}
	
#svcDesign {
	background:url(../images/Btn_WebDesign_Ref.gif) bottom no-repeat;}

#svcChopUp {
	background:url(../images/Btn_ChopUp_Ref.gif) bottom no-repeat;
	margin: 0 22px;}

#svcDev	{
	background:url(../images/Btn_Dev_Ref.gif) bottom no-repeat;}

#latestProjects {
	clear:both;
	margin-top:-10px;}

#latestProjects li {
	float:left;
	margin-right:10px;
	margin-bottom:15px;}

#latestProjects li.alt {
	margin-right:0}
	
.latestProjTitle {
	font-size:14px;
	font-weight:bold;
	color: #3777B5;}

.latestProjSvcs{
	font-size:11px;
	color:#666666;}	
	
#theTeam {
    }	

#theTeam .teamMember {
    background:url(../images/TeamMemberBG.png) top left repeat-x;
    clear:both;
    overflow:hidden;
    margin-bottom: 30px;
    padding: 20px 10px 10px 10px;}	

#theTeam img {
    float:left;}	 
           
#theTeam .aboutTM {
    float:right;
    width:360px;}

#theTeam .tmName {
    font-size: 15px;
    font-weight: bold;
    color: #3777B5;}

#theTeam .tmTitle {
    font-size:11px;
    margin-bottom: 10px;}
    
#theTeam .tmDesc {
    }
    
#theTeam .likes{
    float:left;
    font-size:11px;
    margin-top: 15px;}
    
#theTeam .likes span{
    font-weight: bold;
    color: #3777B5;}  
    
#servicesList .service {
    margin-top: 20px;
    background:url(../images/TeamMemberBG.png) top left repeat-x;
    padding: 15px;}
    
#servicesList h2, #servicesList h3 {
    float:left;
    margin: 0;}      

#servicesList .rate {
    float:left;
    color: #2E71B1;
    font-size: 11px;
    font-weight: bold;
    margin: 8px 0 0 15px;
    display: none;} 

#servicesList .rate {
    margin: 5px 0 0 15px;}        
    
#servicesList p {
    clear:both;}    
    
#conTel {
    font-size: 24px;
    color: #75A1CB;
    margin: 15px 0;}    
/* -------- End Content Column -------- */

/* -------- Contact Form -------- */
fieldset.contactForm {  margin: 0;}

/*fieldset.contactForm {  width:500px;
                        margin: 0px 0px 0px 10px;
                        border: 1px solid #282828;
                        padding: 10px;}

fieldset.contactForm legend {	font-weight:bolder;
								margin:10px 0px 10px 10px;
								color:#282828;}*/

fieldset.contactForm label 	{
    margin:0px;
    padding-top:3px;
    /*width:115px;*/
    text-align:left;
    float:left;
    font-size:90%;
    color:#282828;
	/*color:#3777B5;*/
	font-weight:bold;}
	
fieldset.contactForm label span {	
    font-weight:normal;}							    
    
fieldset.contactForm input.notReq, 
fieldset.contactForm textarea.notReq,
fieldset.contactForm select,
fieldset.contactForm checkbox{
    margin:3px 0 5px 0;
    width: 280px;
    background-color:#FFF;
    border: 1px solid #282828;
    padding: 3px;}
    
fieldset.contactForm input.req, 
fieldset.contactForm textarea.req  {
    margin:3px 0 5px 0;
    width: 280px;
    background-color:#FFF9F9;
    border: solid 1px #A40000;
    padding: 3px;}
        
fieldset.contactForm input.invalidInput, 
fieldset.contactForm textarea.invalidInput{
    margin:0 0 5px 0;
    width: 280px;
    background-color:#FFF;
    border: 1px solid #F00;
    padding: 3px;}    

fieldset.contactForm #submit {
    padding: 0;
	border: none;
	width:100px;
	height:35px;
	background:transparent url(../images/Btn_Submit.gif) top left no-repeat;
	padding-top:35px;
	overflow: hidden;
	cursor: pointer; /* hand-shaped cursor */
	cursor: hand; /* for IE 5.x */}

fieldset.contactForm .contactButton{
    padding: 0;
	border: none;
	width:100px;
	height:35px;
	background:transparent url(../images/Btn_Submit.gif) top left no-repeat;
	padding-top:35px;
	overflow: hidden;
	cursor: pointer; /* hand-shaped cursor */
	cursor: hand; /* for IE 5.x */
	float:left;}

fieldset.contactForm input.req:focus, fieldset.contactForm textarea.req:focus,
fieldset.contactForm input.notReq:focus, fieldset.contactForm textarea.notReq:focus 
        {background-color:#FFFFFF;}															
															


fieldset.contactForm input #txtTitle {width:40px;}

fieldset.contactForm .reqLab {
   color: #999;}

#ValidationSummary1 
{
    margin-bottom: 20px;
    font-weight:bold;}

#ValidationSummary1 li 
{
    font-size: 12px;
    color: #F00;
    font-weight:normal;}
    
.valSum {
    margin-bottom: 20px;
    font-weight:bold;
    border: 1px solid #A40000;
    background-color:#FFF9F9;
    padding: 10px;
    color: #282828;}  
      
.valSum li {
    font-size: 12px;
    color: #F00;
    font-weight:normal;} 
       
/* The hint to Hide and Show */
.hint {
   	display: none;
    position: absolute;
    right: -250px;
    width: 200px;
    margin-top: -4px;
    border: 1px solid #c93;
    padding: 10px 12px;
    background: #ffc url(../images/pointer.gif) no-repeat -10px 5px;
}

/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(../images/pointer.gif) left top no-repeat;
}    

.formHint {
    }

.formHint .pointer {
    }

#noPhone a {
    text-decoration: underline;
    font-weight: bold;}

/* -------- End Contact Form -------- */

/* -------- Portfolio -------- */

#portfolioClientName, #portfolioClientName span {
	font-size:21px;
	color: #3777B5;
	margin-top: 20px;
	margin-bottom: 10px;}

#portfolioSubInfo {
	margin-top: 5px;
	border: 1px solid #CCC;
	border-left: none;
	border-right: none;
	padding: 5px 0;
	overflow:hidden;}	
	
#portServiceList ul {}	
	
#portServiceList ul li {
	float:left;
	background:url(../images/portfolio_service_bullet.gif) left no-repeat;
	padding-left: 12px;
	margin-top: 3px;
	font-size:11px;
	margin-left: 15px;}	
	
#portClientComment, #portClientComment span {
	background-color:#4A84BB;
	font-size: 22px;
	color: #FFF;
	padding: 10px;
	margin: 20px 0 10px 0;}	
	
#portDesc {
	width: 420px;
	float:left;
	margin-bottom: 50px;}
	
#portDesc p {
	color: #606060;
	line-height:165%;}
	
#portLinks {
	float:right;
	width: 116px;}	

#portLinks ul li {
	border-bottom: 1px solid #CCC;
	text-align: right;
	background:url(../images/ChevronBlue.gif) left no-repeat;
	padding: 3px 3px 7px 0;}	

#portLinks ul li a {
	color: #4984BB;
	font-size: 11px;}	
/* -------- End Portfolio -------- */
/********************* End Specific formatting *********************/

/********************* General Formatting *********************/

.left {
	float:left;}
	
.clear {
	clear:both;}	
	
#container .moreLink {
	font-weight:bold;}	

#container .moreLink:hover{
	text-decoration:underline;}	

/********************* End General Formatting *********************/