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

Project:		Citrus Cube
Version:		1.7
Last change:	15/01/1 [ Resizing footer]
Author:			Andrew Yee (andrew@citruscube.com)
Primary use:	Web site
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Color codes]

Background:	#fff (white)
Content:	#1b1b1b (dark grey)
Header h1:	#1b1b1b (dark grey) (not specified)
Header h2:	#1b1b1b (dark grey) (not specified)
Header h3:	#1b1b1b (dark grey) (not specified)
Footer:		#fff (white)

a (standard):	#1b1b1b; (dark grey)

Featured project (.sitename): #CC0000;
Featured project (.visitsite): #fff (white)
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Typography]

Body copy:			12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
Unordered lists: 	12px;
Header (h1):		22px;
Header (h2):		14px;
Header (h3):		12px;
Footer (footer_bottom): 9px;

Featured project (.sitename): 20px;
Featured project (.visitsite): 10px;

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

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

body {
	font: 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	color : #1b1b1b;
	background: #fff url("../media/bg.gif") repeat-x;
	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%;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
text-align: center;
}

.main{
width: 900px;
padding-top: 5px;
margin: 0 auto;
text-align: left;
display: table;
}

.container{
width: 900px;
margin: 0 auto;
text-align: left;
/*background-color: green;*/
}

#left { 
	float: left; 
	width: 529px; 
	/*background-color:#00CC33;*/
	padding-right:21px;
	display:block;
	margin-bottom: 60px;
} 

#right {
	float: left; 
	width: 350px; 
	/*background-color: #EBEBEB;*/ 
	display:block;
	margin-bottom: 60px;
}

.push {
height: 50px;
}

/* Headings/lists/general etc */

li{
list-style-image:url(../media/bullet.gif);
font-size:12px;
margin-left:20px;
margin-bottom: 5px;
}

h1 {
font-size: 22px;
padding: 0;
margin: 0;
}

h1.main-logo {
	width: 281px; height: 72px;
	background: url(../media/logo.png);
	text-indent: -9999px;
}

h2 {
font-size: 14px;
margin-bottom: 14px;
}

h3 {
font-size: 12px;
margin-bottom: 10px;
}

p{
margin-top: 3px;
margin-bottom: 7px;
}

a{
color : #1b1b1b;
font-weight: bold;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}



/* hide style for screen readers */
.noDisplay {
	position: absolute;
	left: -1000px;
	width: 490px;
}


/* Footer */

.footer_top {
height: 10px;
background-color: #cccccc;

}

.footer {
height: 330px;
padding-top: 10px;
background-color: #333333;
margin: 0 auto;
text-align: center;
}

.footer_bottom{

height: 20px;
background-color: #333333;
margin: 0 auto;
text-align: center;
font-size: 9px;
color: #cccccc;
}


.footer_bottom .footer_main{
text-align: center;
}

.footer_bottom .footer_main a{
color: #ffffff;
}

.footer_bottom .footer_main a:hover{
text-decoration: underline;
}

.footer_main{
width: 900px;
margin: 0 auto;
text-align: left;
color: #ffffff;
}

#leftfootercontent {
	width: 350px;
	float: left;
}
#middlefootercontent {
	width: 250px;
	float: left;
}

#middlefootercontent a{
	color: #ffffff;
}

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

#rightfootercontent {
	width: 300px;
	float: left;
}

#rightfootercontent a{
	color: #ffffff;
}

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


/* Footer contact form */
/* form */

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

#contact_name {

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

#email_address {

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

#position {

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

#company {

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

#howdidyouhear {

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

#projectinfo {

 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;

}

#budget {

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

}

#project {

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

}

#deadline {

 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;
}

form div input.inputText {
  width: 200px;
  padding: 1px 3px;
  margin: 0 0 0 0;
}

.hideform {
	display: none;
}

/* Header */

.header {
width: 900px;
margin: 0 auto;
text-align: left;
/*background-color: #ffffff;*/
height:212px;

}

#topheader {
/*background-color: #0066FF;*/
height:75px;
}


#bottomheader {
/*background-color: #0066FF;*/
height:88px;
}


#topheader .header_left {
width: 550px;
height:75px;
/*background-color:#009966;*/
float:left;
color: #ffffff;
padding-top: 10px;
}


#bottomheader .header_left {
width: 513px;
height:75px;
/*background-color:#009966;*/
float:left;
color: #ffffff;
padding-left: 37px;
}

#bottomheader .header_left a{
color: #ffffff;

}

.header_right {
width: 340px;
height:75px;
padding: 0 10px 0 0;
/*background-color:#ff0000;*/
float:left;
color: #ffffff;
}

.header_right a{
color: #ffffff;
font-weight: bold;
text-decoration: none;
}

.header_right a:hover{
text-decoration: underline;
}

/* Navigation */

#navigation {
/*background-color: #0000FF;*/
font-size:18px;
width: 890px;
display:table; 
/*display:table-cell; */
/*vertical-align:middle;*/
color: #ffffff;

height:49px; /* needed to vertically center - http://wellstyled.com/css-single-line-vertical-centering.html*/
line-height: 49px; /* needed to vertically center - http://wellstyled.com/css-single-line-vertical-centering.html*/


}

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

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



/* Featured project */

.featured_details{
background-color: #333333;
width: 499px;
height: 67px;
padding: 10px;

}

.featured_details_top{
width: 499px;
height: 30px;
}

.featured_details .sitename{
width: 429px;
font-size: 20px;
color:#CC0000;
padding-bottom:5px;
font-weight: bold;
float: left;

}

.featured_details .visitsite{
width: 70px;
font-size: 10px;
color:#ffffff;
padding-bottom:5px;
font-weight: normal;
float: left;

}

.featured_details .visitsite a{
color:#ffffff;
}

.featured_details .visitsite a:hover{
text-decoration: underline;
}


.featured_details .technology{
width: 499px;
font-size: 12px;
color:#FFFFFF;
padding-bottom:5px;
}

.featured_details .description{
width: 499px;
font-size: 12px;
color:#999999;
padding-bottom:5px;

}

/* About */

#about{
	width: 520px;
	height: 260px;

}

#aboutleft {
width: 245px;
float:left;
padding:10px 0 10px 10px;
height:100px;
}

#aboutright {
width: 25px;
float:left;
padding:10px;
height:100px;
}

/* About boxes */
/* Sidebar about box*/

.aboutbox{
background-color: #DCECF6;
padding: 6px;
margin-top: 5px;
}

/* Rounded About boxes */
.abouttop {
	width: 240px;
}

.aboutmiddle {
	width: 220px;
	padding:10px;
	background-color:#DFEFFF;
	
	
}

.aboutbottom {
	width: 240px;
	height:18px;
	margin-bottom:10px;
	
}

.about_tl{
	width:20px;
	float: left;
	background-color:#FFFFFF;
}

.about_tm{
	width:200px;
	height:18px;
	float: left;
	background-color:#DFEFFF;
}

.about_tr{
	width:20px;
	float: left;
	background-color:#FFFFFF;
}

.about_middle{
	width:240px;
	background-color:#DFEFFF;
}

.about_bl{
	width:20px;
	float: left;
	background-color:#FFFFFF;
}

.about_bm{
	width:200px;
	float: left;
	height:18px;
	background-color:#DFEFFF;
}

.about_br{
	width:20px;
	float: left;
	background-color:#FFFFFF;
}

/*Testminonial*/

.testimonialimage{
	
	margin-left:10px;
	background-color:#ff0000;
	float:right;
	border:4px solid #333333;
	padding:1px;
	background:#ffffff;
	
}
/* Portfolio directory */

.portfoliodirectory{
	width: 500px;
	
}

.portfolioleftimage{
	width: 225px;
	margin-right:10px;
	background-color:#ff0000;
	float:left;
	border:4px solid #333333;
	padding:1px;
	background:#ffffff;
	
}

.portfoliorightimage{
	width: 225px;
	background-color:#ffffff;
	float:left;
	border:4px solid #333333;
	padding:1px;
	background:#ffffff;
}
.portfoliolefttext{
	width: 225px;
	padding:5px;
	margin-right:10px;
	background-color:#FFFFFF;
	float:left;
}

.portfoliorighttext{
	width: 225px;
	padding:5px;
	background-color:#FFFFFF;
	float:left;
}

/* 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;
}

/* Testimonial Grey box - used on testimonial page */

.testimonial_greybox{
	background-color: #EEEEEE;
	padding: 5px;
	margin-bottom:10px;
}

/* Services Grey box - used on testimonial page */

.service_greybox{
	background-color: #EEEEEE;
	padding: 5px;
	margin-bottom:10px;
}

/* Extras - wallpaper */

.wallpaper_border{
	border:4px solid #333333;
	padding:1px;
	margin-right: 10px;
}

/* bordered image*/

.picborder{
	float: left;
	background-color:#ffffff;
	border:4px solid #333333;
	padding:1px;
	background:#ffffff;
	margin-right:5px;
}

/* "read testimonial" text/link */

.readtestimonial{
	
	color:#CCCCCC;
	font-weight:normal;
	font-size:10px;
}

/* Read more >> 'on home page' */

.readmore{
	font-size: 11px;
	font-weight:bold;
}

/* News box */
.newsbox{
	width: 338px;
	padding: 5px;
	display:table;
	margin:0 0 10px 0;
	font-size:11px;
	background-image:url(../media/newsbox-background.gif);
	color: #FFFFFF;
}

.newsbox-heading{
	/*color: #C90066;*/
	color:#FFFFFF;
	font-size:16px;
	font-weight:bold;
	line-height:28px;
	margin:0;
	padding:0;
	
	
}

.newsbox a{
	
	color: #FFFFFF;
	font-weight:bold;
}

/* Portfolio - info box */

.portfolio-info-box{
	background-color: #333333;
	width: 499px;
	/*height: 58px;*/
	height:auto;
	padding: 10px;
	color:#FFFFFF;
	margin-bottom:10px;

}

.portfolio-info-box a{
	
	color:#FFFFFF;

}