/* =================================*
 *		     css styles default
 *     www.circularcreation.com
 *			media:screen
 * =================================*/ 

* {
	margin: 0; padding: 0;
} 

body {
	background-color: 	rgb(100%,100%,100%);	
	color: 				black;
	font-family: 		Lucida Grand, Arial, Verdana, sans-serif;
	font-size:			14px; 	
}
#stylesheets{
	position: 			absolute; left: 35px; top: 20px; 
	z-index:			100;
}

a img {
	border:				none;
}
/* =================================*
 *		  titles
 * =================================*/

#title {
	position: 			absolute; left: 39px; top: 49px; 
	z-index:			70;
}

/* ART */
#art {
	background-image: 	url(../image/title/art.gif);
	width:				67px;
	height:				400px;
}

/* philosophic counseling */
#phil {
	background-image: 	url(../image/title/philosophicCounseling.gif);
	width:				67px;
	height:				400px;
}
/* portfolio */
#port {
	background-image: 	url(../image/title/portfolio.gif);
	width:				67px;
	height:				400px;
}
/* about */
#a {
	background-image: 	url(../image/title/whatwedo.gif);
	width:				67px;
	height:				400px;
}
/* illustration */
#i {
	background-image: 	url(../image/title/illustration.gif);
	width:				67px;
	height:				400px;
}
/* photography */
#p {
	background-image: 	url(../image/title/photography.gif);
	width:				67px;
	height:				400px;
}
/* designprint */
#d {
	background-image: 	url(../image/title/designprint.gif);
	width:				67px;
	height:				400px;
}
/* web */
#b {
	background-image: 	url(../image/title/web.gif);
	width:				67px;
	height:				400px;
}
/* video */
#v {
	background-image: 	url(../image/title/video.gif);
	width:				67px;
	height:				400px;
}
/* consult */
#c {
	background-image: 	url(../image/title/consulting.gif);
	width:				67px;
	height:				400px;
}
/* contact */
#o {
	background-image: 	url(../image/title/contact.gif);
	width:				67px;
	height:				400px;
}
#ww {
	background-image: 	url(../image/title/theSynergy.gif);
	width:				67px;
	height:				400px;
}
/* =================================*
 *		  picture elements
 * =================================*/
#element1 {
	position: 			absolute; left: 8px; top: 215px; 
	z-index:			50;
	width:				911px;
	height:				100px;
	background-image: 	url(../image/pix/grnpx2.gif);
	background-repeat:	repeat;
}
#element2 {
	position: 			absolute; left: 35px; top: 40px; 
	z-index:			50;
	width:				100px;
	height:				450px;
	background-image: 	url( ../image/pix/grnpx2.gif);
	background-repeat:	repeat;
}
#element3 {
	position: 			absolute; left: 23px; top: 77px; 
	z-index:			30;
	width:				875px;
	height:				385px;
	background-image: 	url( ../image/pix/grnpx.gif);
	background-repeat:	repeat;
}
#scroll1 {
	position: 			absolute; left: 135px; top: 0px; 
	z-index:			50;
	width:				844px;
	height:				548px;
	background-image: 	url( ../image/photo/parchmentScroll1.gif);
}
#scroll2 {
	position: 			absolute; left: 135px; top: 0px; 
	z-index:			50;
	width:				844px;
	height:				548px;
	background-image: 	url( ../image/photo/parchmentScroll2.gif);
}
#scroll3 {
	position: 			absolute; left: 135px; top: 0px; 
	z-index:			50;
	width:				844px;
	height:				548px;
	background-image: 	url( ../image/photo/parchmentScroll3.gif);
}
#scroll4 {
	position: 			absolute; left: 135px; top: 0px; 
	z-index:			50;
	width:				844px;
	height:				548px;
	background-image: 	url( ../image/photo/parchmentScroll4.gif);
}
.thumb{
	z-index:				90; 
}
.thumb a{
	border-style: 		solid; 
	border-width:		2px;
	border-color:		rgb(0%,20%,0%);	
}
.thumb a:hover{
	border-style: 		solid; 
	border-width:		2px;
	border-color:		rgb(0%,90%,0%);	
}

.thumb3{
	z-index:				90; 
	text-decoration:		none;
	position: absolute; left: -82px;top: -5px;
	border-style: 		solid; 
	border-width:		1px 1px 1px 1px;
	border-color:		rgb(50%,100%,50%);	
}
.thumb4{
	z-index:				90; 
	text-decoration:		none;
	position: absolute; left: -465px; top: -10px;
	border-style: 		solid; 
	border-width:		1px 1px 1px 1px;
	border-color:		rgb(50%,100%,50%);	
}
.thumb2{
	z-index:				90; 
	text-decoration:		none;
	position: absolute; left: -82px;
	border-style: 		solid; 
	border-width:		1px 1px 1px 1px;
	border-color:		rgb(50%,100%,50%);	
}

#blackback {
	position: 			absolute; left: 200px; top: 53px; 
	height: 			500px;
	width: 				600px;
	z-index:			55;
	background-color: 	rgb(0%,0%,0%);	
}

#blackback2 {
	position: 			absolute; left: 0px; top: 0px; 
	height: 			1000px;
	width: 				1000px;
	background-color: 	rgb(0%,0%,0%);	
}

#aside {
	color:				rgb(50%,50%,50%);
	position: 			absolute; left: 35px; top: 500px; 
	width:				100px;
	font-size: 			70%;
	z-index:			70;
}
#footer{
	position: 			absolute; left: 50px; top: 500px; 

}

#picture {
	position: 			absolute; left: 200px; top: 53px; 
	z-index:			60;

}
/* #2 is for horizontal pictures */
#picture2 {
	position: 			absolute; left: 200px; top: 15px; 
	z-index:			60;
}

#pictureCover {
	position: 			absolute; left: 200px; top: 53px; 
	background-image: 	url(../image/pix/grnpx.gif);
	z-index:			70;
	height: 			500px;
	width: 				600px;
}

#pictureCover2 {
	position: 			absolute; left: 200px; top: 15px; 
	background-image: 	url(../image/pix/grnpx.gif);
	z-index:			70;
	height: 			600px;
	width: 				477px;
}

#movie {
	position: absolute; left: 335px; top: 180px;
	z-index:			80;	
	border-style: 		solid; 
	padding:			3px;
	border-width:		1px;
	border-color:		rgb(50%,50%,50%);
}

#white{
	font-size:			60%;
	color:				white;
	position: 			absolute;  top: 700px;
}

#stat{
	position:			absolute; top: 700px;
}

.hl a {
		color:				black;
		background: 		rgb(50%,100%,50%);
		text-decoration:	none;
}
.hl a:hover {
		background: 	rgb(80%,100%,80%);
			text-decoration:	none;
}

H2{
	font-size:	160%;
}
H3{
	font-size:	140%;
}
H4{
	font-size:	120%;
}
H5{
	font-size:	110%;
}
/* =================================*
 *		     text boxes 
 * =================================*/
 
#text {
	position: 			absolute; left: 780px; top: 130px; 
	z-index:			75;
}
#text2 {
	position: 			absolute; left: 654px; top: 130px; 
	z-index:			75;
}
#text3 {
	position: 			absolute; left: 273px; top: 77px; 
	z-index:			70;
}
#text4 {
	position: 			absolute; left: 210px; top: 40px; 
	z-index:			75;
}
#text5 {
	position: 			absolute; left: 525px; top: 75px; 
	z-index:			75;
}
#textTop {
	position: 			relative; right: 30px; bottom: 15px; 
}
#textBox {
	font: 				bold 80% Arial, Verdana, sans-serif; 
	width:				149px;
	line-height:		20px;
	padding:			0px 30px 0px 30px;
	background-image:	url(../image/SQ/textMiddle.png);
	background-repeat:	repeat-y;
	z-index:			75;
}

#textBox2 {
	font:				bold 80% Arial, Verdana, sans-serif;
	width:				400px;
	line-height:		15px;
	padding:			0px 30px 0px 30px;
	background-image:	url(../image/SQ/textMiddle2.png);
	background-repeat:	repeat-y;
	z-index:			75;
}

#textBox4 {
	font:				bold 80% Arial, Verdana, sans-serif;
	width:				300px;
	line-height:		15px;
	padding:			0px 30px 0px 30px;
	background-image:	url(../image/SQ/textMiddle4.png);
	background-repeat:	repeat-y;
	z-index:			60;
}
#textBottom {
	position: 			relative; right: 30px; top: 18px; 
}

/* =================================*
 *		       button
 * =================================*/
 #buttron {
	width:				50px;
	height:				20px;
}
 #button a{
	position:			relative; top:-2px;
 	padding: 			4px 10px 4px 7px; 
	background-image:	url(../image/SQ/button.png);
	background-repeat:	no-repeat;
  	font-size: 			9px;
 	text-decoration:	none;
}
#button a:hover  {
 	text-decoration:	none; 
	background-image:	url(../image/SQ/buttonOver.png);
}

/* =================================*
 *		  Logo navigation
 * =================================*/ 

#logo2 {
	position: 			absolute; left: 105px; top: 215px; 
	z-index:			91;
	width:				93px;
	height:				99px;
	border:				0pt;
	background-image: 	url( ../image/element/CircularLogoGreen.png);
	background-repeat:	repeat;

}
#logo {
	position: 			absolute; left: 210px; top: 215px; 
	z-index:			91;
	width:				93px;
	height:				99px;
	border:				0pt;
	background-image: 	url( ../image/element/CircularLogoGreen.png);
	background-repeat:	repeat;

}
#pc{
	position: 			absolute; left: 217px; top: 215px; 
	z-index:			91;
	width:				93px;
	height:				93px;
	border:				0pt;
	background-image: 	url(../image/element/CircularLogoPC2.png);
}
/* =================================*
 *		  vertical navigation
 * =================================*/ 

#navbar {
	position: 			absolute; left: 209px; top: 314px; 
	width:				93px;
	z-index:			90;
}
#navbar a {
	display: 			block; 
	font: 				bold 80% Arial, Verdana, sans-serif; 
	color: 				rgb(0%,0%,0%); 
	text-decoration: 	none; 
	padding: 			5px 0px 5px 10px; 
	border-style: 		solid; 
	border-width:		1px 0px 0px 9px;
	border-color:		rgb(80%,90%,80%);	
}
#navbar a#current {
	background: 		rgb(50%,100%,50%);
	color:				black;
	position: 			relative; right: 29px;  
	width:				103px;
	border-style: 		solid; 
	border-width:		0px 0px 0px 9px;
	border-color:		rgb(0%,0%,0%);	
}
#navbar a#current2 {
	background: 		rgb(50%,100%,50%);
	color:				black;
	position: 			relative; right: 29px;  
	width:				103px;
	border-style: 		solid; 
	border-width:		3px 3px 3px 9px;
	border-color:		rgb(0%,0%,0%);	
}
#navbar a:hover  {
	border-style: 		solid; 
	border-width:		1px 0px 0px 9px;
	background-image: 	url(../image/pix/grnback.gif);
}
#navbar a:active  {
	background-color: rgb(65%,100%,65%); 
}

/* =================================*
 *		  vertical navigation 2
 * =================================*/ 

#navbar2 {
	position: 			absolute; left: 210px; top: 314px; 
	width:				93px;
	z-index:			90;
}

#navbar2 a {
	display: 			block; 
	font: 				bold 80% Arial, Verdana, sans-serif; 
	color: 				rgb(80%,90%,80%);
	text-decoration: 	none; 
	padding: 			5px 0px 5px 10px; 
	border-style: 		solid; 
	border-width:		1px 0px 0px 9px;
	border-color:		rgb(80%,90%,80%);	
}

#navbar2 a#current {
	background: 		rgb(50%,100%,50%);
	color:				black;
	position: 			relative; right: 29px;  
	width:				103px;
	border-style: 		solid; 
	border-width:		0px 0px 0px 9px;
	border-color:		rgb(0%,0%,0%);	
}
#navbar2 a#current2 {
	background: 		rgb(50%,100%,50%);
	color:				black;
	position: 			relative; right: 29px;  
	width:				103px;
	border-style: 		solid; 
	border-width:		3px 3px 3px 9px;
	border-color:		rgb(0%,0%,0%);	
}

#navbar2 a:hover  {
	border-style: 		solid; 
	border-width:		1px 0px 0px 9px;
	background-image: 	url(../image/pix/grnback.gif);
}
	
#navbar2 a:active  {
	background-color: rgb(65%,100%,65%); 
}

/* =================================*
 *		  Philosophic Consulting navigation
 * =================================*/ 

#navbarPC {
	position: 			absolute; left: 200px; top: 55px; 
	z-index:			100;
}
#navbarPC a {
	font: 				bold 80% Arial, Verdana, sans-serif; 
	color: 				rgb(0%,00%,0%); 
	text-decoration: 	none; 
	padding: 			5px 0px 5px 10px; 
}
#navbarPC a#current {
	background: 		rgb(50%,100%,50%);
	color:				black;
	position: 			relative; right: 29px;  
	width:				103px;
	background-color: rgb(65%,100%,65%); 

}
#navbarPC a:active  {
	background-color: rgb(65%,100%,65%); 
	border-style: 		solid; 
	border-width:		3px 3px 3px 9px;
	border-color:		rgb(0%,0%,0%);	
}

/* =================================*
 *	   	  link styles
 * =================================*/ 
 
 .expand1 {
 
 letter-spacing: 1px;
 }

.expand2 {
 
 letter-spacing: 2px;
 }


div#menu {
	position: 	absolute; left: 0px; top: 15px; 
	z-index:	80;
} 

a {
	text-decoration: none;
	color: rgb(0%,30%,0%);
	}

a:visited {
	color: rgb(0%,50%,0%);
}

a:active {
	color: red;
}

a:hover {
	text-decoration: underline;
	color: blue
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
li {
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav a {
	font-weight: bold;
	color: black;
}

#nav a {
	text-decoration: none;
}
strong{
	font-weight: bold;
	color:		green;
}