/*
Theme Name: Wolf Web Pa
Theme URI: http://www.wolfwebpa.com
Description: Web-design, hosting, and domain specialists
Author: Ryan Davis, William Wolf
Author URI: http://wolfwebpa.com
Version: 1.1

General comments/License Statement if any.

*/

/* Main attributes */
* li {
position:relative;
text-align:left;
}
*{
	margin: 0;
	padding: 0;
	}
	/* fixes ugly border on random images 12/7/09 RD */
* img {
	border:0px;
	}
body{

	text-align: center;
	background-image: url('images/background.png');
	background-repeat: repeat-x;
	background-color: #333;
	height:100%;
	width:100%;
	min-width: 952px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;

	}

/* text information */

#logo h1 {
padding: 0;
display: inline;}

h1,h2,h3{
	text-align:left;
	padding:0px 5px 5px 0px;
	}
h1{
	font-size: 125%;
	color: #FFF;
	}
h2 {
	font-size: 115%;
	}
h3{
	font-size: 100%;
	}

p 	{
	text-align:left;
	}
/* Services Area at the top */

#servicesWrapper{
	width:100%;
	position:relative;
	background: url ('topleft.png') no-repeat;
	background-position: 0 0;
	}

#servicesContainer {
	height: 230px;
	width: 880px;
	font-size: 100%;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	background-image: url ('topleft.png') no-repeat;
	background-position: 0 0;
}

#services{
	position:relative;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	background-color:#000;
	}

#services h2 {
	color:#FFF;
	text-align:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 120%;
	padding-bottom: 10px;
	}
#services p{
	color:#FFF;
	text-align:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 85%;
	}

.conheight {
	height: 180px;
	}

.splitbox {
	width:250px;
	float:left;
	margin-right:5px;
	padding-right: 5px;
	padding-top:10px;
	color:#fff
}

.splitbox h1 p {
	color: #FFF;
	text-align: left;
	}
.servicebox {
	width:290px;
	float:left;
	}
.servicebox h1 p {
	color: #FFF;
	text-align: left;
	}

/* promotion area */
.promotion {
	width: 100%;
	z-index: 3000;
	}
/* header with pointer navigation */

#header {

	position:relative;
	text-align:center;
	width: 950px;
	border-right: 14px solid #000;
	border-left: 14px solid #000;
	border-bottom: 14px solid #000;
	background-color:#000;
	}

.toppoint {
    position: relative;
	padding:10px 0px 0px 25px;
	overflow:auto;
	margin-top:auto;
	margin-bottom: auto;
	width:100%;
	z-index: 4000;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	}
/* Submenu Links */
#pointermenu{
	float:left;
	display:inline;
	text-align:center;
	position:relative;
	}

#pointermenu ul{
	margin: 0;
	margin-left: 0px; /*menu offset from left edge of window*/
	float: left;
	padding-left: 4px;
	font: bold 10px Verdana;
	background-color: #000;
	}

* html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
	margin-bottom: 1em;
	margin-left: 0px; /*menu offset from left edge of window in IE*/
	}

#pointermenu ul li{
	display: inline;
	}


#pointermenu ul li a{
	float: left;
	color: #FFF;
	font-weight: bold;
	padding: 2px 11px 7px 7px;
	text-decoration: none;
	}




#pointermenu ul li a:visited{
	color: #FFF;
	}


#pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/
	color: #0084c9;
	background-color: #000;
	}

#pointermenu ul li a#rightcorner{
	padding-right: 0;
	padding-left: 2px;
	}


#services a:link {color:#FFF; text-decoration: underline;}      /* unvisited link */
#services a:visited {color:#FFF; text-decoration: underline;}  /* visited link */
#services a:hover {color:#BBB; text-decoration: underline;}  /* mouse over link */
#services a:active {color:#0000FF; text-decoration: none;}  /* selected link */

 a:link {color:#003366; text-decoration: underline;}      /* unvisited link */
 a:visited {color:#003366; text-decoration: underline;}  /* visited link */
 a:hover {color:#3333FF; text-decoration: underline;}  /* mouse over link */
 a:active {color:#0000FF; text-decoration: none;}  /* selected link */

#footer a:link {color:#FFF; text-decoration: underline;}      /* unvisited link */
#footer a:visited {color:#FFF; text-decoration: underline;}  /* visited link */
#footer a:hover {color:#BBB; text-decoration: underline;}  /* mouse over link */
#footer a:active {color:#0000FF; text-decoration: none;}  /* selected link */

/* Rollovers */
#rollover{
	width:196px;
	}
.home
{
  background: url("images/roll/home2.jpg") no-repeat 0 0;
  width: 198px;
  display: block;
  height: 25px;

}
.webDesign
{
  background: url("images/roll/webDesign.jpg") no-repeat 0 0;
  width: 198px;
  display: block;
  height: 25px;
}
.webDevelopment
{
  background: url("images/roll/webDevelopment.jpg") no-repeat 0 0;
  width: 198px;
  display: block;
  height: 25px;
}
.portfolio
{
  background: url("images/roll/webMarketing.jpg") no-repeat 0 0;
  width: 198px;
  display: block;
  height: 24px;
}
.hosting
{
  background: url("images/roll/portfolio.jpg") no-repeat 0 0;
  display: block;
  width: 198px;
  height: 24px;
}
.domains
{
  background: url("images/roll/contact.jpg") no-repeat 0 0;
  display: block;
  width: 198px;
  height: 25px;
}
.bottomRoll
{
  background: url("images/roll/bottom2.jpg") no-repeat 0 0;
  display: block;
  width: 198px;
  height: 52px;
}

.roll:hover
{
  background-position: -198px 0px;
}

.roll span
{
  display: none;
}

#logo {
	position:relative;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	width:800px;

	}

#logo img {
	padding:0px;
	border:0px;
	}

/* containers for main and content information */
#mainContainer{
	background: #000;
	overflow:hidden;
	width:950px;
	position:relative;
	margin-left: auto;
	margin-right: auto;

	}

.innerwrapper{
	width:100%;
	margin-left: auto;
	margin-right: auto;
	overflow:auto;
	min-height:300px;
	}


.innerwrapper ul
{
padding-left: 16px;
}

.wrapper {
	border-left: solid #000 14px;
	border-right: solid #000 14px;
	 z-index: 2000;
	}

.leftwrapper{
	width:520px;
	display:block;
	float:left;
	position:relative;
	clear:right;
	}

.leftwrapper h2{
padding: 15px 0px;

}

.rightwrapper{
	width:250px;
	display:block;
	float:left;
	position:relative;
	}
.rightwrapper img{
	border:0px;
	text-align:center;
	}
.topwrapper{
	float:left;
	position:relative;
	clear:both;
	}
#welcome {
	z-index:1002;
	width: 520px;
	float:left;
	position:relative;
	padding-right:20px;
	background-image: url('images/leftcorner.png');
	background-repeat: no-repeat;
	background-position: bottom left;
	}

#welcome h2{
padding: 15px 25px;

}

#mostrecent {
	z-index:1000;
	width: 520px;
	float:left;
	position:relative;
	text-align: left;
	padding: 30px;
	background-image: url('images/leftcorner.png');
	background-repeat: no-repeat;
	background-position: bottom left;
	}
#mostrecent p {

	}

#welcome p {
	margin-left: 50px;
	font-style:bold;
	font-family:Comic Sans MS;
	}
#welcome img{
	margin-bottom:15px;
	margin:0px;
	border:0px;
	padding:30px;
	float:left;
	clear:left;
	}
.rightspacer{
	display:block;
	float:left;
	position:relative;
	height: 330px;
	width: 10px;
	clear:none;
	background: #000;
	}
	#lay2{
	float:left;
	position:relative;
}
#promotions {
	padding-left:30px;
	padding:15px;
	margin-left:10px;
	width:250px;
	padding-right:20px;
	position:relative;
	float:left;
	text-align: left;
	border: 1px dashed #FFF;
	background-color: #ccc;

	}

#promotions p {
margin-left: 7px;
}

#promotions ul {
text-align: left;
}

#promotions h2{
	padding-top: 5px;
	padding-bottom:10px;
	color:#003366;
	}

.estimate {
font-size: 148%;
text-align: center;
width: 100%;

}

/* footer information */
#footer{
	width: 100%;
	float:left;
	background-color: #000;
	color: #fff;
	position:relative;
	}
.footwrap{
	padding-top:10px;
	text-align:center;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}
.footleft{
	width:220px;
	float:left;
	position:relative;
	padding-top: 30px;}

.footright{
	float:left;
	position:relative;
	clear:right;
	width:600px;
	}


/* box information (for corners ) */
/* box styles */
	.contain500 { width: 500px;}
	.contain100 { width: 100%;}
	.contain250 { width: 250px; }
	.box2 { position: relative; margin: 0 0 20px 0; border: solid 2px #000;}
	.box { position: relative; margin: 0 0 20px 0; }
	.silver { background: #3f3f3f url('images/gradient-silver.png') top repeat-x; }
	.inner { padding: 20px; }
	.dblue { background: #30404f url('images/gradient-dblue.png') top repeat-x; }
	.line{ background: #f3f3f3;}

	/* corners specifically for outline with 2px*/
	.inner2 { padding: 20px; }
	.outline { position: absolute; width: 10px; height: 10px; background: url('images/black-outlinecorners.png') no-repeat; font-size: 0%; }
	.TL2 { top: -2px; left: -2px; background-position: 0 0; }
	.TR2 { top: -2px; right: -2px; background-position: -10px 0; }
	.BL2 { bottom: -2px; left: -2px; background-position: 0 -10px; }
	.BR2 { bottom: -2px; right: -2px; background-position: -10px -10px; }

	/* corners for every other rounded box */
	.corner-white { position: absolute; width: 10px; height: 10px; background: url('images/corners2.png') no-repeat; font-size: 0%; }
	.corner-black { position: absolute; width: 10px; height: 10px; background: url('images/corners3.gif') no-repeat; font-size: 0%; }
	.corner { position: absolute; width: 10px; height: 10px; background: url('images/corners2.png') no-repeat; font-size: 0%; }
	.TL { top: 0; left: 0; background-position: 0 0;}
	.TR { top: 0; right: 0; background-position: -10px 0; }
	.BL { bottom: 0; left: 0; background-position: 0 -10px; }
	.BR { bottom: 0; right: 0; background-position: -10px -10px; }

	/* big circle divider */
	.circle { position: absolute; width: 100px; height: 100px; background: url('images/circle.png') no-repeat; font-size: 0%; }
	.BL { bottom: -2px; left: -2px; background-position: 0 -100px; }
	.BR { bottom: -2px; right: -2px; background-position: -100px -100px; }

	/*top left and right pieces */
	.left  { position: absolute; width: 27px; height: 30px; background: url('images/tleft.png') no-repeat; font-size: 0%; z-index: 1001;}
	.right { position: absolute; width: 27px; height: 30px; background: url('images/tright.png') no-repeat; font-size: 0%; z-index: 1001; }
	.tleft  { top: 0; left: 0px; background-position: 0 0; }
	.tright { top: 0; right: 0px; background-position: 0 0; }

	/* top and right pieces for pages with out services attatched */
	.left-white  { position: absolute; width: 27px; height: 30px; background: url('images/tleft-white.png') no-repeat; font-size: 0%; z-index: 1001;}
	.right-white { position: absolute; width: 27px; height: 30px; background: url('images/tright-white.png') no-repeat; font-size: 0%; z-index: 1001; }
	.tleft-white  { top: 0; left: 0px; background-position: 0 0; }
	.tright-white { top: 0; right: 0px; background-position: 0 0; }

	/*footer corners*/
	.fright { position: absolute; width: 20px; height: 20px; background: url('images/bigcorner2.png') no-repeat; font-size: 0%; z-index: 1001;  top: -18px; left: 0px; background-position: 0 -20px; }
	.fleft { position: absolute; width: 20px; height: 20px; background: url('images/bigcorner2.png') no-repeat; font-size: 0%; z-index: 1001;  top: -18px; right: 0px; background-position: -20px -20px; }

/* layout types */
/*lay1 is being used by:  webdesign.asp */
.lay1Wrapper{
	width:100%;
	font-size:100%;
	position:relative;
	}
.lay1TopLeft{
	width:600px;
	position:relative;
	float:left;
	padding-right: 10px;
	}
.lay1Wrapper h1,h2,h3{
	text-align:left;
padding:0px 5px px 0px;
	}
.lay1Wrapper h1{
	size: 120%;
	}
.lay1Wrapper h2 {
	size: 110%;
	}
.lay1Wrapper h3{
	size: 100%;
	}
.lay1TopRight{
	float:left;
	text-align:left;
	width:265px;
	position:relative;
	clear:right;
	background-image: url("images/bg-bluewhite.png");
	background-repeat:repeat-x;

	}
.lay1TopRight ol{
padding: 18px;
}

.lay1TopRight p{
	margin-left: 5px;

}
.lay1SplitCol{

	padding-bottom:8px;
	padding-top:10px;
	float:left;
	position:relative;
	width:580px;
	clear:right;
	}
.lay1Col1{
	padding: 5px 0px;
	position:relative;
	width:40%;
	float:left;
	}
.lay1Col2{
	padding:5px;
	position:relative;
	width:56%;
	float:left;
	clear:right;
	}
.lay1MidContent{
	padding-top:12px;
	clear:left;
	position:relative;
}
.lay1Bottom{
	clear:left;
	position:relative;
	text-align:left;
	}
/* Lay2 Currently being used by: webdev.asp */
.lay2wrapper {
	position:relative;
	width:100%;
	font-size:100%;
	}
.lay2Wrapper h1,h2,h3{
	text-align:left;
	padding:5px 0px;
	}
.lay2Wrapper h1{
	size: 120%;
	}
.lay2Wrapper h2 {
	size: 110%;
	}
.lay2Wrapper h3{
	size: 100%;
	}
.lay2Top {
	width:850px;
	}
.lay2ThreeColumn{
	width:100%;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	float:left;
	clear:both;
	}
.lay2Col1{
	float:left;
	clear:none;
	width:32%;
	padding:5px;}
.lay2Col2{
	float:left;
	clear:none;
	width:32%;
	padding:5px;}
.lay2Col3{
	float:left;
	clear:none;
	width:32%;
	padding:5px;}
.lay2MidContent{
	clear:left;}
.lay2Bottom{
	clear:left;}
/* Lay3 Current being used by: ecom.asp */
.lay3wrapper {
	position:relative;
	width:100%;
	font-size:100%;
	}
.lay3Wrapper h1,h2,h3{
	text-align:left;
		padding:5px 0px;
	}
.lay3Wrapper h1{
	size: 120%;
	}
.lay3Wrapper h2 {
	size: 110%;
	}
.lay3Wrapper h3{
	size: 100%;
	}
.lay3Left{
	position:relative;
	width:650px;
	float:left;}
.lay3Right{
	position:relative;
	width:200px;
	float:left;
	clear:right;}
.lay3MidContent{
	position:relative;
	clear:left;}
.lay3Bottom{
	text-align:left;
	position:relative;
	}
/* Estimate information */
.formWrapper{
	min-width:800px;
	width: 100%;
	overflow:auto;
}
.formOther{
	width:300px;
}
.workToBeDone{
	width:500px;
	height:200px;
	overflow:scroll;
}
.topForm{
	width:100%;}
.leftForm{
	float:left;
	width:150px;}
.rightForm{
	padding-top:5px;
	float:left;
	clear:right;
	width:200px;}
.clearLeft{
	clear:left;
}
.formDesc{
	float:left;
	width:300px;
}
.estForm{
	float:left;
	position:relative;
	width:500px;
	}
.estPromotions{
	float:left;
	position:relative;
	width:350px;
	clear:right;
	padding:10px;}