/* general layout */
body
{
	text-align: center;
	font-family: Verdana, Arial, sans-serif;
	background-color: #f3f2ee;
}

div.wraparound
{
	width: 40em;
	margin: 2em auto;
	text-align: left;
	border: 0.5em solid #3f7fbf;
	background-color: #e1e3e2;

}

/* header */

div.header
{
	background-image: url(http://www.spinnerwebs.co.uk/logo_bg.jpg);
	background-position: right;
	background-repeat: repeat;
}

#logo
{
	background-image: url(http://www.spinnerwebs.co.uk/logo_small.jpg);
	background-position: right;
	background-repeat: no-repeat;
	padding: 1em;
}

div.header h1
{
	font-weight: normal;
	font-family: Verdana, Arial, sans-serif;
	letter-spacing: 0.3em;
	font-size: x-large;
	display: block;
}

div.header h2
{
	font-size: large;
	font-weight: normal;
	font-style: italic;
	font-family: "Garamond", "Times New Roman", serif;
	letter-spacing: 0.25em;
	color: #3f7fbf;
}

div.header a:link, div.header a:visited, div.header a:hover, div.header a:active
{
	text-decoration: none;
	background-image: none;
	border-bottom: none;

}

.cone
{
	color: #3f7fbf;

}

.ctwo
{
	color: #BF3F3F;
}
/* navigation bar */

div.nav
{
	background-color: #FFFFFF;
	font-family: Tahoma, Verdana, sans-serif;
	text-align: center;
	border-bottom: 2px solid #3f7fbf;
	border-top: 2px solid #3f7fbf;
	background-image: url(http://www.spinnerwebs.co.uk/hbg.jpg);
	background-repeat: repeat-x;
	background-position: top;
	font-size: small;
	
}
div.nav a
{
	display: inline;
	color: #3f7fbf;
	font-weight: bold;
	text-decoration: none;
	padding: 0 0.3em;
	margin: 0;
	border: 1px none #3F7FBF;
	border-right: 1px solid #3F7FBF;
	border-left: 1px solid #3F7FBF;

}
div.nav a:link
{
	border-bottom: 0.5em none #3f7fbf;
}

div.nav a:visited
{
	text-decoration: none;
	border-bottom: 0.5em none #3f7fbf;
}

div.nav a:hover
{
	border-bottom: 0.5em none #3f7fbf;
	background-image: url(http://www.spinnerwebs.co.uk/bbg.jpg);
	background-repeat: repeat-x;
	background-position: top;
	border-right: 1px solid #3F7FBF;
	border-left: 1px solid #3F7FBF;
}
a.selected:link, a.selected:visited, a.selected:hover, a.selected:active 
{
	background-image: url(http://www.spinnerwebs.co.uk/bbg.jpg);
	background-repeat: repeat-x;
	background-position: top;
}
div.nav a:active
{
	text-decoration: none;
	border-bottom: 0.5em none #3f7fbf;
}

/* content */

div.content
{
	font-size: small;
	line-height: 200%;
	text-align: justify;
	padding: 0 1em 0 1em;
	color: #000000;
	border-bottom: 2px dotted #BF7F3F;
	background-image: url(http://www.spinnerwebs.co.uk/sw_pic_bg.jpg);
	background-position: top;
	background-repeat: no-repeat;
	background-color: #f3f2ee;
}

div.title
{
	padding: 0 1em 0 1em;
	border-bottom: 2px dotted #BF7F3F;
	border-top: 1px solid white;
	background-color: #e1e3e2;
}

div.title h2
{
	font-weight: bold;
	font-size: medium;
	font-family: Verdana, Arial, sans-serif;
	color: #BF3F3F;
	text-align: center;
	letter-spacing: 0.05em;
}


h3
{	
	font-weight: bold;
	font-size: small;
	color: #BF3F3F;	
	border-top: 1px solid #3f7fbf;
	border-left: 1px solid #3f7fbf;
	border-right: 1px solid #3f7fbf;
	border-bottom: 1px solid #3f7fbf;
	background-color: #EDF2F8;
	background-repeat: no-repeat;
	background-position: right;
	padding: 0.1em 0.5em;
}

h4
{
	font-size: small;
	font-weight: normal;
	color: #BF3F3F;
}

em
{
	font-weight: normal;
	letter-spacing: 0.1em;
}

ul
{
	list-style-type: square;
	color: #BF7F3F;
}

li
{
	color: #000000;
}

address
{
	font-style: normal;
	display: inline;
}

div.content a:link
{
	color: #3f7fbf;
	text-decoration: none;
	border-bottom: 1px dashed #3f7fbf;
	padding: 1px;
	border-left: 1px dashed #FFFFFF;
	border-right: 1px dashed #FFFFFF;
	border-top: 1px dashed #FFFFFF;
}
div.content a:visited
{
	color: #3f7fbf;
	text-decoration: none;
	border-bottom: 1px dashed #3f7fbf;
	padding: 1px;
	border-left: 1px dashed #FFFFFF;
	border-right: 1px dashed #FFFFFF;
	border-top: 1px dashed #FFFFFF;
}
div.content a:hover
{
	background-image: url(http://www.spinnerwebs.co.uk/hbg.jpg);
	background-repeat: repeat-x;
	background-position: top;
	border-bottom: 1px solid #3f7fbf;
	padding: 1px;
	border-left: 1px dashed #3f7fbf;
	border-right: 1px dashed #3f7fbf;
	border-top: 1px dashed #3f7fbf;
}
div.content a:active
{
	background-image: url(http://www.spinnerwebs.co.uk/hbg.jpg);
	background-repeat: repeat-x;
	background-position: top;
	border-bottom: 1px solid #3f7fbf;
	padding: 1px;
	border-left: 1px dashed #3f7fbf;
	border-right: 1px dashed #3f7fbf;
	border-top: 1px dashed #3f7fbf;
}

/* pictures */

div.picture, div.picturesum
{
	float: right;
	border: 1px dashed #3f7fbf;
	margin: 0 0 0 1em;
	padding: 1em;
	font-size: x-small;
	text-align: center;
	background-color: #ffffff;
}
div.picturesum
{
	border-top: none;
	border-right: none;
	border-bottom: 1px dashed #3f7fbf;
	border-left: 1px dashed #3f7fbf;
}
div.picture img, div.picturesum img
{
	border: 1px solid #BF7F3F;
}
div.picture p
{
	margin: 0;
	text-align: center;
}

/* portfolio */

div.portfolio
{
	border: 1px solid #3f7fbf;
	padding: 1em 1em 1em 1em;
	margin: 0 0 1em 0;
	background-color: #f3f2ee;
}

div.portfolio img
{
	float: right;
	width: 150px;
	margin-left: 1em;
	padding: 0.3em;
	border: 1px solid #BF3F3F;
	background-color: #ffffff;
}

div.portfolio h3
{
	margin-top: 0;
}

/* site examples */

div.thumbnail
{
	border: 1px solid #3f7fbf;
	padding: 1em 1em 1em 1em;
	margin: 0 1em 1em 0;
	width: 160px;
	text-align: center;
	float: left;
}

div.thumbnail img
{
	border: 1px solid #BF7F3F;
	padding: 2px;
}

br.clearline
{
	clear: both;
}

/* site detailed description */

/* portfolio form */

form.portfolio, form.portfolio fieldset
{
	border: none;
	padding: 0;
}

form.portfolio select, input
{
	font-family: Verdana, Arial, sans-serif;
	border: 1px solid #3f7fbf;
	background-color: #ffffff;
}

/* contact form */

form.contact label
{
	margin-left: 0;
	float: left;
	text-align: right;
	width: 7em;
}

form.contact input, form.contact textarea
{
	padding: 1px;
	margin: 0 0 0 1em;
	border: 1px solid #3f7fbf;
	font-family: Verdana, Arial, sans-serif;
	font-size: small;
}

form.contact input
{
	width: 12em;
}

form.contact textarea
{
	width: 19.416em;
}

form.contact div
{
	margin-bottom: 1em;
	clear: left;
	text-align: left;
}

form.contact input.button
{
	width: 7.43em;
	border: 1px solid #3f7fbf;
	background-color: #FFFFFF;
	margin-left: 8em;
	color: #3f7fbf;
	font-weight: bold;
}

.error
{
	border: 1px solid #BF3F3F;
}

.texterror
{
	color: #BF3F3F;
}

/* footer */

div.footer
{
	clear: both;
	font-family: "Tahoma", "Trebuchet MS", "Verdana", sans-serif;
	font-size: x-small;
	text-align: center;
	color: #3f7fbf;
	padding: 1em;
	background-image: url(http://www.spinnerwebs.co.uk/mbg.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	background-color: #f3f2ee;
}
div.featuredwebsite
{
	padding: 0 1em 0 1em;
	font-size: small;
	text-align: justify;
	line-height: 200%;
}

div.footer a:link
{
	color: #3f7fbf;
	text-decoration: none;
	border-bottom: 1px dashed #3f7fbf;
}
div.footer a:visited
{
	color: #3f7fbf;
	text-decoration: none;
	border-bottom: 1px dashed #3f7fbf;
}
div.footer a:hover
{
	background-image: url(http://www.spinnerwebs.co.uk/hbg.jpg);
	background-repeat: repeat-x;
	background-position: top;
	border-bottom: 1px solid #3f7fbf;
}
div.footer a:active
{
	background-image: url(http://www.spinnerwebs.co.uk/hbg.jpg);
	background-repeat: repeat-x;
	background-position: top;
	border-bottom: 1px solid #3f7fbf;
}

/* flowchart */

ul.process, ul.content, ul.design
{
	padding: 0 1em;
	text-align: center;
	list-style-type: none;
	margin: 0;
}
ul.process
{
	clear: both;
}
ul.content
{
	width: 47%;
	padding-left: 0;
}
ul.design
{
	width: 47%;
	padding-right: 0;
}
ul.content
{
	float: right;
}
ul.process li, ul.content li, ul.design li
{
	padding-bottom: 20px;
	background-image: url("downarrow.jpg");
	background-repeat: no-repeat;
	background-position: 50% 100%;

}
ul.process li.split
{

	background-image: url("splitarrow.jpg");
	background-repeat: no-repeat;
	background-position: 50% 100%;
}
ul.process li.endprocess
{
	background-image: none;
}
ul.content li.endcontent
{
	background-image: url("downleftarrow.jpg");
	background-repeat: no-repeat;
	background-position: 50% 100%;
}
ul.design li.enddesign
{
	background-image: url("downrightarrow.jpg");
	background-repeat: no-repeat;
	background-position: 50% 100%;
}
li span
{
	display: block;
	border: 1px solid #3f7fbf;
	padding: 0.5em;
	margin: 0.5em;
	text-align: center;
}
li.listtitle
{
	font-weight: bold;
}
li.listtitle span
{
	padding: 0.5em;
}

/* portfolio website box */

div.portfoliobox
{
	background-color: #EDF2F8;
	border-top: 1px solid #3f7fbf;
	border-left: 1px solid #3f7fbf;
	border-right: 1px solid #3f7fbf;
	border-bottom: 1px solid #3f7fbf;
	margin-top:1em;

}

div.portfoliobox h3
{
	border: none;
	margin: 0.5em;
}

div.portfoliobox p
{
	margin: 1em;
}

div.portfoliobox h3 span
{
	font-weight: normal;
	color: #000000;
}

table
{
	width: 75%;
	border: 1px solid #3f7fbf;
	margin: 2em auto;
	border-collapse: collapse;
}
td, th
{
	padding: 0.5em;
	border: 1px dashed #3f7fbf;
}

table.picasa
{
	width: 75%;
	text-align: center;
	padding: 5%;
}
table.picasa a:link, table.picasa a:visited, table.picasa a:hover, table.picasa a:active
{
	border: none;
	background-image: none;
	font-size: small;
}
table.picasa a:hover
{
	text-decoration: underline;
}
table.picasa td.thumbnail
{
	text-align:center;
	background: url(http://picasaweb.google.co.uk/s/c/transparent_album_background.gif) no-repeat center;
	padding: 1%;
}
table.picasa td.thumbnail a:link, table.picasa td.thumbnail a:visited, table.picasa td.thumbnail a:hover, table.picasa td.thumbnail a:active
{
	border: none;
	background-image: none;
}