/* CSS Document */ /* --------------------------------------------- 01. MAIN/DEFAULT ELEMENTS --------------------------------------------- */ body { margin:0; padding:0; font-family: Arial, verdana, sans-serif; font-size:10px; line-height:1.4em} p { font-size:12px; margin:0; padding:0; line-height:1.4em; font-weight:normal; color:#8B8C8F; padding-bottom:10px} p a:link, p a:visited { color:#174A9E; text-decoration:none} p a:hover { color:#174A9E; text-decoration: underline} h1 { font-size:20px; margin:0; padding:0; line-height:1.4em; font-weight:normal; color:#0093D3} h2 { font-size:16px; margin:0; padding:0; line-height:1.4em; font-weight: bold; color:#0093D3} h3 { font-size:14px; margin:0; padding:0; line-height:1.4em; font-weight: bold; color:#174A9E} table.feature { background: #f9f9f9; border-collapse:collapse; border-spacing:0; border: 1px solid #eee; margin: 0 0 18px 0; } /* --------------------------------------------- 02. WRAPPER --------------------------------------------- */ #wrapper { width:930px; margin:0 auto} /* --------------------------------------------- 03. BLUEBAR --------------------------------------------- */ #bluebar { width:900px; height:25px; background:#0093D3 url(../images/bg_topbar.gif) no-repeat bottom center; text-align:right; padding-right:30px; padding-top:5px} /* --------------------------------------------- 04. TOPBAR --------------------------------------------- */ #topbar { width:930px; height:106px; float:left} /* --------------------------------------------- 04.1 TOPBAR - LOGO --------------------------------------------- */ #topbar #logo { float:left; padding-top:12px} /* --------------------------------------------- 04.2 TOPBAR - NAVIGATION --------------------------------------------- */ #topbar #nav { width:617px; height:50px; float: right; margin-top:12px; background:url(../images/divider.gif) no-repeat top left; padding-top:30px; padding-left:3px} #nav ul {display:inline;} #nav li {display:inline;} #nav li a {float: left;} #nav a#aboutus {width: 70px;height: 25px;background: url(../images/nav_aboutus.gif);background-position: 0 0;} #nav a:hover#aboutus {width: 70px;height: 25px;background: url(../images/nav_aboutus_hover.gif);background-position: 0 0;} #nav a#aboutus_selected {width: 70px;height: 25px;background: url(../images/nav_aboutus_hover.gif);background-position: 0 0;} #nav a#comparephones {width:115px;height: 25px;background: url(../images/nav_comparephones.gif);background-position: 0 0;} #nav a:hover#comparephones {width:115px;height: 25px;background: url(../images/nav_comparephones_hover.gif);background-position: 0 0;} #nav a#comparephones_selected {width: 115px;height: 25px;background: url(../images/nav_comparephones_hover.gif);background-position: 0 0;} #nav a#publicpayphones {width:120px;height: 25px;background: url(../images/nav_publicpayphones.gif);background-position: 0 0;} #nav a:hover#publicpayphones {width:120px;height: 25px;background: url(../images/nav_publicpayphones_hover.gif);background-position: 0 0;} #nav a#publicpayphones_selected {width: 120px;height: 25px;background: url(../images/nav_publicpayphones_hover.gif);background-position: 0 0;} #nav a#clients {width:65px;height: 25px;background: url(../images/nav_clients.gif);background-position: 0 0;} #nav a:hover#clients {width:65px;height: 25px;background: url(../images/nav_clients_hover.gif);background-position: 0 0;} #nav a#clients_selected {width:65px;height: 25px;background: url(../images/nav_clients_hover.gif);background-position: 0 0;} #nav a#service {width:120px;height: 25px;background: url(../images/nav_servicerepairs.gif);background-position: 0 0;} #nav a:hover#service {width:120px;height: 25px;background: url(../images/nav_servicerepairs_hover.gif);background-position: 0 0;} #nav a#service_selected {width:120px;height: 25px;background: url(../images/nav_servicerepairs_hover.gif);background-position: 0 0;} #nav a#faq {width:50px;height: 25px;background: url(../images/nav_faq.gif);background-position: 0 0;} #nav a:hover#faq {width:50px;height: 25px;background: url(../images/nav_faq_hover.gif);background-position: 0 0;} #nav a#faq_selected {width:50px;height: 25px;background: url(../images/nav_faq_hover.gif);background-position: 0 0;} #nav a#contactus {width:74px;height: 25px;background: url(../images/nav_contactus.gif);background-position: 0 0;} #nav a:hover#contactus {width:74px;height: 25px;background: url(../images/nav_contactus_hover.gif);background-position: 0 0;} #nav a#contactus_selected {width:74px;height: 25px;background: url(../images/nav_contactus_hover.gif);background-position: 0 0;} /* --------------------------------------------- 05. HEADER IMAGE --------------------------------------------- */ #header { width:930px; float:left;} #header .img_header { width:930px; float:left; } #header .caption_header { width:560px; height:100px; margin-top:-100px; padding-right:35px; float: right;} /* --------------------------------------------- 06. HEADER- BLUE BAR --------------------------------------------- */ #header_bluebar { width:910px; height:68px; background:url(../images/header_bluebar.gif) no-repeat; margin:0; padding:0; float:left; position:relative; padding:10px} #header_bluebar .didyouknow { width:300px; float:left} #header_bluebar .benefits {width:295px; float:left; padding-left:15px} #header_bluebar .upgrade { float:left; padding-left:15px} /* --------------------------------------------- 07. LATEST NEWS BAR --------------------------------------------- */ #latestnews { width:810px; height:23px; float:left; background:url(../images/bg_latestnews.gif) no-repeat top center; margin-top:25px; padding-left:105px; padding-top:7px; padding-right:15px; margin-bottom:20px} #latestnews p { color:#174A9E} #latestnews p a:link, #latestnews p a:visited { color:#174A9E; text-decoration:none} #latestnews p a:hover { color:#174A9E; text-decoration: underline} /* --------------------------------------------- 08. CONTENT --------------------------------------------- */ #content { width:930px; float:left; padding-bottom:50px} /* --------------------------------------------- 09. CONTENT - PANEL 1 --------------------------------------------- */ #panel-1 { width:305px; float:left; margin-right:15px} #panel-1 p { padding-left:10px; padding-right:20px} #panel-1 h1 { width:305px; border-bottom:1px solid #CCCCCC; padding-bottom:5px} #panel-1 .img_phone { width:305px; height:178px; padding-top:10px} /* --------------------------------------------- 10. CONTENT - PANEL 2 --------------------------------------------- */ #panel-2 { width:300px; float:left; padding-right:16px} #panel-2 p { padding-left:10px; padding-right:10px} #panel-2 h1 { width:290px; border-bottom:1px solid #CCCCCC; padding-bottom:5px; padding-left:10px} #panel-2 h2 { padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:2px} #panel-2 .divider { border-bottom:1px solid #CCCCCC;} /* --------------------------------------------- 11. CONTENT - PANEL 3 --------------------------------------------- */ #panel-3 { width:291px; float: left} /* --------------------------------------------- 11.1 CONTENT - PANEL 3 - OUR CLIENTS --------------------------------------------- */ #panel-3 .ourclients { width:291px; background:#3C3E40 url(../images/bg_ourclients.gif) no-repeat top left; padding-top:40px} #panel-3 .border_ourclients { width:291px; height:13px; background:url(../images/border_ourclients.gif) no-repeat top left} #panel-3 .logo_client { margin:0; padding:0; text-align:center} /* --------------------------------------------- 11.2 CONTENT - PANEL 3 - GREY BOX --------------------------------------------- */ #panel-3 .greybox{ width:269px; border:1px solid #CCCCCC; border-bottom:none; background:url(../images/greybox_bg.gif) repeat-x bottom; margin-top:10px; padding-top:10px; padding-left:10px; padding-right:10px} #panel-3 .greybox_bottom { width:291px; background:url(../images/greybox_bottom.gif) no-repeat top left; height:14px} /* --------------------------------------------- 11.3 CONTENT - PANEL 3 - HOW DO I --------------------------------------------- */ #panel-3 .howdoi { width:291px;} #panel-3 .img_howdoi {padding-bottom:10px} #panel-3 .howdoi fieldset { width:269px; border:none; background:none; margin:0; padding:0; padding-bottom:5px} #panel-3 .howdoi fieldset .list_changemyphone { width:238px; float:left; border: 1px solid #8199B1; padding:2px} #panel-3 .howdoi fieldset .button_go {float: right;} /* --------------------------------------------- 11.4 CONTENT - PANEL 3 - SIGNUP --------------------------------------------- */ #panel-3 .signup_enews { width:291px;} #panel-3 .img_singup { padding-bottom:10px} #panel-3 .signup_enews fieldset { width:269px; border:none; background:none; margin:0; padding:0;padding-bottom:5px} #panel-3 .signup_enews fieldset .input { width:230px; float:left; border: 1px solid #8199B1; padding:2px; margin-bottom:3px} #panel-3 .signup_enews fieldset .button_go {float: right;} /* --------------------------------------------- 13. MISCELLANEOUS STYLES --------------------------------------------- */ img { border:none} /* --------------------------------------------- 14. INNERPAGE- ABOUT US --------------------------------------------- */ #header .img_header_aboutus { width:930px; height:130px; margin:0; padding:0} #inner-panel-1 { width:278px; float: left; margin-right:25px} #inner-panel-1 .greybox { width:256px; border:1px solid #CCCCCC; border-bottom:none; background:url(../images/greybox_bg.gif) repeat-x bottom; margin-top:10px; padding-top:10px; padding-left:10px; padding-right:10px} #inner-panel-1 .greybox_bottom { width:278px; background:url(../images/innergreybox_bottom.gif) no-repeat top left; height:14px} #inner-panel-1 .howdoi { width:278px;} #inner-panel-1 .img_howdoi {padding-bottom:10px} #inner-panel-1 .howdoi fieldset { width:249px; border:none; background:none; margin:0; padding:0; padding-bottom:5px} #inner-panel-1 .howdoi fieldset .list_changemyphone { width:218px; float:left; border: 1px solid #8199B1; padding:2px} #inner-panel-1 .howdoi fieldset .button_go {float: right;} #inner-panel-1 .img_singup { padding-bottom:10px} #inner-panel-1 .signup_enews fieldset { width:249px; border:none; background:none; margin:0; padding:0;padding-bottom:5px} #inner-panel-1 .signup_enews fieldset .input { width:212px; float:left; border: 1px solid #8199B1; padding:2px; margin-bottom:3px} #inner-panel-1 .signup_enews fieldset .button_go {float: right;} #sidenav {width:277px; font-size:14px; color: #8B8C8F; background:url(../images/bg_sidebar.gif) no-repeat bottom} #sidenav ul { list-style:none; margin:0; padding:0; padding-bottom:10px;} #sidenav li {margin: 0; width:276px; border-bottom:1px solid #CCCCCC} #sidenav li a {display: block;padding: 6px 5px 6px 25px;color: #8B8C8F; text-decoration: none; margin-left:50px} #sidenav li a:hover {color: #0093D3; background: url(../images/icon_arrow.gif) no-repeat top left} #sidenav li a.selected {color: #0093D3; background: url(../images/icon_arrow.gif) no-repeat top left} #sidenav .noborder { border-bottom:none;} #inner-panel-2 { width:600px; float: left; margin-right:20px; margin-top:30px} #inner-panel-2 .heading { margin:0; padding:0; padding-bottom:10px} #inner-panel-2 p { font-size:14px; margin:0; padding:0; padding-bottom:10px} #boxfooter { width:928px; float:left;} #boxfooter .greybox { width:908px; background:#E4E4E4 url(../images/greybox.gif) no-repeat top left; padding-top:10px; padding-left:10px; padding-right:10px} #boxfooter .greybox_bottom { width:928px; background:url(../images/greyboxbig_bottom.gif) no-repeat top left; height:20px;} .boxfooter p a:link, .boxfooter p a:visited { color:#E4E4E4; text-decoration:none} .boxfooter p a:hover { color:#174A9E} #webdesignby p { width:928px; color:#8b8c8f; text-align:right; padding-top:5px; padding-bottom:40px} #webdesignby p a:link, #webdesignby p a:visited { color:#8b8c8f; text-decoration:none} #webdesignby p a:hover { color:#0093D3} #goBack p a:link, #goBack p a:visited { color:#174A9E; text-decoration:none} #goBack p a:hover { color:#174A9E; text-decoration:underline} .webdesignby { color:#E4E4E4; text-align:right; padding-top:5px; padding-bottom:40px} /* --------------------------------------------- 14. INNERPAGE- NEWSLETTER --------------------------------------------- */ #wrapper-news { width:600px; margin:0 auto} #toplink { width:595px; height:25px; padding-top:8px; padding-left:5px} #toplink a:link, #toplink a:visited { color:#000; text-decoration: underline} #toplink a:hover { color:#000; text-decoration: underline} #bluebar-news { width:570px; height:25px; background:#0093D3 url(../images/bg_topbar_news.gif) no-repeat bottom center; text-align:right; padding-right:30px; padding-top:5px} #topbar-news { width:600px; height:90px; float:left;} #topbar-news #logo { margin:0; padding:0} #header-news { width:600px; height:265px; float:left; background:url(../images/header_news.gif) no-repeat} #header-news .button_tellmemore { width:165px; height:45px; float:left; margin-top:110px; padding-left:20px} #content-news { width:600px; float:left; margin-top:-80px} #content-news p { font-size:14px; padding-top:20px} #content-news .linkblue { width:auto; float:left; background:url(../images/arrow.gif) no-repeat top left; padding-left:20px; font-size:15px; margin-right:20px} #content-news .linkblue a:link, #content-news .linkblue a:visited { color:#0487CA; text-decoration:none} #content-news .linkblack { width:auto; float:left; background:url(../images/arrow.gif) no-repeat top left; padding-left:20px; font-size:15px; margin-right:20px} #content-news .linkblack a:link, #content-news .linkblack a:visited { color:#000000; text-decoration:none} #greybox-news { width:600px; height:100px; margin-top:20px; float:left; background:#E4E4E4 url(../images/greybox-news.gif) no-repeat top; position:relative} .jumpbutton { background:url(/images/button_go.gif) no-repeat; height:21px; width:20px; border:none; cursor:pointer; } #jumpmenu { width:200px; } .jumpwidth { width:238px; }