/* based on 'By The Pier', by Peter Ong, http://peter.rock.per.sg/ */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */

/* basic elements */

body
{
	color: #fc3;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 17px;
	background: black url(images/black.jpg) no-repeat center top;
	text-align: center;
	margin: 0;
	padding: 0;
}

a:link
{
	color: #cf6;
	font-weight: bold;
	text-decoration: none;
}

a:visited
{
	color: #ffcc00;
	font-weight: bold;
	text-decoration: none;
}

a:hover, a:active
{
	color: #f60;
	text-decoration: none;
	border-bottom: 1px dotted #005e00;
}

#container
{
	background-color: #000000;
	text-align: left;
	margin: 8px auto;
	padding: 0;
	width: 600px;
}

acronym
{
	color: #ffff67;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
	border-width: 0;
}

#intro
{
	background-image: url("images/head.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px auto;
	padding: 0;
	width: 640px;
	height: 420px;
}

#subsequent
{
	background-image: url("images/subsequent.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0;
	padding: 0;
	width: 640px;
	height: 93px;
}

#subsequent h3.pageHeader
{
	background-image: url("images/at-spin2.gif");
	background-repeat: no-repeat;
	background-position: center top;
	margin: 8px 0;
	padding: 0;
	width: 75px;
	height: 77px;
	}

#subsequent h3.pageHeader span { display: none; }

#subspin
{
	background-image: url("images/at-spin2.gif");
	background-repeat: no-repeat;
	background-position: center top;
	margin: 7px auto 0 auto;
	padding: 0;
	width: 75px;
	height: 77px;
	}

#pageHeader
{
	display: none;
	margin: 0;
	padding: 0;
}

#pageHeader h1 span, #pageHeader h2 span { display: none; }

#maincontent
{
	margin: auto;
	padding: 10px auto 10px auto;
	width: 600px;
}

#subcontent
{
	margin: auto;
	padding: 10px auto 10px auto;
	width: 600px;
}

#supportingText { clear: left; }

#graphics, #printing, #internet, #publishing, #clients, #direct, #contact, #sample
{
	background-color: #000000;
	padding: 0 20px 10px 20px;
	clear: both;
}

#greetings, #explanation
{
	background-color: #000000;
	padding: 0 20px 10px 20px;
	clear: both;
}

#tales
{
	background-color: #000000;
	padding: 0 20px 10px 20px;
	clear: both;
}

#maincontent h3
{
	background-image: url("images/enlightenment.gif");
	background-repeat: no-repeat;
	background-position: right 0;
	margin: 10px auto 8px;
	padding: 0;
	width: 600px;
	height: 35px;
}


#maincontent h4
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height: 21px;
	font-weight:bold;
	width: 600px;
}

#subcontent h3
{
	margin: 20px auto 8px;
	padding: 0;
	width: 320px;
	height: 35px;
}

#graphics h3
{
	background-image: url("images/graphics.gif");
	background-repeat: no-repeat;
	background-position: right 0;
	margin: 8px 0;
	padding: 0;
	width: 320px;
	height: 35px;
}

#clients h3
{
	background-image: url("images/clients.gif");
	background-repeat: no-repeat;
	background-position: right 0;
	margin: 8px 0;
	padding: 0;
	width: 320px;
	height: 35px;
}

#direct h3
{
	background-image: url("images/direct.gif");
	background-repeat: no-repeat;
	background-position: right 0;
	margin: 8px 0;
	padding: 0;
	width: 320px;
	height: 35px;
}

#sample h3
{
	background-image: url("images/sample.gif");
	background-repeat: no-repeat;
	background-position: right 0;
	margin: 8px 0;
	padding: 0;
	width: 320px;
	height: 35px;
}

#contact h3
{
	background-image: url("images/contact.gif");
	background-repeat: no-repeat;
	background-position: right 0;
	margin: 8px 0;
	padding: 0;
	width: 320px;
	height: 35px;
}


#tales h3
{
	background-image: url("images/tales.gif");
	background-repeat: no-repeat;
	background-position: center top;
	margin: 8px auto;
	padding: 0;
	width: 320px;
	height: 486px;
}

#printing h3
{
	background-image: url("images/printing.gif");
	background-repeat: no-repeat;
	background-position: right 0;
	margin: 8px 0;
	padding: 0;
	width: 320px;
	height: 35px;
}

#internet h3
{
	background-image: url("images/internet.gif");
	background-repeat: no-repeat;
	background-position: right 0;
	margin: 8px 0;
	padding: 0;
	width: 320px;
	height: 35px;
}

#publishing h3
{
	background-image: url("images/publishing.gif");
	background-repeat: no-repeat;
	background-position: right 0;
	margin: 8px 0;
	padding: 0;
	width: 320px;
	height: 35px;
}

#greetings h3
{
	background-image: url("images/greetings.gif");
	background-repeat: no-repeat;
	background-position: left 0;
	margin: 8px 0;
	padding: 0;
	width: 320px;
	height: 35px;
}

#greetings h4
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	width: 320px;
}

#requirements h3
{
	background-image: url("images/requirements.gif");
	background-repeat: no-repeat;
	background-position: right 0;
	margin: 8px 0;
	padding: 0;
	width: 320px;
	height: 35px;
	float:right;
}

#explanation h3
{
	background-image: url("images/about.gif");
	background-repeat: no-repeat;
	background-position: left;
	margin: 8px 0;
	padding: 0;
	width: 320px;
	height: 35px;
}

.p1
{
	text-align: left;
	margin: 0 auto 0 auto;
	padding: 0 0 8px 15px;
	width: 580px;
}

.p2
{
	text-align: left;
	margin: 0;
	padding: 0 auto 8px 0px;
	width: 320px;
	float: left;
}

#maincontent h3 span, #graphics h3 span, #clients h3 span, #direct h3 span, #sample h3 span, #contact h3 span, #tales h3 span, #printing h3 span, #internet h3 span, #publishing h3 span, #explanation h3 span, #requirements h3 span
{
	display: none;
	margin: 0;
	padding: 0;
}

#subtext
{
	margin: 0;
	padding: 50px 20px 10px 20px;
	width: 600px;
	background-color:#000;
}

#subtext h4
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height: 21px;
	font-weight:bold;
	width: 600px;
	color: #fff;
}

#subtext .p1
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align: left;
	margin: 0 auto 0 auto;
	padding: 0 0 8px 15px;
	width: 580px;
}

#subtext .p2
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-style:italic;
	text-align: left;
	margin: 0 auto 0 auto;
	padding: 0 0 8px 15px;
	width: 580px;
}

#subtext .p3
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-align: left;
	margin: 0 auto 0 auto;
	padding: 0 0 8px 15px;
	width: 580px;
}

#footer
{
	background-image: url("images/base.jpg");
	background-repeat: no-repeat;
	background-position: center bottom;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding-top: 30px;
	padding-bottom: 20px;
	width: 640px;
	clear: both;
}

#footer a:link, #footer a:visited
{
	font-weight: bold;
	margin-top: 0;
	padding-bottom: 50px;
}

#linkList
{
	background-color: #000000;
	width: 210px;
	margin: auto;
	float: right;
}

#linkList h3.us
{
	background-image: url("images/us.jpg");
	position: absolute;
	background-repeat: no-repeat;
	top: 1452px;
	padding: 0 0 0px;
}

#linkList h3.resources
{
	background-image: url("images/greeters.jpg");
	position: absolute;
	background-repeat: no-repeat;
	top: 1738px;
	padding: 0 0 0px;
}

#linkList h3.us span { display: none; }

#linkList h3.resources span { display: none; }


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.buttonmenu{ 
overflow: hidden; 
	margin: 400px auto 0 auto;
	width: 640px;
}

.buttonsubmenu{ 
overflow: hidden; 
	margin: 8px auto 0 auto;
	width: 640px;
	background-color:#000;
}

a.abutton{
background: transparent url('images/button-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 11px Arial;
line-height: 17px;
height: 25px; 
padding-left: 7px; 
text-decoration: none;
}

a.abutton span{
background: transparent url('images/button-right.gif') no-repeat top right;
display: block;
padding: 4px 17px 4px 10px; 
}

a:hover.abutton{ 
background: transparent url('images/b-left.gif') no-repeat top left;
}

a:hover.abutton span{ 
background: transparent url('images/b-right.gif') no-repeat top right;
}

a:link.abutton{
	color: #cf6;
	font-weight: bold;
	text-decoration: none;
}

a:visited.abutton{
	color: #ffcc00;
	font-weight: bold;
	text-decoration: none;
}

a:hover, a:active.abutton{
	color: #f60;
	text-decoration: none;
	border-bottom: 1px dotted #005e00;
}



.cssform p{
width: 450px;
clear: left;
margin: 0;
padding: 5px 0px 8px 0px;
padding-left: 155px; /*width of left column containing the label elements*/
background-color:#000033;
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
padding-left: 10px;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}