@charset "utf-8";
/*
PURPOSE:
	[1] Basic cascading stylesheet for ALL browsers
	[2] All Content Pages
	[3] MEDIA = SCREEN

REVISION HISTORY:
	August 21, 2009. v1.0. Created.

STATUS OF THIS DOCUMENT:
	This is a working draft.

LEGAL NOTICE:
	Distribution of this document is limited.
	Copyright (C) DebonairWeb.com 2009. All Rights Reserved.
*/

/*
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
KILL THE DEFAULTS --- This is my favourite Apple reset (modified)
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
input, textarea{ outline:none;}
table { border-collapse: collapse; border-spacing: 0; }

/*
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
HYPERLINKS
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/
a { border: 0 none; outline:none; text-decoration:none; }
a, a:visited, a:hover, a:active { text-decoration: none; }
a:active, a:hover, a:focus { text-decoration: underline; }
a.black, a.black:visited, a.black:active, a.black:hover, a.black:focus { color: #000; }
a.white, a.white:visited, a.white:active, a.white:hover, a.white:focus { color: #FFF; }
/*
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
BODY, HTML TAG
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/
body{ 
	background:#000; font:62.5% Arial, Helvetica, sans-serif; /*--This is default 10px--*/
	color:#555555;
	}
/*
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
HTML TOP RIGHT
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/
.topRight{ background:url(../images/call.png) no-repeat; width:225px; height:200px; position:absolute; top:0; right:0;}

/*
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
NAVIGATION
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/
.nStretch{ width:100%; background:url(../images/nimg.jpg) repeat-x;}
.navPipe{ height:41px; width:752px; line-height:41px; background:url(../images/nav.jpg) no-repeat; }
.navPipe li{ display:inline;}

.navPipe li a { float:left; text-indent:-9999px;}
.navPipe li a.home{ width:93px; background:url(../images/nav.jpg) no-repeat 0 0;}
.navPipe li a.home:hover{ background:url(../images/nav.jpg) no-repeat 0 -41px;}
.navPipe li a.current{background:url(../images/nav.jpg) no-repeat 0 -41px;}

.navPipe li a.company{ width:128px; background:url(../images/nav.jpg) no-repeat -93px 0;}
.navPipe li a.company:hover{ background:url(../images/nav.jpg) no-repeat -93px -41px;}
.navPipe li a.current2{ background:url(../images/nav.jpg) no-repeat -93px -41px;}

.navPipe li a.services{ width:108px; background:url(../images/nav.jpg) no-repeat -221px 0;}
.navPipe li a.services:hover{ background:url(../images/nav.jpg) no-repeat -221px -41px;}
.navPipe li a.current3{ background:url(../images/nav.jpg) no-repeat -221px -41px;}

.navPipe li a.portfolio{ width:121px; background:url(../images/nav.jpg) no-repeat -329px 0;}
.navPipe li a.portfolio:hover{ background:url(../images/nav.jpg) no-repeat -329px -41px;}
.navPipe li a.current4{ background:url(../images/nav.jpg) no-repeat -329px -41px;}

.navPipe li a.testimonial{ width:142px; background:url(../images/nav.jpg) no-repeat -450px 0;}
.navPipe li a.testimonial:hover{ background:url(../images/nav.jpg) no-repeat -450px -41px;}
.navPipe li a.current5{ background:url(../images/nav.jpg) no-repeat -450px -41px;}

.navPipe li a.contact{ width:160px; background:url(../images/nav.jpg) no-repeat -592px 0;}
.navPipe li a.contact:hover{ background:url(../images/nav.jpg) no-repeat -592px -41px;}
.navPipe li a.current6{ background:url(../images/nav.jpg) no-repeat -592px -41px;}

/*
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
CLEAR THE FLOATS
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/
.clear { clear:both; background:none;}
.clearRt{ clear:right;}
.clearLt{ clear:left;}
.floatWrapper:after { content: "."; display: block; height: 0; clear: both;  visibility: hidden; }
.floatWrapper {display: inline-block;}
/* Hides from IE-mac \*/
* html .floatWrapper {height: 1%;}
.floatWrapper {display: block;}
/* End hide from IE-mac */

/*
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
THREE COLUMN GRID
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/
.col1{ float:left; width:315px; margin:19px 0 0 0;}
.col2{ float:left; width:315px; margin:19px 0 0 15px;} 
.col3{ float:right; width:332px; margin:19px 0 0 0;}

.col1 h1, .col2 h1, .col3 h1{ text-indent:-9999px;}
.col1 h2, .col2 h2, .col3 h2{ font-size:1.7em; color:#4E4E4E;}
.col1 p, .col2 p, .col3 p{ font-size:1.3em; line-height:20px; }

.col1 a span{ display:none; }
.col1 a.view1{ background:url(../images/but1.jpg) no-repeat 0 0; height:28px; width:105px; display:block; float:right; margin:0 5px 0 0;}
.col1 a.view1:hover { background:url(../images/but1.jpg) no-repeat 0 -28px; }

.col2 a span{ display:none; }
.col2 a.view2{ background:url(../images/but.jpg) no-repeat 0 0; height:28px; width:105px; display:block; float:right;}
.col2 a.view2:hover { background:url(../images/but.jpg) no-repeat 0 -28px; }

.col3 a span{ display:none; }
.col3 a.view3{ background:url(../images/but2.jpg) no-repeat 0 0; height:28px; width:105px; display:block; float:right;}
.col3 a.view3:hover { background:url(../images/but2.jpg) no-repeat 0 -28px; }

/*
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
SCROLL EFFECTS
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
*/
.scrollRed{ position:relative; background:#fff; padding:10px; -moz-border-radius:10px; border:3px solid #f13102; -webkit-border-radius:10px;}
.scrollGreen{ position:relative; background:#fff; padding:10px;  -moz-border-radius:10px; border:3px solid #c5da27; -webkit-border-radius:10px;}
.scrollBlue{ position:relative; background:#fff; padding:10px;  -moz-border-radius:10px; border:3px solid #23b6e2; -webkit-border-radius:10px;}

.closeButRed, .closeButGreen, .closeButBlue{text-align:center; position:absolute; bottom:5px; right:5px; width:25px; height:25px; line-height:25px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.closeButRed{ background:#f13102; }
.closeButGreen{background:#c5da27; }
.closeButBlue{ background:#23b6e2;}

.closeButRed a, .closeButGreen a, .closeButBlue a{ color:#fff; font-weight:bold; font-size:1.6em;}
.closeButRed a:hover, .closeButGreen a:hover, .closeButBlue a:hover{ text-decoration:none;}


/*
====================
Vertical Slide
====================
*/
.applemenu{
margin: 5px 0;
padding: 1px;
font-size:1.2em;
border: 1px solid #0A64C1;
}

.applemenu img{ padding:0 20px 20px 0;}
.applemenu p{ font-size: 12px; font-weight:bold;}

.applemenu div.silverheader a{
	background: #5F97D0 url(silvergradient.gif) repeat-x center left;
	color: #fff;
	display: block;
	width: auto;
	padding: 5px 0;
	padding-left: 8px;
	text-decoration: none;
	border-bottom:1px solid #fff;
	}


.applemenu div.silverheader a:active{
background: #000 url(silvergradient.gif) repeat-x center left;
padding: 5px 0;
	padding-left: 8px;
color: white;
}


.applemenu div.selected a, .applemenu div.silverheader a:hover{
background: #0A64C1 url(silvergradientover.gif);
padding: 5px 0;
	padding-left: 8px;
color: white;

}

.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: #fff url(../images/billbg.jpg) repeat-x bottom;
padding: 5px;
height: 150px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}