@charset "UTF-8";
/* CSS Document */



/* 
------------------------------------------------------------------------------

Author:  			Peter Richman
E-mail:				peter@plugandplaydesign.co.uk
Company: 			Plug and Play Design
Date:				20/01/2008

Version:			1.0
Designed for:		FireFox 2

CSS file:			Design One 

------------------------------------------------------------------------------*/





/* =USUAL SUSPECTS
------------------------------------------------------------------------------*/

body{
font-family:		Verdana, Arial, Helvetica, sans-serif;
font-size:			62.5%;
color:				#444444;
}

img{
border:				none;
}

h1, h2, h3, h4, h5, h6{
font-family:		Verdana, Arial, Helvetica, sans-serif;
}


.centre p strong{
color:				#000;
}


a{
text-decoration:	none;
}

q{
font-style:			italic;
color:				#000;
}

.clear{
clear:				both;
}

strong{
color:				#000;
}

hr{
margin-top:			20px;
margin-bottom:		20px;
margin-left:		17px;
margin-right:		17px;

}


/* HACK for FIREFOX!! - to always display right hand scroll bars in short pages
this prevents the page bouncing left when changing pages */

html { 
overflow: -moz-scrollbars-vertical; 
height: 100%; 
}

/*Hack over*/


p{
font-size:			1.2em;
line-height:		1.8em;
color:				#000;
}


p a, blockquote a{
text-decoration:	underline;	
color:				#F18A43;
}

p a:hover, blockquote a:hover{
text-decoration:	none;
}

a:hover{
text-decoration:	underline;
}

blockquote{
font-size:			1.2em;
line-height:		1.8em;
color:				#000;
margin-left:		20px;
padding-left:       0px;
font-style:			italic;
}
/* =WRAPPER
------------------------------------------------------------------------------*/


.externalWrapper{
background:			url(../images/bgGradient.jpg) top left repeat-x;
position:			absolute;
top:				0px;
left:				0px;
margin:				0px;
padding:            0px;
width:				100%;
}



.wrapper{
width:				758px;
margin-left:		auto;
margin-right:		auto;
background:			#FFF;
padding:            7px 25px 0px 25px;
margin-top:			20px;
}

/* =LAYOUT
------------------------------------------------------------------------------*/


.left{
float:				left;
width:				501px;
margin-bottom:		30px;
position:relative;
display:inline;
}

.index .left
{
	width: 758px;
}
.hometext
{
	float:				left;
	width:				480px;
	display:inline;
	position:relative;
}

.right{
float:				right;
width:				232px;
margin-bottom:		30px;
	display:inline;
	position:relative;
}
.righthome{
float:				right;
width:				232px;

background:			#f18a43;

}
/* =MENU
------------------------------------------------------------------------------*/


.mainMenu{
float:				left;
list-style:			none;
padding:            0px;
width:				758px;
margin:				0px 0px -10px 0px;
background:			url(../images/menuOff.jpg) top left repeat-x;
border-bottom:		20px solid #f18a43;
}




.withSubMenu .mainMenu{
margin:				0px 0px -10px 0px;
}

.mainMenu li{
float:				left;
font-size:			1.4em;
}

.mainMenu li a{
display:			block;
padding:            8px 20px 6px 20px;
color:				#000;
text-decoration:	none;
}

body .mainMenu .selected a{
background:			url(../images/menuOver.jpg) top left repeat-x;
}

body .mainMenu li a:hover{
background:			url(../images/menuOver.jpg) top left repeat-x;
text-decoration:	none;
}

/* =SUB MENU
------------------------------------------------------------------------------*/


.subMenu{
float:				left;
list-style:			none;
position:			relative;
top:				-15px;
left:				0px;
padding:            0px;
width: 500px;
}

* .subMenu{
* top:				-8px;
* left:				-40px;
* margin-bottom:	23px;
}

*html body .subMenu{
_left:				-85px;
}

.subMenu li{
float:				left;
margin:				0px 10px 0px 10px;
}

.subMenu li a{
color:				#FFF;
}




/* =TOP
------------------------------------------------------------------------------*/

.top p{
float:				right;
text-align:			right;
margin-top:			42px;
}

.top h1{
float:				left;
}

.top p a{
color:				#000;
text-decoration:	none;
}

.top p span{
color:				#f18a43;
}

.logo span{
text-indent:        -5000px;
display:			block;
}




/* =BANNER
------------------------------------------------------------------------------*/

.banner{
background-color:	#ababab;
height:				422px;
}

.portfolio .banner{
	height:			auto;
}

/* =TEXT
------------------------------------------------------------------------------*/

h2{
color:				#f18a43;
font-size:			2.3em;
font-weight:		lighter;
}


/* =CONTACT
------------------------------------------------------------------------------*/

.right{
background:			#f18a43;
margin:				0px 0px 0px 25px;
}

.contact{
color:				#FFF;
font-size:			2em;
margin:				10px 0px 0px 15px;
}

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


/* =FORMS
------------------------------------------------------------------------------*/

label{
color:				#FFF;
font-size:			1.3em;
margin:             0px 0px 0px 15px;
}

input{
width:				200px;
margin:				0px 0px 3px 15px;
padding:            0px 0px 0px 0px ;
height:				20px;
}

textarea{
margin:				0px 0px 10px 15px;
}

input, textarea{
background:			#FFF url(../images/inputBoxes.jpg) bottom left repeat-x;
border:				1px solid #FFF;

}

.submit{
margin-top:			10px;
margin-bottom:		12px;
}

/* =FOOTER
------------------------------------------------------------------------------*/


.footer{
float:				left;
}

.footerMenu{
float:				left;
list-style:			none;
border-top:			1px solid #f18a43;
padding:            0px;
margin:				0px;
width:				758px;
}

.footerMenu li{
float:				left;
margin:				3px 10px 0px 10px;
}

.footerMenu li a{
color:				#f18a43;
}



/* =PORTFOLIO CONTENT
------------------------------------------------------------------------------*/

.content{
min-height:         450px;
margin-top:			75px;
}

.banner{
margin-bottom:		20px;
}

.banner .greyBar{
padding:            6px 0px 6px 4px;
color:				#FFF;
display:			block;
}


/* =THUMBS
------------------------------------------------------------------------------*/


.thumbnailContainer{
width:				758px;
margin-bottom:		30px;
}

.thumbnailContainer .thumbnails{
	list-style:			none;
	float:				left;
	padding:            0px;
	
}

.thumbnailContainer .thumbnails li{
	float:				left;
	margin:				10px;
	height:				145px;
}





/* =FORM
------------------------------------------------------------------------------*/

form{
margin:				0px;
padding:            0px;
}



/* =SECURE AREA
------------------------------------------------------------------------------*/

.folder{
width:				150px;
float:				left;
}

* .folder{
* font-size:		1.2em;
* margin-bottom:	20px;
}

.folder a{
background:			url(../images/folder_closed.jpg) top center no-repeat;
height:				20px;
padding-top:        70px;
display:			block;
width:				120px;
text-align:			center;
}


.loginBox{
margin-top:			0px;
}

.loginBox a{
background:			#000;
display:			block;
color:				#FFF;
height:				40px;
padding-top:        20px;
font-size:			1.5em;
padding-left:       20px;
text-decoration:	none;
}





/* =LOGIN
------------------------------------------------------------------------------*/

.loginBox{
width:				630px;
margin-left:		auto;
margin-right:		auto;
margin-top:			56px;
margin-bottom:		20px;
height:				343px;
background:			url(../images/reallyNiceLogin.gif) top left no-repeat;
}

body .loginBox h2{
color:				#000;
font-weight:		lighter;
font-size:			3.2em;
margin:				30px 0px 0px 60px;
padding:            60px 0px 0px 0px;
}

* body .loginBox h2{
* padding-top:      20px;
}

.loginBox .ErrMsgTop
{
	position:absolute;
	top:0px;
	left:100px;
	font-size:			1.4em;
	color:				#ed0909;
	display:block;
}

.loginBox .loginform{
margin-left:		60px;
margin-top:			10px;
width:				420px;
padding-top: 20px;
position:relative;
}

.loginBox label{
font-size:			1.4em;
color:				#000;
margin-left:		100px;
}

.loginBox input{
width:				300px;
height:				20px;
margin-bottom:		15px;
margin-left:		100px;
}

* .loginBox input{
* margin-left:		40px;
}

.loginBox p input{
width:				60px;
float:				right;
height:				20px;
margin:				0px 20px 0px 0px;
}

.loginBox p input:hover{
	cursor:			pointer;
}