@charset "UTF-8";

/*
.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }

*/


* {
	margin: 0px;
	padding: 0px;
}

html {
	overflow: -moz-scrollbars-vertical;
}

a:active, a:focus{
	outline:none;
}

body {
	background-image: url(../images/background.jpg);
}

wrapper {
	width: 100%;
}

#page {
	margin: 0 auto 0;
	width: 854px;
}

#header {
	height: 243px;
	background: url(../images/header.png) no-repeat left;
	margin-top: 10px;
}

.ie6 #header {
	background: url(../images/ieheader.jpg) no-repeat left;
}

#content {
	width: 854px;
	background: url(../images/paren_center.png) no-repeat 20px center;
}

.ie6 #content {
	background: url(../images/ieparen_center.jpg) no-repeat 20px center;
}

.leftside_top {
	width: 73px;
	height: 53px;
	float: left;
	background: url(../images/paren_top.png) no-repeat 34px;
}

.intro {
	width: 771px;
	height: 52px;
	float: right;
	padding: 12px 0px 0px 10px;
	background: url(../images/introtext.png) no-repeat 10px 12px;
}

.ie6 .intro {
	background: url(../images/ieintrotext.jpg) no-repeat 10px 12px;
}

/* Panels ----------------------------------------------------------------------------*/

#panels {
	width: 781px;
	float: right;
	margin-bottom: 20px;
	font-family: "Arial", Helvetica, Geneva, sans-serif;
}

#panels h2 {
	color: #8ca56a;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 3px;
}

#panels ul {
	color: #ccc;
	font-size: 11px;
	padding: 0 0 0 18px;
	line-height: 16px;
}

.panel1, .panel2, .panel3 {
	width: 197px;
	height: 65px;
	padding: 21px 25px 21px 25px;
	margin-left: 20px;
	float: left;
	background-color: rgba(229,228,211,.07);
}

.panel1 {
	margin-left: 0px;
}

.ie7 .panel1, .ie7 .panel2, .ie7 .panel3 {
	background-image: url(../images/contentback.png);
}

.ie6 .panel1, .ie6 .panel2, .ie6 .panel3{
	background-image: url(../images/iecontentback.jpg);
}


/*Begin Accordian Navigation --------------------------------------------------------------*/

#accordion {
	float: right;
	width: 781px;
}

h2.toggler {
	cursor: pointer;
	height: 18px;
	font: bold 12px "Arial", Helvetica, Geneva, sans-serif;
	background-color: rgba(229,228,211,.07);
	color: #8ca56a;
	padding: 7px 0 5px 15px;
	border-bottom: 1px solid #373632;
}

.ie6 h2.toggler {
	background-image: url(../images/ieaccordionh3back.jpg);
	border-bottom: none;
}

.ie7 h2.toggler {
	background-image: url(../images/accordionh3back.png);
	border-bottom: none;
}

h2.toggler:hover {
	cursor: pointer;
	background-color: rgba(229,228,211,.15);
	border-bottom: 1px solid #4c4b45;
	
}

.ie7 h2.toggler:hover {
	cursor: pointer;
	background-image: url(../images/accordionh3hover.png);
	border-bottom: none;
}


#element1, #element2, #element3, #element4 {
	background-color: rgba(0,0,0,0.16);
	display: none;
}

.ie #element1, .ie #element2, .ie #element3, .ie #element4 {
	background-image: url(../images/ieaccordioncontentback.jpg);
}

.chrome #element1, .chrome #element2, .chrome #element3, .chrome #element4 {
	background-image: url(../images/ieaccordioncontentback.jpg);
}

#nav_services {
	background: url(../images/nav_services.png) no-repeat right center;
}

#nav_portfolio {
	background: url(../images/nav_portfolio.png) no-repeat right center;
}

#nav_aboutus {
	background: url(../images/nav_aboutus.png) no-repeat right center;
}

#nav_contactus {
	background: url(../images/nav_contactus.png) no-repeat right center;
}

#nav_services a, #nav_contactus a, #nav_aboutus a, #nav_portfolio a {
	text-decoration: none;
	cursor: pointer;
	color: #1b1a16; /* fix for wierd underline bug*/
	border: none;
}


/*Services Section --------------------------------------------------------------*/

div.elementcontent_services {
	font: 11px/16px "Arial", Helvetica, Geneva, sans-serif;
	color: #ccc;
	padding: 35px 25px 0px 40px;
	height: 320px;
}

.services_web {
	width: 330px;
	float: left;
	padding: 35px 0px;
	background: url(../images/services_webdesign.png) no-repeat;
	margin-right: 40px;
}

.ie6 .services_web {
	background: url(../images/ieservices_webdesign.jpg) no-repeat;
}

.services_print {
	width: 330px;
	float: left;
	padding: 35px 0px;
	background: url(../images/services_print.png) no-repeat;
}

.ie6 .services_print {
	background: url(../images/ieservices_print.jpg) no-repeat;
}

.services_hosting {
	width: 330px;
	float: left;
	padding: 35px 0px;
	background: url(../images/services_hosting.png) no-repeat;
	margin-right: 40px;
}

.ie6 .services_hosting {
	background: url(../images/ieservices_hosting.jpg) no-repeat;
}

.services_other {
	width: 330px;
	float: left;
	padding: 35px 0px;
	background: url(../images/services_other.png) no-repeat;
}

.ie6 .services_other {
	background: url(../images/ieservices_other.jpg) no-repeat;
}





/*Portfolio Section --------------------------------------------------------------*/

div.elementcontent_portfolio {
	font: 11px/16px "Arial", Helvetica, Geneva, sans-serif;
	color: #ccc;
	padding: 0px 25px 0px 37px;
}

#toc {
	padding: 32px 0 0 0;
	width: 144px;
	float: left;
}

#toc li {
	list-style: none;
	line-height: 27px; 
	background-repeat: no-repeat;
	background-position: 7px 50%;
	margin: 0px 0px 10px 0px;
}

.ie6 #toc li {
	margin: 0px;
	line-height: 13px;
	padding-top: 14px;
}

#toc li.back {
	background: url(../images/portfolio_navback.png) no-repeat left;
	z-index: 8;
	position: absolute;
}

.ie6 #toc li.back {
	background: url(../images/ieportfolio_navback.jpg) no-repeat left;
}

#toc li a {
	font: 12px/16px "Arial", Helvetica, Geneva, sans-serif;
	color: #ccc;
	text-decoration: none;
	outline: none;
	text-align: left;
	padding: 6px 5px 6px 33px;
	z-index: 10;
	display: block;
	position: relative;
}

.ie6 #toc li a {	
	padding: 0px 5px 0px 33px;
	font-weight: bold;
}

.ie7 #toc li a {	
	font-weight: bold;
}

#toc li a:hover {
	text-decoration: none;
}

#portfolio_navli {
	background: url(../images/footerlinkarrow.png);
}

.ie6 #portfolio_navli {
	background-image: url(../images/iefooterlinkarrow.gif);
}

#toc .current{
	background: url(../images/portfolio_navback.png) no-repeat left;
}

/*CRAIG: tried to get 
a.scrolling {
	background: url(../images/portfolio_navback.png) no-repeat left;
}
*/


.ie6 #toc .current{
	background: url(../images/ieportfolio_navback.jpg) no-repeat left;
}

#portfolio_content {
	overflow: hidden;
	position: relative;
	padding-left: 32px;
	height: 420px; /*Height of portfolio scrolling div*/
}

.portfolio_section {
	padding: 17px 0px 0px 0px;
	height: 403px; /*Also Height of portfolio scrolling div*/
	margin-bottom: 100px;
}

.portfolio_section ul {
        list-style-type: none;
} 

.portfolio_section li {
        margin: 5px 0;
        float: left;
        width: 267px;
}

.portfolio_section li a { 
        color: #fff;
        display: block;
        font: 11px/16px "Arial", Helvetica, Geneva, sans-serif;
        padding: 10px;
        text-decoration: none;
        height: 47px;
        background-image: none;
}

 * html .portfolio_section li a {  /* make hover effect work in IE */
	width: 247px;
	background-color: rgba(229,228,211,.07);
}

.portfolio_section li a:hover {
	background-color: rgba(229,228,211,.07);
}

.ie .portfolio_section li a:hover {
	background: #22211c;
}

.portfolio_section a img { 
    float: left;
	margin-right: 10px;
	border: none;
}

.portfolio_section a h4 { 
        color: #fff;
        font: bold 11px/125% "Arial", Helvetica, Geneva, sans-serif; 
}

.portfolio_section a em { 
        color: #ccc;
        display: block;
        font: 11px/125% "Arial", Helvetica, Geneva, sans-serif; 
}

.portfolio_section a span {
        color: #ccc;
        font: 11px/16px "Arial", Helvetica, Geneva, sans-serif;
        line-height: 150%;
}


/*About Us Section ----------------------------------------------------------------------*/

div.elementcontent_aboutus {
	font: 11px/16px "Arial", Helvetica, Geneva, sans-serif;
	color: #ccc;
	padding: 32px 40px 32px 40px;
	height: 245px;
}

#aboutus_content {
	width: 425px;
	background: url(../images/aboutus_header.png) no-repeat;
	padding-top: 70px;
}

.ie6 #aboutus_content {
	background: url(../images/ieaboutus_header.jpg) no-repeat;
}

#aboutus_content p {
	text-align: justify;
	margin-bottom: 12px;
}

#aboutus_content img{
	float: right;
	padding: 3px 0 20px 40px;
}

.slideshow1 {
	width: 235px;
	float: right;
	margin-top: 5px;
}

.testimonial {
	width: 235px;
}

.quotebacktop {
	width: 235px;
	height: 27px;
	background: url(../images/quotebacktop.png) no-repeat top;
}

.ie .quotebacktop, .chrome .quotebacktop {
	background: url(../images/iequotebacktop.jpg) no-repeat top;
}

.quote {
	font: 12px/18px Georgia, "Times New Roman", Times, serif;
	font-style: bold;
	text-align: center;
	color: #ccc;
	width: 165px;
	padding: 0 35px;
	background-image: url(../images/contentback.png);	
}

.ie .quote, .chrome .quote {
	background-image: url(../images/iequote_contentback.jpg);	
}

.quotebackbottom {
	width: 235px;
	height: 26px;
	background: url(../images/quotebackbottom.png) no-repeat top;
}

.ie .quotebackbottom, .chrome .quotebackbottom {
	background: url(../images/iequotebackbottom.jpg) no-repeat top;
	
}

.quoteauthor {
	color: #4d4b45;
	font: 11px/16px "Arial", Helvetica, Geneva, sans-serif;
	text-align: right;
	padding: 5px 65px 0 0;
	width: 170px;
	height: 52px;
	background: url(../images/quotebackpoint.png) no-repeat 180px top;	
}

.ie .quoteauthor, .chrome .quoteauthor {
	background: url(../images/iequotebackpoint.jpg) no-repeat 180px top;	
}

.quoteauthor a:link, .quoteauthor a:visited {
	color: #4d4b45;
	text-decoration: underline;	
}

.quoteauthor a:hover {
	color: #ccc;
	text-decoration: underline;	
}

/*Social Network Links --------------------------------------------------------------*/

.subnav {
	height: 18px;
	padding: 15px 15px 0px 0px;
}

.ie6 .subnav {
	padding: 0px 15px 0px 0px;
}

.subnav ul {
	list-style: none;
}

.subnav ul li {
	margin: 2px 0 6px 25px;
	line-height: 15px; /* height of icon */
	background-repeat: no-repeat;
	background-position: 0 40%;
	float: right;
}

.subnav ul li a:link, .subnav ul li a:visited {
	padding-left: 22px; /* width of icon + whitespace */
	font: 12px/16px "Arial", Helvetica, Geneva, sans-serif;
	color: #ccc;
	text-decoration: none;
}

.subnav ul li a:hover {
	padding-left: 22px; /* width of icon + whitespace */
	font: 12px/16px "Arial", Helvetica, Geneva, sans-serif;
	color: #fff;
	text-decoration: none;
}

.network {
	background-image: url(../images/footerlinkarrow.png);
}

.ie6 .network {
	background-image: url(../images/iefooterlinkarrow.gif);
}


/*Footer ----------------------------------------------------------------------*/

.blank {
	height: 1px;
	width: 12px;
	clear: right;
}

/* My Comment */

#footer {
	height: 245px;
	width: 754px;
	padding: 0px 0px 0px 100px;
	background: url(../images/paren_bottom.png) no-repeat 30px top;
	clear: both;
}

/*Contact Sections ----------------------------------------------------------------------*/

div.elementcontent_contact {
	font: 11px/16px "Arial", Helvetica, Geneva, sans-serif;
	color: #ccc;
	padding: 29px 0px 35px 37px;
	height: 212px;
}

#contactheader {
	background: url(../images/contact_header.png) no-repeat;
	padding: 20px 0px 0px 62px;
}

.ie6 #contactheader {
	background: url(../images/iecontact_header.jpg) no-repeat;
}

#contactform {
	margin: 10px 0 0 0;
	width: 100%;
}

#contact_section1 {
	float: left;
}

#contact_section2 {
	margin: 0px 0 0 457px;
}

label.label {
	display: block;
	font-size: 11px;
	line-height: 24px;
	padding-left: 2px;
}

input {
	font-family: Arial, Verdana, Helvetica;
	font-size: 11px;
	color: #fff;
	border: 1px solid #8a8a88;
	background-image: url(../images/formbackground.jpg);
	padding: 5px;
	width: 235px;
}

input:focus {
	border: 1px solid #fff;
}

input#submitbutton {
	border: none;
	background: url(../images/contact_buttonback.png) no-repeat left;
	padding: 2px 8px;
	margin-top: 25px;
	height: 27px;
	width: 247px;
}

.ie6 input#submitbutton {
	background: url(../images/iecontact_buttonback.jpg) no-repeat left;
}

input#submitbutton:hover {
	border: none;
	padding: 2px 8px;
	cursor: pointer;
	width: 247px;
}

#textarea {
	font-family: Arial, Verdana, Helvetica;
	font-size: 11px;
	color: #fff;
	border: 1px solid #8a8a88;
	padding: 5px;
	width: 408px;
	height: 120px;
	background-image: url(../images/formbackground.jpg);
	overflow:auto;
	resize: none;
}

#textarea:focus {
	color: #fff;
	border: 1px solid #fff;
	background-image: url(../images/formbackground.jpg);
	overflow:auto;
}

form#contactform span {
	color: #fff;
	padding-left: 5px;
}

form#contactform span.warn {
	background: url(../images/erroricon.png) no-repeat;
	height: 22px;
	margin-left: -5px;
	text-align: left;
	display: block;
	list-style: none;
}

.ie6 form#contactform span.warn {
	background: url(../images/ieerroricon.jpg) no-repeat;
}

input.invalid {
	background-color: #00f800;
}

div.error {
	float: right;
	width: 22px;
	padding: 2px 3px 0 0;
}

strong.error {
	color: #CC0000;
}

form#contactform span.error {
	background: url(../images/erroricon.png) no-repeat;
	float: right;
	list-style: none;
	overflow: hidden;
	height: 22px;
	width: 22px;
}

.ie6 form#contactform span.error {
	background: url(../images/ieerroricon.jpg) no-repeat;
}

.errormessage {
	background: url(../images/erroricon.png) no-repeat;
	text-align: left;
	padding: 2px 20px 5px 25px;
	margin: 5px 0 2px 8px;
	color: #fff;
	display: block;
	list-style: none;
}

.ie6 .errormessage {
	background: url(../images/ieerroricon.jpg) no-repeat;
}

.errorlist {
	margin: 0;
	padding: 0;
}

#contactsent {
	width: 430px;
	padding: 95px 0px 0px 280px;
	height: 90px;
	background: url(../images/contact_messagesent.png) no-repeat center center;
}

.ie6 #contactsent {
	background: url(../images/iecontact_messagesent.jpg) no-repeat center center;
}