/* 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; }

/*************************************************   TEXT   *************************************************/
a{color:#e77200; text-decoration:none; cursor:pointer}
a:hover{text-decoration:underline;}
h1,h2,h3,h4,h5,h6{color:#fff}
h1{font-size:30px}
h2{font-size:26px; margin-bottom:20px; line-height:34px}
h3{font-size:14px; margin-bottom:10px; font-weight:bold}
h4{font-weight:bold;}
p{margin-bottom:20px}
sup{color:#666; font-weight:normal; font-size:10px}
ul{margin-bottom:20px; list-style:disc outside; margin-left:30px}
ol{margin-bottom:20px; list-style:decimal outside; margin-left:20px;}
h2 a{border-bottom:1px dotted #ccc; color:#333;}
h2 a:hover {border-bottom:1px solid #999; text-decoration:none}
h3 a, h3 a:hover{color:#fff; text-decoration:none}

/*************************************************   LAYOUT   *************************************************/
html, body {font: 12px/18px "Lucida Grande", Geneva, Arial, Verdana, sans-serif; color:#b3d0e0; background:#005181 url(../images/bg_blue.jpg) no-repeat top center; }
#account{background:#0078bf; height:100px; color:#8ac1e2;}
#main{background:url(../images/bg_main.jpg) repeat-x; position:relative}
#container{width:954px; margin:0 auto;}
#header{height:101px; padding:0 30px 40px 30px; color:#333}
#footer{border-top:1px solid #266a94; padding-top:10px; color:#3a799e}
.wrap{width:942px; margin:0 auto;}
.clear{height:1px; clear:both; font-size:1px; line-height:1px;}

.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12{margin:0 30px 10px 0; display:inline; float:left;}

.column1{width:52px;}
.column2{width:134px;}
.column3{width:216px;}
.column4{width:298px;}
.column5{width:380px;}
.column6{width:462px;}
.column7{width:544px;}
.column8{width:626px;}
.column9{width:708px;}
.column10{width:790px;}
.column11{width:872px;}
.column12{width:954px;}

.last{margin-right:0}


/*************************************************   HEADER  *************************************************/
#account{display:none;}
#account a{color:#fff;}
#account-login{margin:20px 0 10px 0; color:#fff}
#account-login label{font-weight:bold;}
#account-login .textfield{width:200px; margin-right:5px; padding:5px 2px; border:solid #005990; border-width:2px 0 0 2px}
.right{float:right; text-align:right}

#logo{width:152px; height:74px; text-indent:-2000px; float:left;}
#logo a{display:block; background:url(../images/viatalk_home.jpg) no-repeat 0 0; height:74px}
#logo a:hover{text-decoration:none}
#logo a.active{display:block; background:url(../images/viatalk_home.jpg) no-repeat 0 -74px; height:74px}

#nav-top{height:27px; line-height:27px; list-style:none; display:block; margin:0;}
#nav-top li{float:right; padding-left:0px; font-weight:bold; font-size:11px}
#my-account{text-indent:-3000px}
#my-account a{width:154px; height:24px; background:url(../images/button_account.jpg) no-repeat 0 0; display:block; overflow:hidden;}
#my-account a:hover{background:url(../images/button_account.jpg) no-repeat 0 -24px;}
#ticket-click a{background:url(../images/icon_ticket_sm.gif) no-repeat 0 5px; padding-left:20px; line-height:27px; display:block; margin-right:5px}
#live-support span{background:url(../images/icon_phone_sm.gif) no-repeat 0 4px; padding-left:15px; line-height:27px; display:block; margin-right:15px}

/*************************************************   Main Navigation  *************************************************/
.nav, .nav ul {list-style:none; margin:0; padding:0;}
.nav {z-index:100; position:relative; height:40px; float:right; top:34px;}
.nav li {float:left; margin-left:10px; padding:0; position:relative; font-weight:bold; font-size:14px}
.nav li a{color:#333; height:40px; display:block; padding: 0 10px;}
.nav li a:hover {text-decoration:none; color:#007ac0;}
.nav li.active a#residential{background:url(../images/nav_active_residential.jpg) no-repeat bottom center}
.nav li.active a#business{background:url(../images/nav_active_business.jpg) no-repeat bottom center}
.nav li.active a#features{background:url(../images/nav_active_features.jpg) no-repeat bottom center}
.nav li.active a#rates{background:url(/images/nav_active_intrates.jpg) no-repeat bottom center}
.nav li.active a#support{background:url(../images/nav_active_support.jpg) no-repeat bottom center}
.nav li.active a#faq{background:url(../images/nav_active_signup.jpg) no-repeat bottom center}
#nav-one li:hover a, #nav-one li.sfHover a {color:#007ac0;}
#nav-one li:hover ul a, #nav-one li.sfHover ul a {color:#333;}
.nav ul {background:url(../images/nav_dropdown.jpg) no-repeat #fff; list-style:none; margin:0; width:212px; position:absolute; top:-999em; left:-1px; padding-top:8px; z-index:101}
.nav .active ul {/*background:url(images/nav_dropdown_active.png) no-repeat #fff;*/ list-style:none; margin:0; width:212px; position:absolute; top:-999em; left:-1px; padding-top:8px;}
.nav li:hover ul, .nav li.sfHover ul {top: 31px;}
.nav ul li {border:0; float:none; margin:0; font-size:12px}
.nav ul a, .nav .active ul a {background:url(../images/nav_dropdown_border.png) repeat-x bottom; white-space:nowrap; height:35px; line-height:35px; margin:0}
.nav ul a:hover, .nav ul li.end a:hover {background-color:#c5cdd7; color:#000;}


/*************************************************   CONTENT   *************************************************/
.feature-icon{width:50px; height:80px; float:left; margin-right:10px; text-align:center}
#vt-plans .column4{background:url(../images/bg_fade_column4.png) no-repeat top; min-height:190px; width:258px; padding:20px}
.feature-icon{width:50px; height:80px; float:left; margin-right:10px; text-align:center}
.plan-icon{width:82px; float:left; margin-right:20px; text-align:left}
.plan-info{width:156px; float:right;}
.button-download{width:242px; height:50px; background:url(../images/button_download.png) no-repeat 0 0; text-indent:-9999px; overflow:hidden; display:block}
.button-download:hover{background-position: 0 -50px; }
.button-more{width:114px; height:30px; background:url(../images/button_more.png) no-repeat 0 0; text-indent:-9999px; overflow:hidden; display:block}
.button-more:hover{background-position: 0 -30px;}
#main-heading{text-indent:-9999px; overflow:hidden; background:url(../images/main_heading.png) no-repeat; height:64px; width:626px}
#screenshots{width:231px; height:200px; position:absolute; top:54px; left:67px; z-index:100;}
.scrollable{/* required settings */ position:relative; overflow:hidden; width: 139px; height:200px;}
/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items{/* this cannot be too large */width:20000em; position:absolute; clear:both;}
/* single scrollable item */
.scrollable img{float:left; margin:0; width:139px; height:200px;}
/* active item */
.scrollable .active{z-index:9999; position:relative;}
.navi{bottom:4px; left:34px; position:absolute; z-index:200; width:70px; height:14px;}
/* items inside navigator */
.navi a{width:8px; height:8px; float:left; margin:3px; background:url(../images/navigator.png) 0 0 no-repeat; display:block; font-size:1px;}
/* mouseover state */
.navi a:hover{background-position:0 -8px;}
/* active state (current page state) */
.navi a.active{background-position:0 -16px;}
/* this makes it possible to add next button beside scrollable*/
.scrollable{float:left;} 
/* prev, next, prevPage and nextPage buttons*/
a.browse{background:url(../images/next_prev.png) no-repeat; display:block; width:26px; height:26px; float:left; margin:86px 20px; cursor:pointer; font-size:1px;} 
/* right */
a.right{background-position: 0 -26px; clear:right; margin-right: 0px;}
a.left{margin-left: 0px;} 
/* disabled navigational button */
a.disabled{visibility:hidden !important;} 	

#faq-nav, #questions{margin:0; padding:0; list-style:none; border-top:1px solid #266a94}
#faq-nav li, #questions li{padding:10px 0; border-bottom:1px solid #266a94}
.ticket label{float:left; width:100px; margin:0 20px 0 0; padding:0; height:30px; line-height:30px; text-align:right}
.ticket .text-field{width:250px; margin:0; padding:0; padding:5px 0}
.ticket .text-area{width:335px; margin:0; padding:0; padding:5px 0; height:120px}
.ticket .form-row{margin-bottom:10px; clear:both;}
.ticket .form-send{width:114px; height:30px; background:url(../images/button_send.png) no-repeat; overflow:hidden; text-indent:-999px; border:none; padding:0; margin:0 0 0 120px; cursor:pointer}
.ticket .form-send:hover{background:url(../images/button_send.png) no-repeat 0 -30px}
/*************************************************   FOOTER   *************************************************/

.nav-footer{margin-bottom:10px; text-align:center}
#footer a{color:#6697b3;}
#footer a:hover{color:#fff; text-decoration:none}