/* CSS default style sheet for blubase.co.uk */
/* Author: Andrew Foster - 2005 */

/* Main document stylings */

html, body{ 
	margin: 0; 
	padding:0; 
	text-align:center; 
	background:  url(../images/back_new.jpg) repeat-x;
} 
body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color:#666;
} 

/* Main content div stylings */
#pagewidth{ 
	margin: 5px auto;
	width:600px; 
	text-align:left;  
	border: 5px solid #06c;
	background: #fff;
} 
 
#header{
	position:relative; 
	height:100px; 
	background: url(../images/header.gif); 
	width:100%;
	border-bottom: 5px solid #fff;
}
#wrapper {
	background:  url(../images/wrapper.jpg) repeat-y;
	z-index: 0;
}
#leftcol{
	width:200px; 
	float:left; 
	position:relative; 
	border-right: 5px solid #fff;
	margin-bottom: 10px; 
} 
#maincol{
	float: right; 
	display:inline; 
	position: relative; 
	width:395px;
	height: 100%;
}
#innerwrapper_home {
	background-image: url(../images/towels_50.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	width: 600px;
	height: 100%;
	z-index: 1;
}
#innerwrapper_portfolio {
	background-image: url(../images/zebra_50_50.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	width: 600px;
	height: 100%;
	z-index: 1;
}
#innerwrapper_services {
	background-image: url(../images/bulb_50.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	width: 600px;
	height: 100%;
	z-index: 1;
}
#innerwrapper_about {
	background-image: url(../images/berries_50.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	width: 600px;
	height: 100%;
	z-index: 1;
}
#wrapper p{
	padding-left: 5px;
}
#footer{
	height:20px; 
	clear:both;
	border-top: 5px solid #06c;
	background:  url(../images/footer.gif) no-repeat;
	width: 100%;
} 

/* Div specific Stylings */

/* header image replacement */
h1, h3, h4 {
	margin: 0;
	padding: 0;
}
h1 span, h3 span, h4 span {
	display: none;
}
h3.welcome, h3.about, h3.portfolio, h3.services, h3.side, h3.rwork {
	width: 200px;
	height: 30px;
}
h3.welcome {
	background:  url(../images/welcome.gif) no-repeat;
}
h3.about {
	background:  url(../images/about.gif) no-repeat;
}
h3.portfolio {
	background:  url(../images/portfolio.gif) no-repeat;
}
h3.services {
	background:  url(../images/services.gif) no-repeat;
}
h3.side {
	background:  url(../images/side.gif) no-repeat;
}
h3.rwork {
	background:  url(../images/recent.gif) no-repeat;
}

/* Portfolio Titles */
h4.port_head {
	Margin-bottom: 0px;
	margin-left: 10px;
	margin-right: 10px;
	background-color: #c3d9ff;
}

/* Style Switching */
#style_switcher {
	padding: 10px;
	border-bottom: 3px solid #06c;
	vertical-align:middle;
	background:  url(../images/access.gif) no-repeat bottom;
}  
#style_switcher a img{
	text-decoration: none;
	border: 0;
} 

/* Side Quotes */
div.quality {
	background:  url(../images/tbl_trans.gif) no-repeat;
	/* Fix IE. Hide from IE Mac \*/
	*background: url(../images/tbl.gif) no-repeat;
	/* End */
	width: 200px;
	height: 200px;
} 
div.quality:hover {
	background:  url(../images/tbl.gif) no-repeat;
}
div.design {
	background:  url(../images/frt_trans.gif) no-repeat;
	/* Fix IE. Hide from IE Mac \*/
	*background: url(../images/frt.gif) no-repeat;
	/* End */
	width: 200px;
	height: 200px;
} 
div.design:hover {
	background:  url(../images/frt.gif) no-repeat;
}
div.order {
	background:  url(../images/mce_trans.gif) no-repeat;
	/* Fix IE. Hide from IE Mac \*/
	*background: url(../images//mce.gif) no-repeat;
	/* End */
	width: 200px;
	height: 200px;
} 
div.order:hover {
	background:  url(../images/mce.gif) no-repeat;
}
div.imagination {
	background:  url(../images/ma_trans.gif) no-repeat;
	/* Fix IE. Hide from IE Mac \*/
	*background: url(../images/ma.gif) no-repeat;
	/* End */
	width: 200px;
	height: 200px;
} 
div.imagination:hover {
	background:  url(../images/ma.gif) no-repeat;
}

/* paragraph content */
div.content {
	width: 90%;
	margin: 0px auto 15px auto;
	border: 1px dashed #06c;
	padding: 2px 8px;
	/*margin-bottom: 150px;*/
}
div.content p{
	padding: 2px 9px;
	text-indent: 15px;
	text-align: justify;
}
.content img {
   border : 1px solid #ccc;
   padding : 3px;
   float : left;
   margin : 5px 15px 15px 0;
}
.content img:hover {
	background: #BDF;
}

acronym {
	color: #000;
	cursor: help;
}

/* recent work thumbnails */
#thums  {
    padding : 10px 0 0 15px;
    margin : 0 30px 0 0;
	/* Fix IE. Hide from IE Mac \*/
	*margin-bottom: 20px;
	/* End */
}
#thums img {
   border : 1px solid #ccc;
   padding : 3px;
   float : left;
   margin : 5px 15px 15px 0;
}
#thums img:hover {
	background: #BDF;
}
#thums br {
 clear : both;
}


/* footer specific styling */
.footext {
	padding-top: 2px;
	padding-right: 10px;
	text-align: right;
	font-size: 12px;
} 
.footext a img {
	border: 0;
	vertical-align: middle;
}
 
 
 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
 }
 
.clearfix{display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}


/* Navigation Styling */
#navcontainer {
	width: 600px;
	margin: auto;
}
#navcontainer ul {
	padding-left: 0;
	margin-left: 0;
	background:  url(../images/nav_back.jpg) no-repeat;
	float: left;
	text-align: center;
	width: 100%;
	height: 30px;
	margin-top: 0px;
}

#navcontainer ul li { 
	list-style-type: none;
	width: 25%;
	float: left;
	margin-top: 5px;
}

#navcontainer ul li a {
	padding: 0em 5px;
	color: White;
	text-decoration: none;
}

#navcontainer ul li a:hover{
	border-top: #06C 5px solid;
	color: #FF9900;
}
#navcontainer ul li.active a {
	border-top: #06C 5px solid;
	color: #FF9900;	
}

/* Form Stylings */
form input.submitBtn {
    width : 60px;
    height : 20px;
    background : #f4f4f4 url(../images/btn_send_email.gif) no-repeat;
    outline : none;
}
form input.submitBtn:hover {
    background : #f4f4f4 url(../images/btn_send_email.gif) no-repeat -90px 0;
}
#contactForm {
	width: 80%;
	margin-left: 10px;
	margin-bottom: 70px;
    font-size : 11px;
}
#contactForm input.inp, #contactForm textarea.inp {
    border : 1px solid #ccc;
    width : 230px;
    background : #fcfcfc;
    font : 11px verdana, sans-serif;
    color : #666;
    padding : 3px;
    margin-bottom : 10px;
    outline : none;
}
#contactForm input.inp:hover, #contactForm textarea.inp:hover {
    border : 1px solid #06c;
}
#contactForm input.inp:focus, #contactForm textarea.inp:focus {
    border : 1px solid #06c;
    background : #fff !important;
    color : #5d4e37;
}
span.redText {
	color: #f90;
}

/* Contact Styling */
div#contact {
	height: 170px;;
	margin-left: 10px;
	font-size: 11px;
	
}
div.contact {
  clear: both;
  padding-bottom:0.5em;   
  padding-top:0.5em;
  width: 190px;
  /* Fix IE. Hide from IE Mac \*/
  *width: 185px;
  /* End */   
  float: left;
  text-align: left;
  padding-left: 5px;
}
div.item {
  background-color:inherit;
  font-weight: bold; 
  margin-bottom:0.1em; 
}
div.defn {
  background-color:inherit;
  clear: right;
  float : right;
  width: 15em;
}

hr {
	margin: 10px;
}

/* List Stylings */
ul.list{
	width: 280px;
	font-size: 11px;
/*	list-style-type: none;	
	list-style-image: url(../images/bullet_list.gif);*/
	margin-bottom: 15px; 
	margin-left: 20px;
	padding: 0;
	list-style: none;
}

li.list_1 {
	background-color: #c3d9ff;
	border-top: 1px solid #999; 
	margin: 0;
	text-align: left;
	padding: 0px 0 5px 15px;
	background-image: url(../images/bullet_list.gif);
	background-repeat: no-repeat;
	background-position: top left;
}
li.list_2 {
	background-color: #f0f5ff;
	border-top: 1px solid #999;
	padding: 0px 0 5px 15px;
	background-image: url(../images/bullet_list.gif);
	background-repeat: no-repeat;
	background-position: top left;	 
}