/* CSS Document */

/*************************************************   RESET   *************************************************/
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,em,strong,th {font-size: 1em; font-weight: normal; font-style: normal;}
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

/* IE PNG FIX 
* { behavior: url(iepngfix/iepngfix.htc) }*/

/*************************************************   TEXT   *************************************************/
h1{font-size:24px; margin-bottom:10px; line-height:normal}
h2{font-size:24px; margin:30px 0 10px 0; line-height:normal}
/*h2{font-weight:bold; margin-bottom:5px; font-size:14px; margin:40px 0 10px 0}*/
h3{font-size:14px; font-weight:bold; font-size:14px; margin-bottom:10px}
a{cursor:pointer; text-decoration:none; color:#008fd4; }
a:hover{text-decoration:underline;}
p{margin-bottom:20px}
strong{color:#999;}

form{margin-bottom:20px}
form div{margin-bottom:10px}
form label{width:190px; float:left; padding:4px 0}
form ul{width:250px; float:left;}
form ul label{float:none; width:auto; margin-left:10px; padding:0}
form ul li{margin-bottom:5px}
form span{color:#999}

/*************************************************   LAYOUT   *************************************************/
html, body {font: 12px/18px "Lucida Grande", Geneva, Arial, Verdana, sans-serif; color:#333; background:url(../images/bg_body.gif) repeat-x #d5d9db;}
#container{width:960px; margin:0 auto;}
#header{height:70px; padding:30px 20px 0 20px;}
#content{background-color:#FFF;}
#footer{background:url(../images/content_bottom_home.gif) no-repeat top; padding:20px 20px 0 20px; margin-bottom:20px; color:#65818f; font-size:11px}
.clear{height:1px; clear:both; font-size:1px; line-height:1px}
.left{float:left; width:679px; padding:0 20px; border-right:1px solid #dedede;}
.left-portfolio{float:left; width:688px;}
.left-home{float:left; width:719px; padding:0; border-right:1px solid #dedede;}
.right{float:left; width:200px; padding:0 20px}
.right-portfolio{float:left; width:251px; background:url(../images/portfolio_border.gif) repeat-y}


/*************************************************   HEADER  *************************************************/
#logo a{background:url(../images/apagio_logo.gif) no-repeat; text-indent:-2000px; display:block; float:left; width:156px; height:62px;}

#nav{float:right; height:23px; line-height:23px; margin-top:26px}
#nav li{float:left; margin:0 2px; height:23px; line-height:23px}
#nav #nav-login {margin:0 1px; padding-left:3px; border-left:1px solid #ccc}
#nav #nav-login a:hover{color:#fff; background:url(../images/nav_left2.gif) no-repeat left -46px;}
#nav #nav-login a:hover span{background:url(../images/nav_right2.gif) no-repeat right -46px;}
#nav #nav-contact a{color:#008fd4; font-size:14px; font-weight:bold; padding:0 0 0 10px; line-height:23px; height:23px}
#nav #nav-contact:hover a{color:#333; background:none;}
#nav li a{font-size:14px; font-weight:bold; text-decoration:none; color:#333; padding:0 0 0 10px; height:23px; line-height:23px; display:block;}
#nav li a span{padding:0 10px 0 0; display:block;}
#nav li a:hover{background:url(../images/nav_left2.gif) no-repeat left 0px;}
#nav li a:hover span{background:url(../images/nav_right2.gif) no-repeat right 0px;}
#nav li a.active{color:#fff; background:url(../images/nav_left2.gif) no-repeat left -23px;}
#nav li a.active span{background:url(../images/nav_right2.gif) no-repeat right -23px;}

/*************************************************   CONTENT   *************************************************/
.page-nav{height:60px; width:100%; background:url(../images/page_nav.gif) repeat-x; margin-bottom:20px; font-family:Geneva, Arial, Verdana, sans-serif;}
.page-nav li{float:left; width:238px; background:url(../images/page_nav_break.gif) no-repeat top right; padding-right:2px}
.page-nav li a{display:block; line-height:60px; color:#fff; font-weight:bold; font-size:14px; padding:0 20px; height:70px; text-decoration:none;}
.page-nav li a:hover{background:url(../images/page_nav_hover.gif) repeat-x top;}
.page-nav li a.active{background:url(../images/page_nav_active.gif) no-repeat bottom center;}
.page-nav li#free-quote{background:none;}
.page-nav li#free-quote a{display:block; line-height:45px; color:#fff; font-weight:bold; font-size:14px; padding:0 20px; background:url(../images/page_nav_quote.gif) no-repeat 0 0; height:45px; padding:0 0 0 20px; margin:7px 20px 0 20px}
.page-nav li#free-quote a:hover{background:url(../images/page_nav_quote.gif) no-repeat 0 -45px;}
.page-nav li#free-quote a span{background:url(../images/bul_arrow1.gif) no-repeat center right; padding-right:15px}
.page-nav li#heading{float:left; width:718px; background:url(../images/page_nav_break.gif) no-repeat top right; padding-right:2px}
.page-nav li h1{display:block; line-height:60px; color:#fff; padding:0 20px; margin-bottom:0;}

.services h1{background:url(../images/services.gif) no-repeat; text-indent:-1000px; margin-left:20px;}
.portfolio h1{background:url(../images/portfolio.gif) no-repeat; text-indent:-1000px; margin-left:20px;}
.quote h1{background:url(../images/quote.gif) no-repeat; text-indent:-1000px; margin-left:20px;}
.contact h1{background:url(../images/contact.gif) no-repeat; text-indent:-1000px; margin-left:20px;}
.about h1{background:url(../images/about.gif) no-repeat; text-indent:-1000px; margin-left:20px;}
.sitemap h1{background:url(../images/sitemap.gif) no-repeat; text-indent:-1000px; margin-left:20px;}
.terms h1{background:url(../images/terms.gif) no-repeat; text-indent:-1000px; margin-left:20px;}
.privacy h1{background:url(../images/privacy.gif) no-repeat; text-indent:-1000px; margin-left:20px;}

#testimonial{background:url(../images/blockquote_top.gif) no-repeat top; padding-top:10px; margin:0px 0 20px 0}
#testimonial blockquote{background:url(../images/blockquote_bottom.gif) no-repeat bottom; padding:10px 0 20px 0; font-size:16px; font-weight:bold; line-height:22px; color:#003f5d}
#testimonial p{padding:0 20px}
#testimonial b{display:block;}

.package-features{width:370px; padding-bottom:30px}
.package-features li{clear:both;}
.feature-icon{width:50px; margin:0 20px 30px 0; float:left;}

#service-list{margin-top:20px}
#service-list li{float:left; width:319px; margin:0 40px 20px 0}

.learnmore{width:150px; height:35px; background:url(../images/button_learnmore.gif) no-repeat 0 0; display:block; text-indent:-1000px}
.learnmore:hover{background:url(../images/button_learnmore.gif) no-repeat 0 -35px;}
.viewportfolio{width:150px; height:35px; background:url(../images/button_portfolio.gif) no-repeat 0 0; display:block; text-indent:-1000px}
.viewportfolio:hover{background:url(../images/button_portfolio.gif) no-repeat 0 -35px;}


#nav-portfolio ul {margin:30px 0 20px;}
#nav-portfolio ul li {display:block; margin:-8px 0 0; padding:0 0 1px; background:url(../images/poortfolio_nav.gif) no-repeat bottom right}
#nav-portfolio ul li.end {background:none; }
#nav-portfolio ul li a {display:block; margin:0; padding:10px 0 10px 51px; color:#444; text-decoration:none; outline:none; position:relative;}
#nav-portfolio ul li a:hover {color:#008fd4;}

#nav-portfolio ul li.active {background:none;}
#nav-portfolio ul li.active a {color:#333; font-weight:bold; background:url(../images/portfolio_nav_active.gif) no-repeat 0 50%; }

#intro{background:url(../images/header_inside2.jpg) no-repeat bottom; height:184px;}
#intro h1{text-indent:-2000px;}


.portfolio-item{text-align:center; width:208px; float:left; margin-left:20px}
.portfolio-item a {display:block; border:1px solid #dedede; margin-bottom:10px}
.portfolio-item a img{width:206px; height:155px;}
.portfolio-item p{font-weight:bold; color:#666666}
.portfolio-item p a{border:none; font-weight:normal;}

.textfield, .textarea{width:250px; border:1px solid #e5e2e2; border-top:1px solid #8c8c8c; padding:4px 2px; background:#f9f9f9;}
.textarea{height:100px}
.select{width:255px; border:1px solid #e5e2e2; border-top:1px solid #8c8c8c; padding:4px 2px; background:#f9f9f9;}
.checkbox{border:1px solid #e5e2e2; border-top:1px solid #8c8c8c;}
.submit{width:100px; height:35px; background:url(../images/button_send.gif) no-repeat 0 0; display:block; text-indent:-1000px; border:none; cursor:pointer; margin-left:190px}
.submit:hover{background:url(../images/button_send.gif) no-repeat 0 -35px;}

#contact, #quote{float:left; width:480px}

.right-image{float:right; margin:10px 0 2px 20px;}

.main-list{margin:20px}
.main-list li{margin:0 0 5px 5px; list-style:outside disc;}

.top{margin-top:10px;}

#sitemap-list a{color:#333;}
#sitemap-list li ul{margin-left:10px; margin-bottom:10px}
#sitemap-list li ul li{margin-left:10px; margin-bottom:10px; list-style:inside disc; margin-bottom:2px}
#sitemap-list #float-left{width:50%; float:left;}

.p-list li{margin:0 0 20px 0}

.bubbleInfo {position: relative;}
.trigger{float:right; width:14px; height:14px; display:block;}
.popup {position: absolute; display: none; width:270px;}
.popup-top{height:10px; background:url(../images/popup-top.png) no-repeat bottom; margin-bottom:0}
.popup-bot{background:url(../images/popup.png) no-repeat bottom left; padding:5px 10px 25px 10px;}



/*************************************************   HOMEPAGE   *************************************************/
.swap{padding:10px 20px 0 20px;}
#home-webdesign{background:url(../images/webdesign_home.jpg) no-repeat bottom right}
#home-ecommerce{background:url(../images/ecommerce_home2.jpg) no-repeat bottom right}
#home-seo{background:url(../images/seo_home2.jpg) no-repeat bottom right}
.home .page-nav{height:70px; margin-bottom:10px}
.home h2{margin-top:0}
.home h3{margin-bottom:5px}
.home #content{background:url(../images/content_bottom_home.gif) no-repeat bottom #fff;}
.home #footer{background:none; padding:20px 20px 0 20px; margin-bottom:20px; color:#65818f; font-size:11px}
#flash-home{background:none;}

/*************************************************   FOOTER   *************************************************/