@import url("reset.css");

/* ensure content layers height properly */
html, body {height: 100%; }
body { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #47474a; background: #FFF; }

a {position: relative;}
/******************************/
/*** BODY BACKGROUNDS       ***/
/******************************/
body#bg-home { background: #454641 url(../images/bg_page_hm.jpg) no-repeat top center; }
body#bg-specialoffers { background: #4b4340 url(../images/bg_page_specialoffers.jpg) no-repeat top center; }
body#bg-twitter { background: #92745a url(../images/bg_page_twitter.jpg) no-repeat top center; }
body#bg-becomefeatured { background: #a07555 url(../images/bg_page_becomefeatured.jpg) no-repeat top center; }
body#bg-contact { background: #ac8053 url(../images/bg_page_contact.jpg) no-repeat top center;}
body#bg-thankyou { background: #a07555 url(../images/bg_page_becomefeatured.jpg) no-repeat top center;}

a { color: #0e9ed5; text-decoration: none; }
a:hover {text-decoration: underline;}

div.clear { height:0; clear:both; }
/*div.sep15 { height:15px; clear:both; }*/

/******************************/
/*** SKELETON/STRUCTURE     ***/
/******************************/
/*
   IMPORTANT: This is the background that is transparent.
   It's placement is calculated using javascript, immediately after the element
   has been created.
*/
#full-translucent{opacity: 0.9; filter: alpha(opacity=90); height: 100%; width: 980px; position: absolute; background: #FFF;}
#header { height: 60px; position: relative; width: 980px; margin: 0 auto; z-index: 10000; }
#oCntnr { width: 980px; height: 100%; margin: 0 auto; background: transparent; position: relative; /*text-align:left; */}


/******************************/
/*** HEADER                 ***/
/******************************/
#translucent { height: 60px; background: url(../images/bg_header.gif) repeat-x; opacity: 0.8; filter: alpha(opacity=80); }
#translucent.homepage {opacity: 1.0; filter: alpha(opacity=100);}
#logoNav { position:absolute; top:0; left:0; width:980px; height:60px; }
		#logo { margin:24px 0 0 30px; float:left; }
		#logoNav ul { float: right; margin-top: 35px; width: 410px;}
            #logoNav li { float:left; margin: 0 15px 0 10px; width: 80px;}
            #logoNav li#twitter { width: 70px;}
            #logoNav li.last { margin: 0; border-left: 1px solid #646565; padding-left: 14px; width: 66px; }
                #logoNav li.last a { padding: 0; font-weight: bold; }
                #logoNav li a { display: block; height: 14px; padding: 0 0 0 22px; font-size:10px; color:#212121; text-transform:uppercase; }

                /* SOCIAL LINKS STYLES */
                #logoNav li#rss a { background:url(../images/icon_subscribe.png) no-repeat; }
                #logoNav li#twitter a { background:url(../images/icon_twitter.png) no-repeat; }
                #logoNav li#facebook a { background:url(../images/icon_facebook.png) no-repeat; }

#contentCntnr { /*min-height:84%; */padding: 15px 68px; background-color: transparent; /*border-left:1px solid #ada8a7; border-right:1px solid #ada8a7; */}
div.contentBox { border:1px solid #dcdcdc; margin:20px 0; padding:15px 25px; background:#FFF; }
	div.contentBox p { margin-bottom:15px; font-size:12px; line-height:1.4em; }
	div.contact p { font-size:14px; }
#offer { display: block; width: 866px; height: 142px; margin: 0 auto; }
#offerShad { display: block; margin: 0 auto !important; margin: -15px auto 0 auto; width: 837px; height: 64px; }

img.imgLeft { float:left; margin-right:15px; }
img.imgRight { float:right; margin-left:15px; }
img.imgTxt { display:block; margin:25px 0 10px 0; }

p.intro { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #006699; line-height:1.4em; padding-right: 100px; }


/******************************/
/*** NAVIGATION             ***/
/******************************/
#mainNav { height:34px; }
	#mainNav li { float: left; width: 245px; height: 34px; text-align:center; }
        #mainNav li a { display: block; height: 34px; line-height: 29px; font-size: 11px; color: #5a5b5e; text-transform: uppercase; font-weight: bold; text-decoration: none; }
        #mainNav li a:hover { color:#63a3b4; }
        #mainNav li.on a, #mainNav li.on a:hover { color: #FFF; }
    /* featured business */
    #mainNav li#featured-biz { background: transparent url(../images/sprite_nav.png) no-repeat 0 0; width: 246px;}
    #mainNav li#featured-biz.on { background-position: 0 -34px; }
    /* special offers */
    #mainNav li#special-offers { background: transparent url(../images/sprite_nav.png) no-repeat -246px 0; width: 243px;}
    #mainNav li#special-offers.on { background-position: -246px -34px; }
    /* think big */
    #mainNav li#thinkbig { background: transparent url(../images/sprite_nav.png) no-repeat -489px 0; width: 245px;}
    #mainNav li#thinkbig.on { background-position: -489px -34px; }
    /* shop local */
    #mainNav li#shoplocal { background: transparent url(../images/sprite_nav.png) no-repeat -734px 0; width: 246px;}
    #mainNav li#shoplocal.on { background-position: -734px -34px; }
	

/******************************/
/*** HOME PAGE              ***/
/******************************/
#oCntnr div.homeContentCntnr { padding: 0; border-left:1px solid #ada8a7; border-right:1px solid #ada8a7; }
#hmFeaturesBg { width: 977px; height: 375px; padding: 34px 0 0 0 !important; padding-top: 0; background: transparent url(../images/home/bg_hm_features.jpg) repeat-x; border-bottom:1px solid #b5b5b5; position:relative; }
#hmFeaturesCntnr { width:660px; height:335px; margin:0 auto; clear:both; }
#intro-cntnr {text-align: center; width: 980px; height: 382px; padding: 27px 0 0 0 !important; padding-top: 0; background: #000; position: absolute; top: 0; left: 0; z-index: 9999;}
    #intro-cntnr a.skip {position: absolute; cursor: pointer; bottom: 15px; right: 100px; text-transform: uppercase; color: #0DB5E3; }
    
    /* carousel nav */
    #nav { position:absolute; bottom: 10px; left: 0; }
    #nav li {float: left; width: 115px; text-align: center;}
        #nav a { padding: 0 10px 0 0; margin-left: 45px; color: #575758; }
        #nav a.activeSlide { color: #00a1d0; }

    div.featuredBusiness { width: 660px; height: 335px; position: absolute; top: 0; left: -2000px;}
        div.featuredBusiness .main-img-hldr {float: left; width: 275px; margin-right: 18px; text-align: right;}
        div.featuredBusiness .copy-vplay { float: left; width: 345px; }
        div.featuredBusiness .copy-vplay p {color: #999; font-size: 9px; margin-top: 5px;}
    #prev { position: absolute; top: 157px; left: 145px; }
    #next { position: absolute; top: 157px; right: 145px; }
    a.becomeFeatured { position: absolute; bottom: 5px; right: 28px; }

img.featureTxt { display:block; margin-top:46px; }
img.featureVideo { display:block; margin-top: 7px;}
#videoHolder {padding-top: 15px;}

/** popup videos **/
body#video-modal { background: transparent;}
    #transparent-window {padding: 5px; position: relative; background: transparent;}
    #bg-video {height: 331px; width: 676px; padding: 10px 20px 0 20px; background: transparent url(../images/home/bg_popup_video.png) no-repeat;}
        #bg-video a.close-video {position: absolute; display: block; left: 0; top: 0; width: 21px; height: 22px;}
        #bg-video #popupvideo-cntnr { text-align: center; }
            #bg-video #popupvideo-cntnr #videoHolder {padding-top: 0;}
        #bg-video #video-info p { font-size: 11px; font-weight: bold; color: #0C608E;}


/******************************/
/*** SHOP LOCAL BUSINESSES  ***/
/******************************/
#oCntnr div.twitter { padding: 34px 50px 0 55px !important; padding-top: 0; }
    #oCntnr div.twitter .imgTxt { margin-bottom: 5px; }
    #oCntnr div.twitter #twitter-wrapper {}
    #twitterInfo { float: left; width: 207px; margin-right: 11px; height: 361px; background: #bdecf9; padding: 34px 20px 0 20px; margin-top: 30px; position: relative;}
        #twitterInfo img { position: absolute; top: -20px; left: 10px; }
        #twitterInfo h2 { font-size: 12px; color: #01507a; }
        #twitterInfo p { margin-bottom: 10px; line-height: 1.2em; }
    #twitterHash { position: relative; float: left; width: 500px; padding: 35px 35px 35px 45px; height: 323px; border: 1px solid #dedede; background: #FFF; margin-top: 30px; }
        #twitterHash h3 {color: #086CA1; font-size: 12px; padding: 0 0 6px 0; font-weight: normal; border-bottom: 1px dashed #BAB9B9;}
            #twitterHash #tweet-wrapper { position: absolute; }
                #twitterHash #tweet-cntnr { width: 588px; position: absolute; height: 301px;}
                    #twitterHash #tweet-scrollbar { position: absolute; top: -10px; right: 9px; height: 312px; width: 1px; background: #A3A2A1;}
                    #twitterHash div.tweet { width: 500px; padding: 11px 0; border-bottom: 1px dashed #BAB9B9;}
                    #twitterHash div.tweet img {border: 1px solid #CEC8C2;}
                    #twitterHash div.tweet p.tweet-text { line-height: 1.4em; }
                        #twitterHash div.tweet p.tweet-text a { color: #07689D; }
                        #twitterHash div.tweet p.tweet-text span { font-weight: bold; color: #07689D; }
                    #twitterHash div.tweet p.tweet-time { color: #585858; }
                        #twitterHash div.tweet p.tweet-time a { color: #585858; }

    p.joinTwitter { margin: 10px 0 30px 268px; margin-left: 268px; margin-top: 10px; color: #605F5F;}
        p.joinTwitter a { color: #03467D;}

/** twitter feed scroll pane **/
.jScrollPaneContainer {	position: relative; overflow: hidden; z-index: 1;  width: 587px; }
.jScrollPaneTrack {	position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: transparent; }
.jScrollPaneDrag { position: absolute; background: transparent url(../images/twitter/scroll_btn.png) no-repeat 0 0; cursor: pointer; height: 22px; width: 22px; overflow: hidden; }
.jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; }


/******************************/
/*** CONTACT                 ***/
/******************************/
#oCntnr div.contact { padding: 34px 50px 0 55px !important; padding-top: 0; }
#oCntnr div.contact .contentBox { padding: 56px 60px 45px 60px; }
    div.contact p { font-size: 18px;}
    div.contact div.hidden-phnum { display: none;}
        div.contact div.hidden-phnum p { text-align: center; font-weight: bold; font-size: 18px; color: #005583;}

/******************************/
/*** THANK YOU              ***/
/******************************/
#oCntnr div.thankyou { padding: 34px 50px 0 55px !important; padding-top: 0; }
    #oCntnr div.thankyou .contentBox {padding: 35px 45px 25px 45px; font-size: 13px;}
        #oCntnr div.thankyou p {font-size: 13px; margin-bottom: 20px; font-family: Verdana, Arial, san-serif;}
            #oCntnr div.thankyou p span {font-weight: bold; color: #005583;}

/******************************/
/*** BECOME-FEATURED        ***/
/******************************/
#oCntnr div.becomefeatured { padding: 50px 50px 0 55px !important; padding-top: 0; }
    #oCntnr div.becomefeatured img.silhouette {margin-right: 10px;}
    #oCntnr div.becomefeatured div.contentBox {margin-top: 38px;}

/******************************/
/*** FORMS                  ***/
/******************************/
div.becomeLeft { float:left; width:345px; margin-right:65px; }
div.becomeRight { float:left; width:360px; }
div.becomeRight div.leftCol, div.becomeRight div.rightCol {margin-top: 15px;}
div.becomeRight p {margin: 0;}
div.leftCol { float:left; width:160px; margin-top:10px; margin-right:15px; }
div.rightCol { float:left; width:160px; margin-top:10px; }

label.lblText { display: block; font-weight: bold; margin-bottom:5px; }
label.lblTextArea {padding-top: 10px; clear: both;}
    label.lblTextArea span {font-weight: normal;}
label.lblCheckBox { display:block; margin-bottom:5px; }

label.error { display:inline-block; margin-top:5px; color:#FF0000; }

span.serviceHdr { display:block; text-transform:uppercase; font-size:11px; margin: 0 0 3px 0;  }
span.required { display:block; margin-top:20px; clear:both; text-transform:uppercase; font-size:9px; }

input.submitBtn { width:98px; position: absolute; height:27px; background:url(../images/btn_submit.png) no-repeat; border:0; padding:0; margin-top:15px; text-indent:-9000px; }
input.sample {color: #999;}

/******************************/
/*** SPECIAL OFFERS         ***/
/******************************/
/*#oCntnr div.specialoffers { padding: 45px 75px 0 75px !important; padding-top: 0; }
    div.specialoffers .imgTxt {margin-bottom: 5px; margin-top: 0;}
    div.specialoffers .contentBox {padding: 155px 0 11px 45px; text-align: left; position: relative;}
    div.specialoffers .guy {margin-top: 40px;}
    div.specialoffers .frm-error {color: #ff0000; font-weight: bold;}
       div.specialoffers #ltd-offer {position: absolute; left: -18px; top: -21px;}
    div.specialoffers .bundles {margin-left: -10px; margin-bottom: 7px;}
    div.specialoffers p.intro {margin-bottom: 8px;}
    div.specialoffers p.special-note {font-size: 11px; color: #717171; padding-right: 32px; margin-bottom: 6px;}

#specialbundles .becomeLeft {width: 160px; margin-right: 15px !important; margin-right: 0;}
    #specialbundles .becomeLeft p {font-size: 10px; padding-top: 40px;}
    #checkbox-holder {margin-bottom: 60px;}
    #checkbox-holder div {float: left; margin-right: 10px;}
    #checkbox-holder div.plus {width: 30px; padding-top: 100px;}
    #checkbox-holder div.ch {width: 201px; padding: 40px 0 0 19px; height: 161px;}
        #checkbox-holder div.ch  .leftCol {width: auto;}
    #checkbox-holder div.business {background: transparent url(../images/special_offers/checkbox_holder_phone.png) no-repeat;}
    #checkbox-holder div.highspeed {background: transparent url(../images/special_offers/checkbox_holder_highspeed.png) no-repeat;}
    #checkbox-holder div.wireless {background: transparent url(../images/special_offers/checkbox_holder_wireless.png) no-repeat;}
    #specialbundles #submitBtn {position: absolute; bottom: 12px; right: 50px; cursor: pointer; width: 157px; height: 29px; background: transparent url(../images/special_offers/create_bundle.png) no-repeat;}
    #specialbundles label.lblCheckBox input {margin-right: 15px;}
    */
#oCntnr #soCntnr {padding: 50px 14px 100px 14px;}
    #soCntnr h1 {margin: 0 0 0 18px;}
    #soCntnr #legalCopy {border-top: 1px solid #C1BFBE; padding: 10px 110px 0 0; margin: 10px 14px 0 22px;}
        #soCntnr #legalCopy p.special-note {font-size: 11px; color: #717171; line-height: 16px; margin-bottom: 6px;}
    #soCntnr #soBundles {float: left; position: relative;}
        #soCntnr #soBundles img {margin-left: 9px;}
    #soCntnr #soSidebar {width: 247px; padding: 7px 9px 0 9px; height: 530px; margin: 88px 0 0 6px; float: left; background: transparent url(../images/special_offers/so_sidebar.jpg) no-repeat;}
        #soCntnr #soSidebar .section {padding: 11px 0 11px 6px; border-bottom: 1px solid #D1D1D1;}
            #soCntnr #soSidebar .section h2 {margin-bottom: 12px;}
            #soCntnr #soSidebar #videoctrl h2 {margin-bottom: 15px;}
            #soCntnr #soSidebar #bizblog h2 {margin-bottom: 10px;}
            #soCntnr #soSidebar #videoctrl #ruskman {float: left; margin-right: 5px;}
            #soCntnr #soSidebar #videoctrl #play {margin-bottom: 20px;}
            #soCntnr #soSidebar #videoctrl #copyrightsolution {margin-left: 4px;}
            #soCntnr #soSidebar #twitter #tweetie {float: left; margin-right: 10px; margin-bottom: 12px;}
            #soCntnr #soSidebar #twitter p {margin-bottom: 10px; color: #515151; font-size: 12px; padding-right: 22px;}
            #soCntnr #soSidebar .section p.title {font-size: 14px; color: #0095C7; font-weight: bold; margin-bottom: 7px;}
            #soCntnr #soSidebar .section p.date {font-size: 10px; color: #949494; margin-bottom: 9px;}
            #soCntnr #soSidebar .section p.summary {font-size: 12px; color: #515151; margin-bottom: 15px;}
            #soCntnr #soSidebar .section p.readmore a {color: #036EA8; font-size: 12px;}

            #soCntnr #soSidebar .last {border-bottom: none;}
            #soSidebar .section h2 {margin-bottom: 17px;}
    #soCntnr #triBundles {margin: 0 0 0 18px; width: 660px; height: 370px; position: absolute; left: 0; top: 392px;}
        #soCntnr #triBundles .bundle {float: left; width: 220px;}
        #soCntnr #triBundles .bundle .bg{width: 220px; height: 156px;}
        #soCntnr #triBundles #goodBundle .bg {background: transparent url(../images/special_offers/bundle_good.png) no-repeat;}
        #soCntnr #triBundles #betterBundle .bg {background: transparent url(../images/special_offers/bundle_better.png) no-repeat;}
        #soCntnr #triBundles #bestBundle .bg {background: transparent url(../images/special_offers/bundle_best.png) no-repeat;}
        #soCntnr #triBundles #goodBundle.on .bg{height: 254px;}
        #soCntnr #triBundles #betterBundle.on .bg{height: 348px;}
        #soCntnr #triBundles #bestBundle.on .bg {height: 370px; }
            #soCntnr #triBundles .bundle a {cursor: pointer; display: block; width: 220px; height: 38px; background: transparent url(../images/special_offers/btn_showbundle_now.png) no-repeat; text-indent: -9999px;}
            #soCntnr #triBundles .on a {cursor: pointer; background: transparent url(../images/special_offers/btn_getbundle_now.png) no-repeat;}

        #openfeatures {position: absolute; top: 257px; left: 109px; cursor: pointer;}
        #features {display: none; position: absolute; z-index: 10005; top: 256px; left: 117px; height:233px; width: 308px; background: transparent url(../images/special_offers/featuresbox.png) no-repeat;}
            #features a {display: block; height: 30px; width: 146px; position: absolute; top: 8px; left: 4px; text-indent: -9999px; cursor: pointer;}
            #features ul {list-style-type: disc; margin-left: 55px; margin-top: 59px;}
                #features ul li {margin-bottom: 5px; color: #000; font-size: 13px;}
        #closefeatures {position: absolute; top: -14px; left: -26px; cursor: pointer;}

        /*** VIDEO ***/
        #iframe-container {background: #fff; padding: 20px; width: 940px;}
            #iframe-container #ic-header img {float: left;}
            #iframe-container #ic-header a {float: right; background: url(../images/special_offers/close-x.gif) no-repeat; display: block; float: right; height: 24px; width: 22px;}
            #iframe-container #scrollHolder {position: relative; background: #FCFCFC url(../images/special_offers/iframe-bg.jpg) repeat-x bottom left; border: 1px solid #B5B5B5; margin-top: 11px; width: 940px; height: 460px;}
            #iframe-container #scrollHolder #prev {left: 24px; top: 201px;}
                #iframe-container #scrollHolder #prev.disabled {display: none;}
            #iframe-container #scrollHolder #next {right: 24px; top: 201px;}
                #iframe-container #scrollHolder #next.disabled {display: none;}
                #scrollHolder .main-img-hldr {width: 240px; text-align: center; float: left;}
                    #scrollHolder .main-img-hldr p {font-size: 17px; color: #000; text-align: left; padding-left: 22px;}
                    #scrollHolder .main-img-hldr span {display: block; font-size: 12px; color: #505050;}
                #scrollHolder #scrollable {top: 0; left: 0; position: relative; overflow: hidden; width: 802px; height: 375px; padding-left: 70px}
                #scrollHolder #scrollable #hmFeaturesCntnr {margin: 0; clear: none; height: 375px; width: 5000px; position: absolute;}
                    #scrollable #hmFeaturesCntnr .videoslate {float: left; padding: 0 73px 0 134px;}
                        #scrollable #hmFeaturesCntnr .first {padding-left: 73px;}
                #scrollHolder .copy-vplay{float: left; padding-top: 45px;  width: 400px;}
                    #scrollHolder .copy-vplay a {display: block; width: 400px; height: 259px;}

                #scrollHolder #so-nav {margin: 15px 0 12px 240px;}
        #scrollHolder #so-nav a{display: block; background-image: url(../images/special_offers/CB_videoNames.gif); float: left; padding-right: 10px; text-indent: -5000px; height: 23px; margin-left: 5px;}

        #apex_lnk {background-position: 0 0; width: 131px;}
        #apex_lnk.on, #apex_lnk:hover {background-position: 0 23px;}
        #prodigy_lnk {background-position: -142px 0; width: 125px;}
        #prodigy_lnk.on, #prodigy_lnk:hover {background-position: -142px 23px;}
        #rusk_lnk {background-position: -278px 0; width: 151px;}
        #rusk_lnk.on, #rusk_lnk:hover {background-position: -278px 23px;}
        #frank_lnk {background-position: -440px 0; width: 95px;}
        #frank_lnk.on, #frank_lnk:hover{background-position: -440px 23px;}
        #fassler_lnk {background-position: -546px 0; width: 98px;}
        #fassler_lnk.on, #fassler_lnk:hover {background-position: -546px 23px;}

        #scrollHolder a.mplayer {cursor: pointer;}

        /** overlay **/
        #overlay {display: none; position: absolute; top: 0; left: 0; width: 100%; background: #000; opacity: 0.8; filter: alpha(opacity=80); z-index: 10001;}
/******************************/
/*** CLEARFIX               ***/
/******************************/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
.clearLeft { clear:left; }
.clearRight { clear:right; }

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */