/* The very external width of the browser*/
/*complete width is 950 pink lines, wrapper 800, content 620w 445h, index a href graphics 200 w x200 h px*/

/*global bits*/

.cssnav{
	position: relative;
	font-family: arial, helvetica, sans-serif;
	white-space: nowrap;
	display: inline;
	width: 180px;
	height: 180px;
	margin: 0px;
	padding: 0;}
.btn1{
	background: url(../graphics/package1h.png) no-repeat;
	position:absolute;
	top:0px;
	left:0px;}
.btn1i{position:absolute;
	top:0px;
	left:0px;}
.btn2{
	background: url(../graphics/package2h.png) no-repeat;
	position:absolute;
	top:0px;
	left:200px;}/*this places the hover image as absolute*/
.btn2i{position:absolute;
	top:0px;
	left:0px;}/*this places the original image as absolute within the hover image*/
.btn3{
	background: url(../graphics/package3h.png) no-repeat;
	position:absolute;
	top:200px;
	left:0px;}
.btn3i{position:absolute;
	top:0px;
	left:0px;}
.btn4{
	background: url(../graphics/package4h.png) no-repeat;
	position:absolute;
	top:200px;
	left:200px;}
.btn4i{position:absolute;
	top:0px;
	left:0px;}
.cssnav a {
	font-size: 18px;
	width: 180px;
	height: 180px;
	float: right;
	color: #FFFFFF;
	text-decoration: none;
	margin-left:10px;}
.cssnav a:hover{
	color:#00FF00;}
.cssnav img{
	width: 180px;
	height: 180px;
	border: 0;
	padding:0;}
* html a:hover{
	visibility:visible;}
.cssnav a:hover img{
	visibility:hidden;}
.cssnav span{
	margin: 0px;
	padding: 0px;
	cursor: pointer;} 
.cssnav span.pack1text{/* this text has never been used so measurements need to be adjusted for these 4 tasks */
	position: absolute;
	left: -138px;
    top: 50px;	}
.cssnav span.pack2text{
	position: absolute;
	left: -150px;
	top:50px;}
.cssnav span.pack3text{
	position: absolute;
	left: -138px;
    top: 150px;	}
.cssnav span.pack4text{
	position: absolute;
	left: -350px;
    top: 50px;	}
	
	
	
body { 
	text-align:center;
	margin-left:0;
	margin-right:0;
	margin-top:2px;
	background:#333333;
	font-family: tahoma;}
#wrapperPinkLines{
	width: 950px;
	margin-right:auto;
	background: url(../graphics/pinkLinesCropJE.jpg) repeat;
	margin-left:auto;}
/* The page display width */
#wrapper { 
	position:relative;
	width: 800px;
	min-width:800px;
	max-width:1024px;
	height:650px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	font-size:12px;
	color:#333333;}
/* the form width */	
#wrapper2{/*maybe not being used*/
	width:100%;
	text-align:left;
	margin-right:5%;
	margin-left:5%;
	background:#FFFFFF;}

/*holds main content, oversize width and other content drops*/	
#content{
	position:relative;/*will hold images within as absolute*/
	float: left;
	width: 620px;
	height: 445px;
	margin-right:2px;
	padding-left: 5px;
	padding-right: 10px;
	padding-top:3px;
	margin-top:2px;	
	margin-bottom:2px;
	display: inline;
	background: #CCCCCC;}
/*display the four squares on home page*/
#content  a{
	display:inline;
	float:left;/*changes display colour order, right reverses*/
	width:200px;
	height: 200px;
	padding-right:2px;
	margin-right:13px;
	padding-left:1px;
	text-decoration:none;}
#content a.small{
	position:relative;
	background: url(../graphics/package1.png) no-repeat right top;}/*displays right-hand side*/
#content  a.medium{
	position:relative;
	background: url(../graphics/package2.png) no-repeat right top;}
#content  a.large{
	position:relative;
	background: url(../graphics/package3.png) no-repeat right top;}
#content  a.ecomm{
	position:relative;
	background: url(../graphics/package4.png) no-repeat right top;}
#content a.small:hover{
	background: url(../graphics/package1h.png) no-repeat right top;}
#content  a.medium:hover{
	background: url(../graphics/package2h.png) no-repeat right top;}
#content  a.large:hover{
	background: url(../graphics/package3h.png) no-repeat right top;}
#content  a.ecomm:hover{
	background: url(../graphics/package4h.png) no-repeat right top;}
#content a.buttNextStep{	
	background:#DE106C;
	height:28px;
	width:100px;
	position:absolute;
	top:388px;
	left:493px;}
#content a.buttPackages{	
	background:#DE106C;
	height:28px;
	width:100px;
	position:absolute;
	top:388px;
    left:45px;}
#content a span.buttFormat{
	position:relative;
	top:6px;
	left:18px;
	font-family:arial;
	color:#FFFFFF;
	font-size:12px;
	font-weight:bold;}
#content a span.buttFormat:hover{
	color:#999999;}
	.paypalPack1{
	position:absolute;
	top:200px;
	left:350px;}
#content .conButt a{
	position: absolute;
	left:35px;
	width:100px;
	height:20px;
	color:#000000;
	text-align:center;
	font-weight:bold;
	background:#0099CC;
	padding:10px;}
#content .conButt a:hover{
	color:#FFFFFF;
	background:#003366;}
#content a.aList{
	height:2em;
	width:600px;}
#content a.normal{
	padding-right:0px;
	margin-right:0px;
	padding-left:0px;
	width: default;
	height: 2em;
	border:none;}
#content span{
	position:absolute;
	width:150px;
	font-size:1.1em;
	font-weight:bold;
	text-align: center;
	padding:2px;
	color:#000033;} /*text*/
#content span:hover{
	color:#333333;}
#content a.generalList{
	height:25px;
	width:620px;
	text-align:center;}
#content a.generalList:hover{
	text-decoration:underline;}
	/*displays the text within the four boxes*/
.desSmall{
	top: 22%;
	left:13%;}
.desMed{
	top: 22%;
	left:13%;}
.desLarge{
	top: 22%;
	left:13%;}
.desEComm{
	top: 22%;
	right:13%;}
.small span.price{
	top:60%;
	left:40%;}	
.medium span.price{
	top:60%;
	left:40%}
.large span.price{
	top:60%;
	left:40%}
.ecomm span.price{
	top:60%;
	left:40%}
.liveChat{
	top:268px;
	left:145px;}
.largeMap{
	top:311px;
	left:215px;}
/* bring live chat to fore */	
#habla_window_div{
	z-index:99;}
/* To source the banner and set placement throughout site (add alt text) */	
#banner {  
	width: 800px;
	min-width:800px;
	max-width:1024px;
	background: url(../graphics/bannerv5.jpg) no-repeat right top;
	height: 90px;
	margin-top:10px;
	float: left;}
#banner img { /* for any image within banner */
	float: left;}
/* list within banner live chat and removed contact us*/	
#banner ul {
	margin: 0px;
	padding: 0px;
	list-style: none;}
#banner li {
	display: inline;
	float: right;
	margin-right:528px;
	margin-top: 2px;
	padding-bottom: .5em;} /* to display bottom border on list links in IE */
#banner li a{font-size: .8em;
	text-decoration: none;
	color: #FFFFFF;
	line-height: 2em;
	background: #FF0000;
	padding: 5px;
	height: 1.5em;
	border: 1px solid #4D69B0;
	font-weight: bold;
	margin-right: 5px;}
#banner li a:hover {
	color: #FF0000;
	background: #FFFFFF;
	border: 1px solid #FF0000;}
/* headings */
h1, h2, h3, h4, p, ul, ol, text{
	margin: 0px;
	padding: 0px;}	
h1  {font-size:1.3em;
    color:#FFFFFF;
	background:#666666;}
h2  {font-size:1.2em;
	color:#0099CC;
	padding-left:10px;
	padding-bottom:0px;
	margin-bottom:0px;}
h2 span.floatRight{
	float:right;
	margin-left:117px;}
h3  {clear:both;
	float:left;
	padding-left:50px;
	padding-bottom:8px;
	padding-top:8px;
	font-size:1em;
	color:#CC6699;}
	
	
/*contact form*/
.background_form{
	background: url(../graphics/backgroundBlue.gif) repeat-y right top;
	border-color:#0000CC;
	height:406px;
	padding-top:.6em;
	padding-bottom:.5em;
	margin-top:0px;}
/* for textfields and their labels */	
label{        
	float:left;
	width:31%;
	text-align:right;
	clear: left;
	margin-top:0px;
	margin-bottom:0px;
	margin-right:2%;
	margin-left:10%;}
/* for combo box */	
.label2{ 
	float:left;   
	margin-left:20%;
	width:50%;
	margin-top:0px;
	margin-bottom:0px;}
/* radio buttons to display text correctly */	
.radioAlign{   
	float:left;
	width:31%;
	margin-right:2%;
	color:#0099CC;
	font-size:12px;}
.contactForm{
	top:225px;
	left:75px;}
	
/*formatting text */
.pageText{
	font-size:12px;
	color:#003366;}
.formText{
	font-size:12px;
	color:#0099CC;
	font-family:tahoma;}
	.aList{
	margin-left:30px;
	line-height: 25px;
	text-decoration:none;}
.p1List{
	font-size:20px;/*sets list of to do in packages*/
	color:#FFFFFF;
	margin-left:130px;	
	margin-top:50px;
	width:228px;
	line-height:38px;
	background:#CC6699;
	padding:30px 50px 30px 75px;}
/*positioning */
.text_center{
	text-align:center;}
.text_center2{
    text-align:right;}	
#f_r{float:right;
	margin-right:10%;
	margin-left:25%;
	margin-bottom:5px;
	margin-top:0px;}

.floatRight {
	float:right;
	margin-left:10px;
	padding-left:10px;
	padding-right:1em;}
.floatRight1{
	position:absolute;
	top:100px;
	left:250px;
	float:right;
	margin-left:10px;}
.floatRight2{
	float:right;
	margin-top:25px;
	margin-right:150px;}
.floatBannerButton{
	float:right;
	margin-left:235px;
	margin-right:15px;}
.floatLeft{
	float:left;}
.floatLeft1{
	float:left;
	margin:25px;}
.floatLeftBanner{
	float:left;
	margin-left:15px;
	margin-top:15px;}
#map_canvas{
	position:absolute;
	top:25px;
	left:285px;}
#homeText{
	float: right;
	width:168px;
	padding-right:5px;}
#homeText:hover{
	color:#003366;}
#aboutText{
	float:left;
	width:168px;
	margin-left:15px;}
#contactText{
	float:left;
	width:350px;
	margin-left:25px;}
#mediaText{
	float:left;
	width:268px;
	margin-left:15px;}
	#moreInfoText{
	float:left;
	width: 410px;
	margin-left:30px;}
#techText{
	float:left;
	width:600px;
	margin-left:15px;}
#testText{
	float:left;
	width:200px;
	margin-left:15px;}
.pagePack{/*sets flash movie in packages*/
	margin-left:13px;
	margin-top:13px;
	background: url(../graphics/600/package11.jpg) no-repeat right top;}
.packagePayment{/*sets paypal button*/
	position:absolute;
	top:300px;
	left:200px;}
#packText{/*text at bottom of to do list*/
	margin-left:150px;
	width:320px;
	text-align:center;}	
#promoText{
	float:left;
	width:200px;
	margin-left:15px;}
#promoText2{
	float:right;
	width:150px;
	margin-right:30px;
	padding-top: 38px;}
#multiText{
	float:right;
	width:128px;
	margin-right:15px;}
#graphText{
	float:left;
	width:200px;
	margin-left:15px;}
#soundText{
	float:left;
	width:580px;
	margin-left:15px;}
textarea.tc{
	width:588px;
	height:250px;
	margin-left:18px;
	padding: 5px;}
#webServText{
	float:right;
	width:250px;}
.webServOptions{
	margin-left:25px;}
#emarkText{
	float:left;
	width:200px;
	margin-left:15px;}
#interText{
	float:left;
	width:200px;
	margin-left:15px;}
#educaText{
	float:left;
	width:200px;
	margin-left:15px;}
#domaiText{
	float:left;
	width:200px;
	margin-left:15px;}
#webhoText{
	float:left;
	width:200px;
	margin-left:15px;}	

	/*placement of right sidebar*/
#media{
	float: right;
	width: 162px;
	margin-top:2px;
	margin-bottom:2px;
	padding-top:3px;
    height:445px;
	font-family:tahoma;
	font-size:12px;	
	background:#CCCCCC;}
#media a.story{
	background: #CCCCCC;
	color: #003300;
	padding: 5px 5px;
	border-bottom: 1px solid #FFFFFF;
	display: block;
	text-decoration: none;
	line-height: 100%;}
#media a.story1{
	background: #999999;
	color: #003300;
	padding: 5px 5px;
	border-bottom: 1px solid #FFFFFF;
	display: block;
	text-decoration: none;
	line-height: 100%;}
#media span.title {
	font-size: 1em;
	font-weight: bold;
	display: block;
	line-height: 120%;
	color: #FFFFFF;}
#media span.mediaDetail{
	color: #003300;}
#media span.mediaDetail:hover{
	color: #4A761D;}
#media span.more{
	color: #003300;}
#media span.more:hover{
	color: #009900;}
#media a.story:hover {
	color: #4A761D;
	background: #FFFFFF}
#media a.story1:hover {
	color: #4A761D;
	background: #FFFFFF}	
#media a.story:hover span.title {
	color: #CC6699;}
#media a.story1:hover span.title {
	color: #CC6699;}
#media h2 {
	background: #CC6699;
	color: #333333;
	font-size: 1.1em;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 5px;
	text-align:left;}
#media h2:hover{
	}
/* Navigation */	
#nav {
	float: left;
	clear: left;
	margin-top:2px;
	padding-top:5px;
	background:#999999;
	width:800px;}
#mainNav li {
	list-style: none;
	display: inline;
	font-size: 12px;}
#mainNav a{
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 1em;
	padding: 8px 8px 8px 8px;}
#mainNav a.first {
	}
#mainNav a.last {
	}	
#mainNav a.chat{
	color:#FF0000;}
#mainNav a.chat:hover{
	color:#FFFFFF;}
#mainNav ul {
	margin-bottom: 7px;
	font-size:12px;
	font-weight: bold;}
#mainNav a:hover {
    color:#FF00FF;}
/*Lists*/


/*Colouring*/
.fontPink{
	color:#FF00FF;}
.fontRed{
	overflow:auto;
	border:none;
	font-size:12px;
	font-weight:bold;
	color:red;}
span.red{
	font-size:12px;
	color:red;}
.fontGreen{
	border:none;
	font-size:12px;
	font-weight:bold;
	color:green;}

/* hacks */	
.clear:after{
	content: ".";
	display: block;
	height:0;
	font-size:0;
	clear: both;
	visibility: hidden;}
.clear {
	clear:both;
	min-height: 1px;}
*html .clear {
	height: 1px;}
/* footer bits */	
.disclaimer{
	font-size:.8em;
	font-style:italic;
	margin-left:50px;
	margin-right:50px;
	padding-top:25px;
	color:#330033;}	
#footer {
    clear: both;
	float:left;
	border-top: 1px dashed #999999;
	width:790px;
	color: #333333;
	line-height:2em;
	text-align:left;
	padding-left:10px;
	font-size:.7em;
	font-style: italic;
	background:#999999;}