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

body {
	font-family:Helvetica, Arial, sans-serif;
	color:#666;
	font-size:12px;
	line-height:15px;
	text-align:left;
	margin: 0px;
}

p {
	padding-right:10px;
}

H1 {
	font-size:20pt;
	font-weight:400;
	font-style:oblique;
	font-family: georgia, Courier, monospace;
	line-height:1.1em;
	color:#666;
	text-align:center;
	margin-top:0px;
}

H2 {
	font-size:14pt;
	font-style:normal;
	color:#333333;
}

A:link {text-decoration: none; color:#666666; border-bottom:1px dotted #666666; margin:5px; line-height:15px;}
A:visited {text-decoration: none ; color:#666666; border-bottom:1px dotted #666666; margin:5px; line-height:15px;}
A:active {text-decoration: none; margin:5px; line-height:15px;}
A:hover {text-decoration: none; color:#E5CE00; border-bottom:1px dotted #E5CE00; margin:5px; line-height:15px;}

.plainA:link {text-decoration: none; border:none;}
.plainA:visited {text-decoration: none; border:none;}
.plainA:active {text-decoration: none; border:none;}
.plainA:hover {text-decoration: none; border:none;}


ul {
	list-style-image:url(../graphic-design-images/bullet.jpg)
}

.submenuText {
	font-family:Helvetica, Arial, sans-serif;
	color:#666;
	font-size:11px;
	text-align:left;
	margin: 0px;
}

.subMenuCategories h1 {
	font-style:normal;
	padding-top:5px;
}

#home.fadeThis {
		position:relative;
		float:left;
		display:block;
		height: 25px;
		width: 70px;
		margin:5px;
		background-image:url(../graphic-design-images/images/btn-home.gif);
	}
	
	#home.fadeThis * {
	  display: none;
	}
	
	#home.fadeThis span.hover {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		height: 25px;
		width: 70px;
		background-image:url(../graphic-design-images/images/btn-homeRO.gif);
	}
	
.centerme {
vertical-align: middle;
}

.background {
	width:100%;
	background-image:url(../graphic-design-images/background.jpg);
	background-repeat:repeat-x;
	border-top:5px solid #363636;
}

.container {
	width:960px;
	margin:0 auto;
	padding:0px;
	text-align: left;
}

.header {
	width:960px;
	height:85px;
	padding:0px;
	margin:0;
	vertical-align:text-bottom;
	background-image:url(../graphic-design-images/piglet-design-logo.png);
	background-position:right;
	background-repeat:no-repeat;
	text-align: left;
}

.header h1 {
	font:"Courier New", Courier, monospace;
	font-size:18px;
	color:#333;
	padding-left:5px;
	text-align:left;
}

.mainContent h1 {
	text-align:left;}

.mainContent {
	width:960px;
	height:400px;
	/* top and bottom then l and r padding */
	padding:30px 0px;
	border:none;
	margin:0;
}

.bodySingleColumn {
	width:33%;
	padding:0;
	border:none;
	margin:0;
	float:left;
}

.bodyDoubleColumn {
	width:66%;
	padding:0;
	border:none;
	margin:0;
	float:left;
}

.bodyTripleColumn {
	width:100%;
	padding:0;
	border:none;
	margin:0;
	float:left;
}

.subMenuCategories {
	width:218px;
	height:150px;
	padding:10px;
	border-left:1px dotted #ffffff;
	margin:0;
	float:left;
	text-align:center;
}

.subMenuBoxes {
	width:208px;
	height:300px;
	padding:15px;
	border-left:1px dotted #ebebeb;
	border-right:1px dotted #ebebeb;
	margin:0;
	float:left;
	text-align:left;
}

.subMenuBoxes h1 {
	font-size:16pt;
	text-align:left;
}

.subMenuBoxes a:link a:visited a:active a:hover { padding-bottom:2px; margin:5px 0 0 0; line-height:1.5em;}

#footer {
	clear:both;
	width:940px;
	height:30px;
	text-align:center;
	padding:10px 10px;
	margin:0;
	border:none;
}

/* Easy Slider */

 /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
			border:none;
            }
    /* // image replacement */
	#content{
		position:relative;
		}

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
	margin:0;
	padding:0;
	list-style:none;
	border:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:600px;
		height:400px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:100px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:600px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../graphic-design-images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../graphic-design-images/btn_next.gif) no-repeat 0 0;	
		}	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #ccc;
		background:#DAF3F8;
		color:#555;
		padding:0 10px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#5DC9E1;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

.stepcarousel{
position: relative; /*leave this value alone*/
border: 5px solid #ebebeb;
overflow: scroll; /*leave this value alone*/
width: 100%; /*Width of Carousel Viewer itself*/
height: 285px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px; /*margin around each panel*/
width: 300px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
border:.1em #ebebeb dotted; 
}

.stepcarousel .panelimage {
	float:left;
	overflow:hidden;
	margin:0px;
	width:100%;
	border-bottom:.1em #ebebeb dotted;
}
.stepcarousel .panelLabel {
	float:left;
	overflow:hidden;
	width:100%;
	padding:3px 0px;
	text-align:center;
	background-color:#ebebeb;
	color:#666;
}