/* ----------------- BASE ----------------- */
body{
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#ffffff;
line-height:24px;
background:url(../images/body-bg.jpg) repeat-x #FFFFFF;
position:relative;
}

#bg{
width:100%;
position: absolute;
z-index:10;
}

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

ul {
margin-left:20px;
padding:5px 0px;
}

li{
padding:5px 0px;
}

.clear{
padding:0px;
margin:0px;
height:0px;
clear:both;
}










/* ----------------- LINKS ----------------- */
a:link, a:visited{
color: #ffffff;
text-decoration:none;

}

a:hover{
}

#request-estimate a:link, #inner-content a:link, #inner-content a:visited, #request-estimate a:visited{
color: #ffffff;
font-weight:bold;
text-decoration:none;
border-bottom:1px dotted #dedede;
padding-bottom:0px;
}

#request-estimate a:hover, #inner-content a:hover {
border-bottom:1px solid #ffffff;
}


a.fnav:link, a.fnav:visited{
color: #fff;
text-decoration:none;
}

a.fnav:hover{
color:#ff0000;
}


:focus{
outline:0;
}









/* ----------------- TEXT ----------------- */
h1{
font-size:22px;
padding-bottom:5px;
}

h2{
font-size:18px;
padding-bottom:5px;
}

h3{
font-size:14px;
padding-bottom:5px;
}

h4{
font-size:12px;
}










/* ----------------- HEADER ----------------- */
#hp-header{
	height:160px;
	height:163px\9; /* IE 8 and lower fix */
}

#hp-logo{
width:325px;
float:left;
}

#hp-h-right{
float:left;
}


#hp-tagline{
width:655px;
height:91px;
margin-top:29px;
}

.hp-tagline-bg{
background:url(../images/hp-tagline.png);
width:655px;
height:91px;
text-indent:-9999px;
}


/*--- INNER ---*/


#header{
}

#logo{
width:251px;
float:left;
padding-top:1px;
}

#h-right{
float:left;
}


#tagline{
width:716px;
height:98px;
margin-top:1px;
}

.tagline-bg{
background:url(../images/tagline-inner.png);
width:729px;
height:98px;
text-indent:-9999px;
}








/* ----------------- NAV ----------------- */
#hp-nav{
}



a.whoweare:link, a.whoweare:visited{
display:block;
float:left;
background:url(../nav/whoweare.png);
width:162px;
height:40px;
text-indent:-9999px;
}

a.whoweare:hover{
background-position:0px -40px;
}

a.whatwedo:link, a.whatwedo:visited{
display:block;
float:left;
background:url(../nav/whatwedo.jpg);
width:133px;
height:40px;
text-indent:-9999px;
}

a.whatwedo:hover{
background-position:0px -40px;
}


a.whyweexcel:link, a.whyweexcel:visited{
display:block;
float:left;
background:url(../nav/whyweexcel.jpg);
width:147px;
height:40px;
text-indent:-9999px;
}

a.whyweexcel:hover{
background-position:0px -40px;
}


a.contactus:link, a.contactus:visited{
display:block;
float:left;
background:url(../nav/contactus.jpg);
width:120px;
height:40px;
text-indent:-9999px;
}

a.contactus:hover{
background-position:0px -40px;
}


a.careers:link, a.careers:visited{
display:block;
float:left;
background:url(../nav/careers.jpg);
width:93px;
height:40px;
text-indent:-9999px;
}

a.careers:hover{
background-position:0px -40px;
}










/* SF-Menu Core
------------------------------------------*/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	/*float:left;*/ /* No longer needed */
	line-height:	1.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	/*width:			10em;*/ /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	/*width:			100%;*/
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	/*left:			10em;*/ /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	/*left:			10em;*/ /* match ul width */
	top:			0;
}

/* End SF-Menu Core
------------------------------------------*/



/* SF-Menu Defaults
------------------------------------------*/
.main-nav {}

#nav{}

.sf-menu {}


.sf-menu li:hover ul, .sf-menu li.sfHover ul{
top:40px;       /* Match main menu height */
}

/* All Links
------------------------------------------*/
.sf-menu a {
	color:#333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-decoration:none;
}


/* All Drop Down and Sub Drop Down links
------------------------------------------*/
.sf-menu > li > ul > li > a, .sf-menu > li > ul > li > ul > li > a{
	height:40px;
	line-height:40px;
	border-top:1px solid #000;
	border-left:none;
	font-size:13px;
	font-weight:bold;
	text-indent:5px;
	color:#FFFFFF;
	font-family:Helvetica, Arial, sans-serif;
	background:url(../images/dropdown-bg.jpg);
}





/* Main Menu
------------------------------------------*/
.sf-menu > li > a{
	background:#000;
	color:#fff;
	height:41px;
	line-height:41px;
	text-indent:-9999px;
}

.sf-menu > li > a:hover, .sf-menu > li:hover > a, .sf-menu > li.sfHover > a{
	background-position:0 -40px;
}




/* Drop Downs
------------------------------------------*/
.sf-menu > li > ul > li > a{
}

.sf-menu > li > ul > li > a:hover, .sf-menu > li.sfHover > ul > li.sfHover > a{
	background-position:0 -40px;
}






/* -------------------- TOP NAV WIDTHS, DROP DOWN WIDTHS, SUB DROP DOWN WIDTHS AND OFFSETS -------------------- 

Sets main menu link width
------------------------------------------------------
Sets drop down width
------------------------------------------------------
Sets sub drop down offset - same as drop down width
------------------------------------------------------
Sets sub drop down width
------------------------------------------------------

*/


/* DD 1
------------------------- */
.sf-menu li.dd-1 a{
	width:162px;
}

.sf-menu li.dd-1 ul, .sf-menu li.dd-1 ul li, .sf-menu li.dd-1 ul li a{
	width:162px;
}


/* DD 2
------------------------- */
.sf-menu li.dd-2 a{
	width:133px;
}

.sf-menu li.dd-2 ul, .sf-menu li.dd-2 ul li, .sf-menu li.dd-2 ul li a{ /*Include the UL for IE7 & < fix */
	width:133px;
}


/* DD 3
------------------------- */
.sf-menu li.dd-3 a{
	width:147px;
}

.sf-menu li.dd-3 ul, .sf-menu li.dd-3 ul li, .sf-menu li.dd-3 ul li a{
	width:147px;
}


/* DD 4
------------------------- */
.sf-menu li.dd-4 a, .sf-menu li.dd-4 a{
	width:93px;
}

.sf-menu li.dd-4 ul, .sf-menu li.dd-4 ul li, .sf-menu li.dd-4 ul li a{
	width:93px;
}

/* DD 5
------------------------- */
.sf-menu li.dd-5 a{
	width:120px;
}

.sf-menu li.dd-5 ul, .sf-menu li.dd-5 ul li, .sf-menu li.dd-5 ul li a{
	width:120px;
}




/* -------------------- INNER TOP NAV WIDTHS, DROP DOWN WIDTHS, SUB DROP DOWN WIDTHS AND OFFSETS -------------------- 

Sets main menu link width
------------------------------------------------------
Sets drop down width
------------------------------------------------------
Sets sub drop down offset - same as drop down width
------------------------------------------------------
Sets sub drop down width
------------------------------------------------------

*/



/* HOME
------------------------- */
.sf-menu-inner li.home a{
	width:125px;
	background:url(../nav/inner-home.jpg);
	
}

.sf-menu-inner li.home ul, .sf-menu-inner li.home ul li, .sf-menu-inner li.home ul li a{
	width:125px;
}


/* DD 1
------------------------- */
.sf-menu-inner > li.dd-1 > a{
	width:127px;
	background:url(../nav/inner-whoweare.jpg);
}

.sf-menu-inner li.dd-1 ul, .sf-menu-inner li.dd-1 ul li, .sf-menu-inner li.dd-1 ul li a{
	width:127px;
}


/* DD 2
------------------------- */
.sf-menu-inner > li.dd-2 > a{
	width:128px;
	background:url(../nav/inner-whatwedo.jpg);
}

.sf-menu-inner li.dd-2 ul, .sf-menu-inner li.dd-2 ul li, .sf-menu-inner li.dd-2 ul li a{ 
	width:128px;
}


/* DD 3
------------------------- */
.sf-menu-inner > li.dd-3 > a{
	width:143px;
	background:url(../nav/inner-whyweexcel.jpg);
}

.sf-menu-inner li.dd-3 ul, .sf-menu-inner li.dd-3 ul li, .sf-menu-inner li.dd-3 ul li a{
	width:143px;
}


/* DD 4
------------------------- */
.sf-menu-inner > li.dd-4 > a{
	width:88px;
	height:41px;
	background:url(../nav/inner-careers.jpg);
}

.sf-menu-inner li.dd-4 ul, .sf-menu-inner li.dd-4 ul li, .sf-menu-inner li.dd-4 ul li a{
	width:88px;
}

/* DD 5
------------------------- */
.sf-menu-inner > li.dd-5 > a{
	width:118px;
	background:url(../nav/inner-contactus.jpg);
	
}

.sf-menu-inner li.dd-5 ul, .sf-menu-inner li.dd-5 ul li, .sf-menu-inner li.dd-5 ul li a{
	width:118px;
}



/* SF MENU INNER MAIN TABS HOVER
------------------------------------------*/
.sf-menu-inner > li > a:hover, .sf-menu-inner > li:hover > a, .sf-menu-inner > li.sfHover > a{
	background-position:0 -41px;
}





/* ----------------- BODY ----------------- */
#body{
position:relative;
z-index:20;
width:980px;
padding-top:20px;
margin:0px auto;
}

#content{
background:url(../images/body-bg.png) repeat-y;
width:970px;
padding-right:10px;
padding-bottom:10px;
position:relative;
}

#hp-text{
position:absolute;
z-index:50;
width:528px;
padding-left:30px;
padding-top:12px;
}


#hp-text p{
padding-left:5px;
}


/*--- INNER ---*/
#body-inner{
position:relative;
z-index:20;
width:980px;
padding-top:20px;
margin:0px auto;
}

#content-inner{
background:url(../images/inner-body-bg.png) repeat-y;
width:970px;
padding-right:10px;
padding-bottom:10px;
}


#content-left{
width:305px;
float:left;
}

#content-right{
float:left;
width:635px;
padding:25px 15px;
}

.block{
display:block;
}

#features{
padding-top:5px;
}

.featurebox{
background:url(../images/feature-box.png) no-repeat;
width:168px;
height:162px;
padding-top:11px;
float:left;
margin-left:3px;
text-align:center;
font-size:11px;
line-height:14px;
}

.featurebox img{
margin-bottom:9px;
}

.featurebox a:link, .featurebox a:visited {
border-bottom:1px #999999 dotted;
}

.featurebox a:hover{
border-bottom:1px solid #FFFFFF;
}


#request-estimate{
width:265px; 
padding-left:30px; 
padding-right:10px; 
height:83px; 
padding-top:35px;
line-height:18px;
background:url(../images/title-requestestimate.jpg) no-repeat;
}


#photogallery{
text-align:center;
}

#photogallery img{
border:4px solid #fff;
margin-bottom:1px;
}

#photogallery img:hover{
border:4px solid #a02227;
}


.right-pic{
border:7px solid #FFFFFF;
margin:10px;
margin-right:0;
}

.pic{
border:7px solid #FFFFFF;
margin:10px;
}




/* ----------------- PAGE HEADERS ----------------- */
#pagetitle{
background:url(../images/red-line.jpg) no-repeat;
width:602px;
background-position:bottom center;
margin-bottom:7px;
}

.header-welcome{
background:url(../images/header-welcome.png) no-repeat;
width:499px;
height:27px; 
text-indent:-9999px;
}

.header-employeelogin{
background:url(../pagetitles/header-employeelogin.png) no-repeat;
width:499px;
height:14px;
text-indent:-9999px;
}


.header-employeeportal{
background:url(../pagetitles/header-employeeportal.png) no-repeat;
width:499px;
height:14px;
text-indent:-9999px;
}


.header-whoweare{
background:url(../images/header-whoweare.png);
width:619px;
height:18px;
text-indent:-9999px;
}

.header-thecompany{
background:url(../pagetitles/thecompany.png) no-repeat;
height:14px;
width:315px;
text-indent:-9999px;
}

.header-ourstaff{
background:url(../pagetitles/ourstaff.png) no-repeat;
height:14px;
width:315px;
text-indent:-9999px;
}

.header-thefleet{
background:url(../pagetitles/thefleet.png) no-repeat;
height:14px;
width:315px;
text-indent:-9999px;
}

.header-photogallery{
background:url(../pagetitles/photogallery.png) no-repeat;
height:14px;
width:345px;
text-indent:-9999px;
}

.header-pipelinepatrol{
background:url(../pagetitles/pipelinepatrol.png) no-repeat;
height:14px;
width:345px;
text-indent:-9999px;
}

.header-powerlinepatrol{
background:url(../pagetitles/powerlinepatrol.png) no-repeat;
height:14px;
width:370px;
text-indent:-9999px;
}

.header-aerialphotography{
background:url(../pagetitles/aerialphotography.png) no-repeat;
height:14px;
width:400px;
text-indent:-9999px;
}

.header-photography{
background:url(../pagetitles/photography.png) no-repeat;
height:14px;
width:400px;
text-indent:-9999px;
}

.header-customservices{
background:url(../pagetitles/customservices.png) no-repeat;
height:14px;
width:370px;
text-indent:-9999px;
}

.header-scope{
background:url(../pagetitles/scope.png) no-repeat;
height:14px;
width:370px;
text-indent:-9999px;
}

.header-qualifications{
background:url(../pagetitles/qualifications.png) no-repeat;
height:14px;
width:370px;
text-indent:-9999px;
}

.header-requestestimate{
background:url(../pagetitles/requestestimate.png) no-repeat;
height:14px;
width:370px;
text-indent:-9999px;
}

.header-contactus{
background:url(../pagetitles/contactus.png) no-repeat;
height:14px;
width:370px;
text-indent:-9999px;
}

.header-careers{
background:url(../pagetitles/careers.png) no-repeat;
height:14px;
width:370px;
text-indent:-9999px;
}








/* ----------------- FOOTER ----------------- */
#footer{
margin-top:5px; 
}

#ftext{
float:left;
width:690px;
background:url(../images/footer-bar.png) no-repeat;
padding:4px 0px;
padding-left:65px;
font-size:11px;
color:#fff;
margin-top:5px;
line-height:14px;
}

#webphibian{
float:right;
padding-right:50px;
}



#captcha{
	background:#fff;
}




/* ----------------- Employee Login ----------------- */
#loginbox{
background:url(../images/admin-box.jpg);
margin:0 auto;
width:250px;
}

#logincontainer{
padding:5px 20px;
padding-top:60px;
}

#passwordcontainer{
padding:5px 20px;
}


#logintxt{
float:left;
width:80px;
font-size:14px;
font-weight:bold;
padding-top:4px;
}

#loginform{
float:left;
}

#loginform input{
width:190px;
height:17px;
font-size:14px;
}

#passwordtxt{
float:left;
width:80px;
font-size:14px;
font-weight:bold;
padding-top:4px;
}

#passwordform{
float:left;
}

#passwordform input{
width:190px;
height:17px;
font-size:14px;
}

#submitbtn{
padding:15px 36px;
text-align:right;
}

#loginsubmitbtn{
background:url(http://www.webphibian.com/standards/images/light-png.png) repeat-x;
background-color:#333;
border:1px solid #666;
color:#fff;
padding:3px 7px;
cursor:pointer;
cursor:hand;
}


#loginsubmitbtn:hover{
background-color:#666;
border:1px solid #999;
color:#fff;
}




/* ----------------- Admin Area ----------------- */
/*-----------------  A) ADMIN TABLES -----------------*/
.admin-title{
padding:10px 0px;
}

.admin-table{
border-top:1px solid #333333;
border-left:1px solid #333333;
}

.admin-table td{
border-bottom:1px solid #333333;
border-right:1px solid #333333;
padding:10px;
}

.admin-form-table{
border-top:1px solid #333333;
border-left:1px solid #333333;
}

.admin-form-table td{
border-bottom:1px solid #333333;
border-right:1px solid #333333;
padding:10px;
}

.admin-table td a{
	color:#000;
}

.admin-table td a:hover{
	color:#ff0000;
} 

.admin-form-submit{
	background:url(http://www.webphibian.com/standards/images/light-png.png) repeat-x;
background-color:#666;
color:#ffffff;
font-size:17px;
text-align:center;
font-weight:bold;
}

ul#admin-sn-nav{
	list-style:none;
	margin:0px;
	padding:0px;
	padding-bottom:10px;
}

ul#admin-sn-nav li{
	float:left;
	list-style:none;
	margin:0px;
	padding:0px;
	margin-right:20px;
}

ul#admin-sn-nav li a{
	font-weight:bold;
	font-size:14px;
	text-decoration:underline;
}

ul#admin-sn-nav li a:hover{
	color:#ff0000;
}


.admin-table-header{
background:url(http://www.webphibian.com/standards/images/light-png.png) repeat-x;
background-color:#666;
color:#ffffff;
font-size:17px;
text-align:center;
font-weight:bold;
}

.admin-field-header{
font-weight:bold;
font-size:15px;
background:#999999;
color:#FFFFFF;
}

.admin-form-label{
font-weight:bold;
}

.admin-form-submit{
text-align:center;
}






.admin-field-data, .admin-form-input, .admin-form-label{
	background:#eee;
	color:#000;
}


 


#admin-body-container{
position:relative;
z-index:20;
width:980px;
margin:0px auto;
padding-top:100px;
}

#admin-nav{
	background:url(../images/adminnav1.jpg) repeat-x;
	height:40px;
}

#welcome{
	float:left;
	padding-top:8px;
	font-size:16px;
	font-style:italic;
	padding-left:70px;
}

#admin-nav ul{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	margin-left:100px;
}

#admin-nav ul li{
	float:left;
	list-style:none;
	margin:0;
	padding:0;
}

#admin-nav ul li a{
	font-style:italic;
	display:block;
	height:32px;
	padding:0px 10px;
	padding-top:8px;
	font-size:16px;
}

#admin-nav ul li a:hover{
	background:url(../images/adminnav2.jpg) repeat-x;
}



#admin-body{
	background:url(../images/admin-bg.png);
}

#admin-article{
	padding:20px;
}

#employee-article{
	padding:20px;
}

#employee-article h1{
	font-family: "Copperplate Gothic Bold", Balker, Georgia, fantasy;
	font-style:italic;
}

#employee-article h2{
	font-family: "Copperplate Gothic Bold", Balker, Georgia, fantasy;
	font-style:italic;
}

#admin-header{
	position:relative;
	background:url(../images/admin-header.png);
	height:155px;
}

#admin-logo{
	position:absolute;
	width:327px;
	height:219px;
}


#admin-title{
	float:right;
	padding-right:60px;
	padding-top:90px;
}

#employee-title{
	float:right;
	padding-right:90px;
	padding-top:90px;
}

#admin-footer{
margin:0 auto;
margin-top:5px; 
position:relative;
z-index:20;
width:980px;
}




ul.portal-contact-list{
	list-style:none;
	margin:0px;
	padding:0px;
}

ul.portal-contact-list li{
	list-style:none;
	margin:0px;
	padding:0px;
}

.portal-contact-div{
	padding-bottom:10px;
}

.portal-contact-name{
	font-weight:bold;
	font-size:16px;
	color:#bc2b04;
}

.copperplate{
	font-family: "Copperplate Gothic Bold", Balker, Georgia, fantasy;
	font-style:italic;
}

/* ----------------- LIGHT BOX ----------------- */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #a02227; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.png) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.png) right 15% no-repeat; }

#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif; 
background-color: #a02227; 
margin: 0 auto; 
line-height: 1.4em; 
overflow: auto; 
width: 100%	; 
}

#imageData{	
color: #fff; 
padding:0 10px;
}

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }