﻿/*master reset*/

*{
margin:0;
padding:0;
}

ul li{
list-style:none;
}

img{
border:0;
}

h1, h2, h3, h4{
font-weight: bold;
padding-bottom: 0.5em;
}

p{
padding-bottom: 1em;
}

h6{
font-size:1em;
}

h5{
font-size:1.1em;
}

h4{
font-size:1.2em;
}

h3{
font-size:1.3em;
}

h2{
font-size:1.4em;
}

h1{
font-size:1.6em;
}

a:link, a:visited, a:hover, a:active{
color:#0345a3;
}

ul{
margin-bottom:10px;
}

/*special reset*/

table.form td{
text-align:left;
padding:5px 5px 0 5px;
vertical-align:top;
}

table.normal{
border-color:#cccccc;
margin-bottom:10px;
}

table.normal td, table.normal th{
padding:2px;
padding-left:5px;
border-color:#cccccc;
}

table.normal tr{
background:#fff9f1;
}

table.normal tr.altrow{
background:#fff4e5;
}

table.normal tr.over{
background:#faf0cd;
}

th{
font-weight:bold;
font-size:1.1em;
line-height:24px;
background:#2e2e2e;
color:White;
}

td, th{
text-align:center;
}

td.align-left, th.align-left{
text-align:left;
}

/*reusable class*/

.wrap{
width:960px;
margin:0 auto;
}

.twocolumns .col{
float:left;
width:50%;
}

.threecolumns .col{
float:left;
width:32%;
margin:0 1%;
}

* .col.first{
margin-left:0;
}

* .col.last{
margin-right:0;
}

.clear{
clear:both;
}

li.clear{
height:1px !important;
overflow:hidden !important;
margin:0 !important;
padding:0 !important;
}

.float-left{
float:left;
}

img.float-left{
margin-right:10px;
}

#maincontent img.screenshot{
margin:20px 0;
margin-left:130px;
}

ul.threepoints li{
background: transparent url(images/bullet-3points.gif) no-repeat left 0px;
padding-left: 16px;
}

ul.threepoints.height24 li{
background: transparent url(images/bullet-3points.gif) no-repeat left 8px;
}

ul.plusmarks li{
background: transparent url(images/bullet-plus.png) no-repeat left 3px;
padding-left: 20px;
}

ul.checkmarks li{
background: transparent url(images/bullet-checkmarks.png) no-repeat left top;
padding-left: 20px;
}

ul.checkmarks.height24 li{
background-position: left 3px;
}

.height24{
line-height:24px;
}

/*template*/

body{
font:12px/18px Arial, Helvetica, sans-serif;
color:101010;
}

#header{
height:125px;
background:#2e2e2e url(images/bgheader.png) repeat-x left top;
}

#head-top{
height:85px;
}

#logo{
margin-top:10px;
float:left;
}

#top-nav{
float:right;
margin-top:10px;
}

#top-nav li{
float:left;
margin-left:10px;
}

#content .wrap{
padding:20px 0 10px;
}

#banner{
height:250px;
background:#fe8f01 url(images/bgbanner.jpg) no-repeat center top;
color:#fefefe;
}

#banner .wrap{
padding:0;
position:relative;
overflow:hidden;
}

#banner-slider{
width:9999px;
overflow:auto;
}

#banner .slider li{
height:180px;
width:960px;
float:left;
}

#banner h1{
padding-top:10px;
font-size:36px;
font-weight:normal;
line-height:36px;
}

#banner .desc{
font-size:18px;
line-height:24px;
font-weight:normal;
width:510px;
}

#slide-control{
position:absolute;
left:40%;
bottom:5px;
}

#slide-control li{
float:left;
padding:1px 6px;
border:#fe7c00 solid 1px;
background:white;
font-weight:bold;
color:#b05b0c;
margin:0 3px;
cursor:pointer;
}

#slide-control li.jFlowSelected{
background:#feab41;
}

#maincontent{
width: 690px;
float: left;
padding: 0 10px;
}

.sidecontent{
width: 230px;
float: right;
padding: 0 10px;
}

.panel{
padding: 10px;
margin-bottom: 10px;
}

#server-tech{
height: 40px;
}

#server-tech .col{
float: left;
overflow: hidden;
}

#server-tech .col.last{
border: none;
}

#footer{
background:white url(images/bgfooter.png) repeat-x;
border-top:#d3d2d2 solid 1px;
text-align:center;
font-size:11px;
line-height:24px;
}

#foot-container{
text-align:left;
width:960px;
margin:0 auto;
padding-top:10px;
}

#footer #services{
width:340px;
float:left;
}

#footer #support{
width:175px;
float:left;
}

#footer #about{
width:175px;
float:left;
background:transparent url(images/footer-divider.png) no-repeat 90% top;
}

#footer #extra{
float:right;
width:265px;
}

#footer h3{
float:left;
width:100%;
font-size:14px;
font-weight:bold;
}

#footer .col{
width:165px;
float:left;
}

#footer .col li{
list-style:none;
padding-left:10px;
background:transparent url(images/bullet-3points.gif) no-repeat left 50%;
}

#footer #copyright{
padding-top:15px;
padding-bottom:15px;
}

#footer #copyright .validated{
background:white;
padding-left:20px;
background:transparent url(images/bullet-checkmark.png) no-repeat left 1px;
margin-left:10px;
}

/*current page control*/

.home #nav-home a, .domain #nav-domain a, .webhost #nav-webhost a,
.reseller #nav-reseller a, .services #nav-services a, .about #nav-about a, 
.contact #nav-contact a{
background:#ff7d05;
}

#navigation li a:hover{
background:#ff9e03;
}

/*tab styling*/

.pagetab{
display: block;
width: 100%;
height: 28px;
margin-bottom: 0;
}

.tabcontent{
padding: 10px;
padding-top: 20px;
border: #d7d7d7 solid 1px;
background: white url(images/bgsidecontent.png) repeat-x scroll left top;
}

.pagetab li{
float: left;
margin-right:10px;
}

.pagetab li a{
float: left;
display: block;
padding-right: 10px;
background: transparent url(images/bgtabs.png) no-repeat right -90px;
}

.pagetab li a, .pagetab li a:link, .pagetab li a:visited{
color: #333333;
text-decoration: none;
}

.pagetab li a span{
float: left;
display: block;
padding: 6px 0;
padding-left: 10px;
background: transparent url(images/bgtabs.png) no-repeat left -60px;
}

.pagetab li.current a{
background: transparent url(images/bgtabs.png) no-repeat right -30px;
}

.pagetab li.current a span{
background: transparent url(images/bgtabs.png) no-repeat left top;
}

.pagetab li a:hover{
background: transparent url(images/bgtabs.png) no-repeat right -150px;
}

.pagetab li a:hover span{
background: transparent url(images/bgtabs.png) no-repeat left -120px;
color: white;
}

/*block overview*/

.block-overview .list-overview{
border-bottom: #cccccc solid 1px;
margin-bottom: 20px;
padding-bottom: 20px;
}

.block-overview .img-overview{
float: left;
width: 270px;
}

.block-overview .content-overview{
float: left;
width: 380px;
margin-left: 10px;
}

.home.block-overview .img-overview{
width: auto;
}

.home.block-overview .content-overview{
width: 590px;
}

#plan-list, .home.block-overview{
border-bottom:#d7d7d7 solid 1px;
padding-bottom:0.5em;
margin-bottom:1em;
}

#plan-list, .threecolumns.divider{
background:url(images/3cols-divider.png) no-repeat left -10px;
}

#plan-list .clear{
height:1px;
}

.planbox{
position:relative;
height:300px;
}

.planbox img{
position:absolute;
top:265px;
left:65px;
}



/*faq control*/

.faq-list li{
border-bottom:#cccccc solid 1px;
margin-bottom:1em;
}

.faq-list .question{
padding-left:20px;
background:transparent url(images/q-icon.gif) no-repeat left 3px;
}

.faq-list .answer{
padding-left:20px;
background:transparent url(images/a-icon.gif) no-repeat left 3px;
}

/*side content style*/

.sidecontent .panel{
background:white url(images/bgsidecontent.png) repeat-x top left;
border:#d7d7d7 solid 1px;
}

.panel-img{
margin-bottom:10px;
}

/*webdesign page*/
#wdbox{
width:668px;
margin:0 auto 1em;
}

#wdbox-head{
height:114px;
position:relative;
background:transparent url(images/webdesign/bgwdbox-head.png) no-repeat left top;
}

#wdbox-head h2{
position:absolute;
left:130px;
top:30px;
font-size:40px;
color:#454545;
}

#wdbox #wd-design a{
background:transparent url(images/webdesign/icon-wdtab.png) no-repeat 5px top;
}

#wdbox #wd-cms a{
background:transparent url(images/webdesign/icon-wdtab.png) no-repeat 5px -34px;
}

#wdbox #wd-blog a{
background:transparent url(images/webdesign/icon-wdtab.png) no-repeat 5px -68px;
}

#wdbox #wd-ecom a{
background:transparent url(images/webdesign/icon-wdtab.png) no-repeat 5px -102px;
}

#wdbox-icon{
position:absolute;
left:15px;
top:10px;
}

#wdtab{
position:absolute;
left:120px;
bottom:0px;
margin:0;
}

#wdtab li{
float:left;
}

#wdtab li a{
float:left;
display:block;
padding:6px 20px 8px;
padding-left:30px;
cursor:pointer;
}

#wdtab li.current{
background:white url(images/webdesign/bgwdtab-current.png) repeat-x left top;
border-left:#d7d7d7 solid 1px;
border-right:#d7d7d7 solid 1px;
}

#wdbox-content{
padding:10px;
}

.wdtable td{
padding-top:20px;
}

#wdbox a.ordernow{
display:block;
text-align:center;
background:white url(images/webdesign/bgwdbox-panel.png) no-repeat center top;
}

/*portfo slider*/

.portfo-parent-slider{
background:url(images/webdesign/bgportfo.jpg) no-repeat left top;
overflow:hidden;
width:334px;
}

.portfo-slider{
width:2222px;
}

.portfo-slider li{
float:left;
width:334px;
text-align:center;
}

.portfo-control{
display:none;
}

.img-livechat{
padding:1px;
background:#fd9101;
margin-bottom:1em;
}

/*sub menu */

#navigation {
height:40px;
position:relative;
z-index:100;
}

#navigation ul{
margin:0;
}

#navigation ul ul {
width:149px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#navigation li {
float:left;
position:relative;
}
/* style the links for the top level */
#navigation a, #navigation a:visited {
display:block;
text-decoration:none;
font-weight:bold;
padding:11px 15px;
text-transform:uppercase;
}

#navigation a, #navigation a:link, #navigation a:visited{
color:white;
}
/* style the second level background */
#navigation ul ul a.drop, #navigation ul ul a.drop:visited {
background:#d16e12;
}
/* style the second level hover */
#navigation ul ul a.drop:hover,
#navigation ul ul :hover > a.drop {
background:#ff9e03;
border:1px solid #d16e12;
}
/* style the third level background */
#navigation ul ul ul a, #navigation ul ul ul a:visited {
background:#b05b0c;
}
/* style the third level hover */
#navigation ul ul ul a:hover {
background:#ff9e03;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
#navigation ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:149px;
border-top:1px solid #d16e12;
}
/* another hack for IE5.5 */
* html #navigation ul ul {
top:30px;
t\op:31px;
}
/* position the third level flyout menu */
#navigation ul ul ul {
left:149px;
top:-1px;
width:149px;
}
/* position the third level flyout menu for a left flyout */
#navigation ul ul ul.left {
left:-149px;
}
/* style the table so that it takes no part in the layout - required for IE to work */
#navigation table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}

#navigation li li li{
text-align:center;
}
/* style the second level links */
#navigation ul ul a, #navigation ul ul a:visited {
background:#b05b0c;
height:auto;
padding:5px 10px;
width:128px;
}
/* yet another hack for IE5.5 */
* html #navigation ul ul a, * html #navigation ul ul a:visited {
width:150px;
w\idth:128px;
}
/* style the top level hover */
#navigation a:hover, #navigation ul ul a:hover {
background:#ff9e03;
}
#navigation :hover > a, #navigation ul ul :hover > a {
background:#ff9e03;
}
/* make the second level visible when hover on first level list OR link */
#navigation ul li:hover ul, #navigation ul a:hover ul {
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
#navigation ul :hover ul ul {
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
#navigation ul :hover ul :hover ul {
visibility:visible;
}

/* bottom columns rawr! */

h2#software-installer, h2#cpanel-feature, h2#dnp-feature{
background:url(images/icon-install.png) no-repeat left top;
padding:10px 0 10px 50px;
margin-bottom:5px;
}

h2#cpanel-feature{
background:url(images/icon-cpanel.png) no-repeat left top;
}

h2#dnp-feature{
background:url(images/icon-dnp.png) no-repeat left top;
}

/*====================*/

.blogControl h3
{
    text-align:left;
}

.blogControl h3 a
{
    font-size:12px;
    text-decoration:none;
}

.blogControl td
{
    text-align:left;
}

/*===============*/
.pagesContent
{
    width:710px;
}


/*===============*/
#portfolio
{
	width:690px;
	height:100px;
	padding:0 20px;
	margin-top : 30px;
}

#portfolio ul
{
	width:650px;
	height:100px;
}

#portfolio ul li
{
	float:left;
	height:100px;
	width:130px;
}

#portfolio h2
{
	text-align : center;
	margin-bottom : 20px;
	
}