/*
 * WEBFOUNTAIN CSS FILE
 *
 * Web Design by Webfountain
 * email:pete@webfountain.co.uk
 * http://www.webfountain.co.uk
 * steal this if you want - I did
 */

/* COMMON STYLE - DEFAULT TEXT SETTINGS*/

* {
	font-family: Verdana,Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
	font-size: 10pt;
	line-height: 12pt;
	;
}

h1 {
	color: #336699;
	text-decoration:none;
	font-weight: normal;
	font-size: 110%;
	text-transform: none;
}

h2 {
	color: #336699;
	text-decoration:none;
	font-weight: normal;
	font-size: 100%;
	text-transform: none;
}


/* DIV - ID DEFINITIONS AND STYLES */

/* fix to make FIREFOX display same as IE in treatment of borders / padding */
/* * { 
    -moz-box-sizing: border-box; 
} 
*/

#main {
	width:780px;
	background: #ffffff;
	color:#333333;
	text-align: left;
	}
	
#workspace{
	
	background: #ffffff;
	color:#333333;
	text-align: left;
	height: 500px;
	width:780px;
	
	margin-top: -250px;
	margin-left: -390px;
	position: absolute;
	top: 50%;
	left: 50%;
	
	visibility: visible
	}
	

#workspace2{
	
	background: #ffffff;
	color:#333333;
	text-align: left;
	height: 800px;
	width:780px;
	
	margin-top: -400px;
	margin-left: -390px;
	position: absolute;
	top: 50%;
	left: 50%;
	
	visibility: visible
	}



#max_size{
	
	background: #ff0000;
	color:#333333;
	text-align: left;
	height: 560px;
	width:900px;
	margin-top: -280px;
	margin-left: -450px;
	position: absolute;
	top: 50%;
	left: 50%;
	
	visibility: visible
	}
		
	
	
		
#WebFountain_WebDesign {
	position:absolute;
	width:440px;
	height:39px;
	z-index:100000;
	left: 238px;
	top: 16px;
}

#logo{
	
	padding: 0px;
	font-size: 120%;
	color: #666666;
	font-weight: bold;
	background-color: #FFFFFF;
	}


#mouseover_image_spot {
	position:absolute;
	left:402px;
	top:14px;
	width:200px;
	height:90px;
	z-index:9;
	background-color: #cccccc;
	color:#666666;
	border:solid #000000  1px;
	
	}
	
#webdesigner-icon {
	width: 70px;
	height: 70px;
	background-color: #ffffff;
	color:#cccccc;
	position: absolute;
	top: 15px;
	left: 708px;
	z-index: 1;
	}

#webdesign_wandsworth_r1_c1 ,#webdesigner_wandsworth_r1_c2,#joomla_wandsorth_r1_c3,
#square_r2_c1 ,#square_r2_c2,#square_r2_c3,
#square_r3_c1 ,#square_r3_c2,#square_r3_c3 {
	width: 20px;
	height: 20px;
	color: #ffffff;
	border:solid #000000  1px;
	font-size:80%;
	text-align: center;
	position: absolute;
	top: 0px;
	left: 0px;
	
	}
	
#webdesign_wandsworth_r1_c1 {
	
	background-color: #336699;
	}
	
#webdesigner_wandsworth_r1_c2 {
		
	left: 25px;
	background-color: #CCCCCC;
	}
	
#joomla_wandsorth_r1_c3 {

	left: 50px;
	background-color: #3399CC;
	
	}

#square_r2_c1 {
	top: 25px;
	
	background-color: #FFFFFF;
	}
	
#square_r2_c2 {
	top: 25px;
	left: 25px;
	background-color: #000000;
	}
	
#square_r2_c3 {
	top: 25px;
	left: 50px;
	background-color: #FFFFFF;
	}
	
#square_r3_c1 {
	top: 50px;
	
	background-color: #3399CC;
	}
	
#square_r3_c2 {
	top: 50px;
	left: 25px;
	background-color: #CCCCCC;
	}
	
#square_r3_c3 {
	top: 50px;
	left: 50px;
	background-color: #336699;
	}	
	
	
	

	
#title_box1 {
	width: 180px;
	height: 40px;
	color:#cccccc;
	background-color: #ffffff;
	position: absolute;
	top: 51px;
	left: 00px;
	
	background-repeat: no-repeat;
	z-index: 2;
	}
	
		
#title_box2 {
	width: 210px;
	height: 40px;
	background-color: #ffffff;
	color:#cccccc;
	font-size:80%;
	text-align: center;
	position: absolute;
	top: 13px;
	left: 00px;
	z-index: 3;
	}
		
	
#box_1 {
	width: 775px;
	height: 355px;
	background-color: #FFFFFF;
	color:#336699;
	background-position: 0px 0px;
	font-size:100%;
	text-align: left;
	position: absolute;
	top: 137px;
	left: 0px;
	z-index: 77;
	padding-left:5px;
	
	}
	
#details {
	position:absolute;
	left:542px;
	top:130px;
	width:228px;
	height:220px;
	background-color: #FFFFFF;
	color:#336699;
	padding-left: 5px;
}

	
	
	
.sitemap_links {
	text-decoration: none;
	margin-left: 10px;
}

	
#pane{
	width: 780px;
	height: 330px;
	background-color: #FFFFFF;
	color:#666666;
	text-align: left;
	padding: 0;
	position: absolute;
	top: 146px;
	left: 0px;
	font-size: 70%;
	z-index: 2;
	}	
	
#pane a:link,#pane a:visited {
    background-color: #ffffff;
	color: #3399CC;
	text-decoration: none;	
	}

#pane a:hover {
    background-color: #FFFFFF;
	color: #336699;	
	text-decoration: none;	
	}
			
	
#pane_1,#pane_2,#pane_3, #pane_2e,
#portfolio_1,
#portfolio_2_1,#portfolio_2_2,#portfolio_2_4,#portfolio_2_4 ,
#portfolio_3_1,#portfolio_3_2,#portfolio_3_3,#portfolio_3_4 ,#portfolio_3_5,#portfolio_3_6
{
	
	position: absolute;
	top: 0px;
	width: 225px;
	height: 300px;
	background-color: #FFFFFF;
	color:#666666;
	border: solid #cccccc 1px;
	padding:12px;
		
	}
	
#pane_1 , #portfolio_1{

	left: 0px;
	
	}
#pane_2, #pane_2e,#portfolio_2_1,#portfolio_2_2,#portfolio_2_3,#portfolio_2_4{

	left: 264px;
	
	}	

 #pane_2e{
	width: 483px;
	background-image: url(../images/webfountain_emaili.jpg);
	background-repeat: no-repeat;
	background-position: right;
	
	}	

#pane_2e a:link,#pane_2e a:visited {
    background-color: #ffffff;
	color: #3399CC;
	text-decoration: none;	
	}

#pane_2e a:hover {
    background-color: #FFFFFF;
	color: #ff6699;	
	text-decoration: none;	
	}






#pane_1 ul {
	margin-left:20px;
	/* fix to make FIREFOX display same as IE in ULs */
	padding-left:0px;
	white-space:normal;
	display: list-item;
	}
	
#pane_1 ul li{
	list-style-type:square;
	font-size:100%;
	list-style-position: outside;
	padding-top: 5px;
	
}





#pane_2 ul,#pane_2e ul{
    margin-left:0px;
	/* fix to make FIREFOX display same as IE in ULs */
	padding-left:0px;
	white-space:nowrap;
	display: list-item;
}

#pane_2 ul li ,#pane_2e ul li {
	list-style-type:square;
	font-size:85%;
	list-style-position: inside;
	
	
}





	
	
#portfolio_2_1_1,#portfolio_2_1_2,#portfolio_2_1_3,#portfolio_2_1_4,#portfolio_2_1_5,#portfolio_2_1_6
	{
	position: absolute;
	width: 80px;
	height: 80px;
	background-color: #FFFFFF;
	color:#666666;
	border: solid #cccccc 1px;
	top: 218px;
	}
	
#portfolio_2_1_1,#portfolio_2_1_2
	{
	top:15px;
	}	
	
#portfolio_2_1_3,#portfolio_2_1_4
	{
	top:113px;
	}	
	
#portfolio_2_1_5,#portfolio_2_1_6
	{
	top:214px;
	}		
	
#portfolio_2_1_1,#portfolio_2_1_3,#portfolio_2_1_5
	{
	left:32px;
	}	
	

#portfolio_2_1_2 ,#portfolio_2_1_4,#portfolio_2_1_6
	{
	left:134px;
	}	
	
#pane_3 ,#portfolio_3_1,#portfolio_3_2,#portfolio_3_3,#portfolio_3_4 ,#portfolio_3_5,#portfolio_3_6{

	left: 529px;
	
	}	
	
#portfolio_3_2,#portfolio_3_3,#portfolio_3_4 ,#portfolio_3_5,#portfolio_3_6
{
	visibility: hidden;		
	}
	
	
#portfolio_1_screen {
	width:200px;
	height:120px;
	
	}

#portfolio_1_text{
	width:200px;
	height:150px;
	padding-top: 5px;
	}

	
#portfolio{
	width: 780px;
	height: 326px;
	background-color: #FFFFFF;
	color:#666666;
	text-align: left;
	padding: 0;
	position: absolute;
	top: 146px;
	left: 0px;
	font-size: 70%;
	z-index: 2;
	}	
	
#portfolio a:link,#portfolio a:visited {
    background-color: #ffffff;
	color: #3399CC;
	text-decoration: none;	
	}

#portfolio a:hover {
	background-color: #FFFFFF;
	color: #336699;
	text-decoration: underline;
	text-align: center;
	}
			
		
	

	
#portfolio_2 {
	top: 0;
	left: 263px;
	position: absolute;
	z-index:20;
	}

#portfolio_2_screen {
	width:200px;
	height:120px;
	
	}

#portfolio_2_text{
	width:200px;
	height:150px;
	
	padding-top: 5px;
	}

#portfolio_2_1 {
	position: absolute;
	top: 0px;
	left: 264px;
	width: 225px;
	height: 300px;
	border: solid #cccccc 1px;
	background-color: #EEEEEE;
	
	}
	
		
	

#portfolio_3_1,#portfolio_3_2,#portfolio_3_3,#portfolio_3_4 ,#portfolio_3_5,#portfolio_3_6 {
	position: absolute;
	top: 0px;
	left: 529px;
	width: 225px;
	height: 300px;
	border: solid #cccccc 1px;
	visibility: hidden;		
	}
#portfolio_3_1 {
	visibility: visible;		
	}	
	
	
#portfolio_3_1_image,#portfolio_3_2_image,#portfolio_3_3_image,#portfolio_3_4_image ,#portfolio_3_5_image,#portfolio_3_6_image {
	position: absolute;
	top: 9px;
	left: 8px;
	width:198px;
	height:154px;
	border: solid #cccccc 1px;
	padding-left: 16px;
	padding-right: 16px;
	}
	
#portfolio_3_1_text,#portfolio_3_2_text,#portfolio_3_3_text,#portfolio_3_4_text ,#portfolio_3_5_text,#portfolio_3_6_text {
	position: absolute;
	top: 174px;
	left: 8px;
	width:221px;
	height:129px;
	border: solid #cccccc 1px;
	padding: 5px;
	
	}
		
#portfolio_3_1_seo,#portfolio_3_2_seo,#portfolio_3_3_seo,#portfolio_3_4_seo ,#portfolio_3_5_seo,#portfolio_3_6_seo {
	position: absolute;
	top: 9px;
	left: 8px;
	width:221px;
	height:294px;
	border: solid #cccccc 0px;
	padding: 5px;
	
	}	
	
	

#portfolio_3_1 ul ,#portfolio_3_2 ul,#portfolio_3_3 ul,#portfolio_3_4 ul ,#portfolio_3_5 ul,#portfolio_3_6 ul{
	margin-left:20px;
	/* fix to make FIREFOX display same as IE in ULs */
	padding-left:0px;
	white-space:normal;
	display: list-item;
	}
	
#portfolio_3_1 ul li,#portfolio_3_2 ul li,#portfolio_3_3 ul li,#portfolio_3_4 ul li ,#portfolio_3_5 ul li,#portfolio_3_6 ul li{
	list-style-type:square;
	font-size:85%;
	list-style-position: outside;
	
}



	

#prev_1,#next_1{
	position:absolute;
	top:302px;
	width:16px;
	height:16px;
	text-align: center;
	border: solid #cccccc 1px;
	background-color: #FFFFFF;
	padding-bottom:2px;
}

#prev_1{
	left:4px;
}

#next_1{
	left:226px;
}

#prev_1 a:link,#prev_1 a:visited,#next_1 a:link,#next_1 a:visited {
	background-color: #ffffff;
	color: #3399CC;
	text-decoration: none;
	text-align: center;
	font-size: 80%;
	}

#prev_1 a:hover, #next_1 a:hover {
	background-color: #FFFFFF;
	color: #CCCCCC;
	text-decoration: none;
	text-align: center;
	font-size: 80%;
	}
			











#contact{
	width: 778px;
	height: 324px;
	background-color: #FFFFFF;
	color:#666666;
	text-align: left;
	padding: 0;
	position: absolute;
	top: 146px;
	left: 0px;
	font-size: 70%;
	border: solid #cccccc 1px;
	}	




#map {
	background-color: #FFFFFF;
	color:#cccccc;
	position: absolute;
	top: 12px;
	left: 41px;
	text-align: left;
	
	width: 700px;
	
	height: 300px;
	border: solid #336699 1px;
	
	}







#topmenubar {
	background-color: #FFFFFF;
	color:#cccccc;
	position: absolute;
	top: 103px;
	left: 0px;
	text-align: left;
	font-size: 100%;
	width: 775px;
	padding-top: 4px;
	padding-bottom: 0px;
	padding-left: 5px;
	z-index: 4;
	height: 25px;
	border: solid #336699 1px;
	border-left-width: 0px;
	border-right-width: 0px;
	}
	
#topmenubar a:link , #topmenubar a:visited{
	background-color: #FFFFFF;
	color: #3399CC;
	font-size: 90%;
	text-decoration: none;	
	}
	
#topmenubar .linkactive {
	background-color: #FFFFFF;
	color: #666666;
	font-size: 90%;
	text-decoration: none;	
	}	
	
#topmenubar a:hover {
	background-color: #FFFFFF;
	color: #336699;	
	font-size: 90%;
	text-decoration: none;
	}
		
#topmenubar_date {
	position:absolute;
	left:698px;
	top:5px;
	width:80px;
	height:20px;
	z-index:3;
	font-size: 70%;
	text-align: right;
	color: #336699;
	visibility: hidden;
}		
		
.link {
	background-color: #FFFFFF;
	color: #cccccc;
	font-size: 100%;
	text-decoration: none;
}	

.visited {
	background-color: #FFFFFF;
	color: #cccccc;
	font-size: 100%;
	text-decoration: none;
}
.hover {
	background-color: #FFFFFF;
	color: #cccccc;
	font-size: 100%;
	text-decoration: underline;
}

#sitemap {
	width: 773px;
	height: 324px;
	background-color: #FFFFFF;
	color:#336699;
	background-position: 0px 0px;
	font-size:100%;
	text-align: left;
	position: absolute;
	top: 146px;
	left: 0px;
	z-index: 77;
	border: 1px solid #CCCCCC;
	padding-left: 5px;
	
	}

#sitemap a:link, #sitemap a:visited {
	background-color: #FFFFFF;
	color: #3399CC;
	font-size: 100%;
	text-decoration: none;
	
}	

#sitemap a:hover {
	background-color: #FFFFFF;
	color: #cccccc;
	font-size: 100%;
	text-decoration: none;
	
}	


#linkpage {
	width: 776px;
	height: 700px;
	background-color: #FFFFFF;
	color:#336699;
	background-position: 0px 0px;
	font-size:100%;
	text-align: left;
	position: absolute;
	top: 146px;
	left: 0px;
	z-index: 77;
	border: 1px solid #CCCCCC;
	padding-left: 5px;
	
	}

#linkpage a:link, #linkpage a:visited {
	background-color: #FFFFFF;
	color: #3399CC;
	font-size: 100%;
	text-decoration: none;
	
}	

#linkpage a:hover {
	background-color: #FFFFFF;
	color: #cccccc;
	font-size: 100%;
	text-decoration: none;
	
}	









#spacer10{
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 2px;
	font-size: 90%;
	text-decoration: none;
	background-color: #FFFFFF;
	color:#CCCCCC;
	height:10px;
	border-top: 2px;
	border-top-style: solid;
}			
#spacer5{
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 2px;
	text-decoration: none;
	background-color: #FFFFFF;
	color:#CCCCCC;
	height:5px;
	border-top: 0px;
	border-top-style: solid;
}			

#navBarArtist{
	margin: 0 0 0 0;
	background-color: #FFFFFF;
	color:#cccccc;
	border-bottom: 1px solid #ffffff;
	padding-left: 0px;
	border-right-style: solid;
	border-right-width: 2px;
	border-right-color: #A1C07C;
	font-size: 100%;
	float:left;
	width:140px;
	padding-bottom: 40px;
	height: 330px;
	}

#ukwda {
	position:absolute;
	left:0px;
	top:520px;
	width:88px;
	height:31px;
	z-index:99999;
}
	
	
	
	
	
#footer {
	background-color: #FFFFFF;
	color: #6A7FAA;position: absolute;
	top: 486px;
	left: 0px;
	text-align: right;
	font-size: 80%;
	border-top-style: solid;
	border-top-color: #336699;
	width: 780px;
	border-top-width: 1px;
	padding-top: 4px;
	padding-bottom: 4px;
	z-index: 7;
	height: 20px;
	}
	
#footer a:link , #footer a:visited{
	background-color: #FFFFFF;
	color: #3399CC;
	font-size: 100%;
	text-decoration: none;	
	}
#footer a:hover {
	background-color: #FFFFFF;
	color: #CCCCCC;
	text-decoration: none;
	}