/* Global Reset of Whitespage -------------------------------------- */ * { padding: 0; margin: 0; } /* General Items -------------------------------------- */ body {font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: normal; color: #505050; background-image:url('css/background.jpg'); background-color: #f3f4ef; background-repeat: repeat-x; border-top: 2px solid #202020;} p {margin-top: 0px; margin-bottom: 10px; line-height: 28px;} strong, em, b, i { font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; } ul, li, ol {list-style: none;} ol {padding-top: 10px;} .clear { content:"."; margin-top: -1px; display:block; height: 0px; clear:both; visibility:hidden; } object {margin-top: 30px; margin-bottom: 30px;} address {color: #707070; font-size: 13px;} /* Headings -------------------------------------- */ h1,h2,h3,h4,h5,h6,address {font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 22px; padding-top: 0px; color: #2E547A;} h3,h4,h5,h6 {font-size: 16px; margin-top:10px;} h2.small {font-size:12px; text-align:center; margin:0; margin-top:50px;} h2#home-security {background-image:url('css/panes/home-security.jpg'); height: 234px; width:308px; text-indent: -100em; overflow:hidden;} h2#business-security {background-image:url('css/panes/business-security.jpg'); height: 234px; width:308px; text-indent: -100em; overflow:hidden;} h2#alarm-monitoring {background-image:url('css/panes/alarm-monitoring.jpg'); height: 234px; width:308px; text-indent: -100em; overflow:hidden;} h2#identity-theft {background-image:url('css/identity-theft-h2.jpg'); height: 350px; width:642px; text-indent: -100em; overflow:hidden;} h2#medical-alert {background-image:url('css/medical-alert-h2.jpg'); height: 303px; width:642px; text-indent: -100em; overflow:hidden;} /* Images --------------------------------------------------------------- */ img {border: 0; vertical-align: bottom;} //img.logo {width: 291px; height: 92px; padding-left: 25px; float: left;} img.logo {width: 100px; height: 100px; padding-left: 0px; float: left;} img.call {width: 640px; height: 135px; padding-top: 20px;} img.banner {width: 640px; padding-top: 20px; padding-bottom: 20px;} img.action {width: 275px; height: 116px; padding-top: 10px; padding-bottom: 10px;} img.ic {padding: 5px; width: 24px; height:24px;} img.credits {padding-bottom: 20px; width: 465px; height:127px;} img.learn {width: 137px; height: 26px; float: right;} img.learn.left {float: left;} img.demo {width: 180px; height: 34px; float: right; padding-top: 10px; padding-bottom: 10px;} img.but {width: 137px; height: 27px; float: right; padding-top: 10px;} img.squarel, img.squarer {width: 250px; height: 250px; float: left; padding-top: 20px; padding-right:25px; padding-bottom: 20px;} img.squarer {float: right; padding-right: 0; padding-left: 25px;} .video img {padding:3px; margin:25px; margin-top: 0px; border: 1px #cfcfcf solid; width: 250px; height: 179px; float: left;} img.packagetitle {width:640px; height:54px; padding:0;} img.pagethumbs {width:250px height:269px; margin: 0px 25px 15px 25px; float:left; border: 1px solid #efefef;} div.pane img {width:308px; height:59px; border:0px;} img.learnmore {width:642px; height:82px;} /* Hyperlinks --------------------------------------------------------------- */ a {text-decoration: none; color: #2E547A;} a:hover {text-decoration: underline;} h1 a, h2 a, h3 a {color:#2E547A;} /* Page Containers --------------------------------------------------------------- */ div#header, div#content {margin-left: auto; margin-right: auto; background: none; width: 948px; } div#header .right {float: right; padding-top: 34px; /*width: 650px;*/ text-align: right; padding-right: 20px;} div#header a {font-size: 13px; padding: 0px 20px 0px 20px; text-decoration: none; vertical-align: middle; color: #efefef; display: block; } div#header a:hover {font-size: 13px; color: #ff0000; text-decoration: underline;} div#header a.active .active {background-color: #505050; border-bottom: 2px;} div#header h1 {margin-left: 20px; background-image:url('http://www.stopalarmsystems.com/images/stopalarmslogo.png'); height: 100px; width:100px; text-indent: -100em; overflow:hidden; float:left;} div#header ul {line-height: 32px; margin-right: 50px;} div#header li {float: right;} div#header div.nav ul {margin: 0px; padding: 0px;} div#header div.nav a {font-size: 15px; padding: 6px 12px 4px 11px; text-decoration: none; text-transform: uppercase; vertical-align: middle; color: #505050; display: block;} div#header div.nav a:hover {font-size: 15px; background-color: #DBE7F4; color: #505050;} div#header div.nav a.active .active {background-color: #505050; border-bottom: 2px;} ul.sidebyside li {display:block; margin-left: 50px; width: 210px; float: left;} div#header {background-image:url('css/tcorners.png'); background-repeat: no-repeat; background-position: 0 0px; width: 1000px; margin-top: 30px;} div.login {float: right; background-color: #505050; margin-top: -34px; height: 18px; padding: 2px; margin-right: 125px; border: #cfcfcf 1px solid;} div.hcontent {height: 255px; background-image:url('/images/header-wireless.jpg'); background-repeat: no-repeat; background-position: 0 0; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #f4f4f4; padding: 30px 500px 0 30px;} div.hcontent strong {color: #ffffff; font-size: 22px; line-height: 34px;} div.hcontent p {color: #404040; font-size: 16px; margin-top: 25px;} div#content {background-image:url('css/contentback.jpg'); background-repeat: no-repeat; background-color: #ffffff; width: 948px; border: 1px solid #c4c4c4; border-top: 0; border-bottom: 0; padding: 30px 25px 30px 25px; margin-top: -1px;} div#left {float: left; width: 643px; padding:0;} div#left h2 {font-size: 18px; margin-top: 40px;} div#left h3.quote {background-color: #efefef; font-size: 18px; padding-left: 50px; padding-top:15px; width: 640px; height: 50px; margin-top: 10px; margin-bottom: 10px; color: #202020; background:url("css/quotes.png") 0px 0px no-repeat;} div#left div.ul, div#services div.ul {margin-top: 20px; margin-bottom: 30px; padding: 25px; padding-top: 35px; border: 1px solid #dddddd; background:url("css/ul-fade.png") repeat-x;} div#services div.ul {padding-left: 10px; padding-right: 10px; height: 300px;} div#left div.ul h2 {margin-bottom: 20px; margin-top: -20px;} //div#left ul {margin-top: 15px; margin-bottom: 30px; padding: 25px; padding-top: 40px; border: 1px solid #dddddd; background:url("css/ul-fade.png") repeat-x;} div#left ul li, div#services ul li {margin-bottom: 20px; vertical-align: top; background:url("css/bullet.png") 0px 0px no-repeat; padding-left: 35px; padding-bottom: 10px; line-height: 24px;} div.packages {width:638px; border: 1px solid #efefef; margin-top: -10px; margin-bottom: 50px;} div.row {clear:both; display:block;} div.cell {width:172px; padding-left:6px; padding-top:6px; float:left; height: 54px; display:block;} div.compare {width:210px; padding-left:6px; padding-top:6px; float:left; height: 28px; display:block;} div.cell p, div.compare p {font-size: 12px; line-height: 18px;} div.wide {width:444px; padding-right:10px;} div.td, div.tdx {width:128px; text-align:center; vertical-align:middle; height:28px;} div.tdx {padding-right:20px;} div.td img, div.tdx img {width:15px; height:18px;} .silverlight {background-color:#fafafa;} .silverdark {background-color:#efefef;} .goldlight {background-color:#fdf4e0;} .golddark {background-color:#fbebc9;} .platinumlight {background-color:#f2f5f5;} .platinumdark {background-color:#e4ebec;} .pricing p b {font-size: 14px; line-height: 36px;} div#right {float: left; width: 275px; padding:0; padding-left: 30px;} div#right ul {margin-top: 20px; margin-bottom: 20px; line-height: 28px;} div#right ul li a {font-size: 14px; border-left: 8px solid #d4d4d4; margin-bottom: 2px; margin-left: 2px; padding: 2px 0 3px 12px; text-decoration: none; vertical-align: middle; color: #303030; width: 255px; background-color: #fafafa; display: block;} div#right ul li a:hover, div#right ul li a.active:hover {font-size: 14px; border-left: 8px solid #dd0000; background-color: #e8e8e8;} div#right ul li a.active {background-color: #DBE7F4; border-bottom: 2px; font-weight: bold; color: #2E547A; border-color: #2E547A;} div#right h2, div#right h3, div#right h4 {font-size: 14px;} div#share {border: 1px solid #dfdfdf; padding: 5px; height: 185px; margin-top: 30px; -moz-border-radius:15px; -webkit-border-radius:15px;} div#right div#share ul {float: left; width: 130px; margin: 0;} div#right div#share ul li a {font-size: 14px; width: 135px; border: 0; margin:0; padding: 0; text-decoration: none; vertical-align: middle; color: #303030; background-color: #ffffff;} div#right div#share ul li a:hover {font-size: 14px; border:0;} div#right div#share ul li a.active .active {background-color: none; border-bottom: 2px;} div.social {width: 100%; text-align: center;} div.social img {width: 60px; height: 95px;} div.pane {background-image:url('css/panes/panebg.png'); background-repeat: y-repeat; width: 308px; margin-left:12px; float:left;} div.pane p {line-height: 20px; padding-left:12px; padding-right:12px; text-align:center;} div.pane p strong {color: #aa0000; font-size: 18px;} div.pane ul {line-height: 28px; font-size: 13px; padding-left: 40px; padding-bottom: 20px;} div.pane ul li {list-style: disc;} div.text-column {width:325px; height:800px; padding:15px; float:left; border-left: 1px solid #efefef; background-color:#fcfcfc; background-image:url('css/text-column-bg.png'); background-repeat: repeat-x;} div.text-column p {font-size:14px; padding-left:20px; padding-right:10px;} span.hframe {background-image:url('css/text-column-bg.jpg'); background-repeat: no-repeat; border: 10px solid #dfdfdf; padding: 15px; padding-bottom:0; display:block; font-weight:bold; color:#ffffff;} span.hframe p {font-size:14px; padding:0;} strong.large {font-size:18px;} /* Calls To Action & Sign Up Buttons */ .call_to_action {text-indent: -9999px;background:url(http://www.stopalarmsystems.com/images/identity-theft-banner.jpg) no-repeat;width:640px;height:431px;margin-top: 20px;display:block;} .call_to_action_banner {text-indent: -9999px;background:url(http://www.stopalarmsystems.com/images/identity-theft-c2a-banner.jpg) no-repeat;width:640px;height:120px;display:block} .call_to_action h2, .call_to_action h3, p.call_to_action {display:none} .call_to_action_pers {text-indent: -9999px;background:url(http://www.stopalarmsystems.com/images/medical-alert-call2action.jpg) no-repeat;width:642px;height:425px;margin-top: 20px; margin-bottom:20px; padding-bottom:20px; border-bottom: 15px solid #efefef; display:block;} a.call_to_action {width:300px;height:40px; display:block; position:absolute; margin-top:300px; margin-left:310px; background:none;} a.sign_up_button{width:170px;height:33px;display:block;background:url(http://www.stopalarmsystems.com/images/sign-up-button.png) no-repeat 0 0;position:absolute;margin-top:320px;margin-left:450px} a.pers {margin-top:300px;margin-left:370px} a.compare_button{width:170px;height:33px;display:block;background:url(http://www.stopalarmsystems.com/images/compare-plans-button.png) no-repeat 0 0;position:absolute;margin-top:320px;margin-left:265px} a.banner_sign_up_button {width:170px;height:33px;display:block;background:url(http://www.stopalarmsystems.com/images/sign-up-button.png) no-repeat 0 0;position:absolute;margin-top:65px;margin-left:455px} a.sign_up_button:hover, a.compare_button:hover, a.banner_sign_up_button:hover {background-position:0 -33px} div#footer {background-image:url('css/footerback.jpg'); background-repeat: repeat-x; background-color: #151515; width: 100%; font-size: 12px;} div#footer div.close {margin-left: auto; margin-right: auto; width: 930px; padding: 110px 35px 30px 35px; background: none; background-image:url('css/bcorners.png'); background-repeat: no-repeat; } div#footer h2 {font-size: 14px; color: #202020; text-transform: uppercase;} div#footer ul {margin-top: 5px; text-transform: uppercase; line-height: 28px;} div#footer li a {text-decoration: none; color: #606060; padding: 0; margin: 0;} div#footer address {color: #404040; font-size: 13px; font-style: normal; line-height: 24px;} div#flashcontent {float: left; width: 550px; height: 338px; background-color: #ffffff; padding-left: 3px; padding-right: 3px;} div#midcontent {float: left; width: 510px; height: 387px; background-color: #ffffff; padding: 23px;} div#traffic {position:absolute; top:0; right:0; z-index: 999;} div#buttons {position:absolute; top:110px; left:0; z-index: 999;} div#buttons img {width:33px; height:108px; padding-top: 8px;} .blue {background-color:#194ECB;} .purple {background-color:#422271;} .green {background-color:#60A928;} .red {background-color:#BE200C;} .orange {background-color:#E69526;} div.video {margin-bottom: 30px; margin-top: 20px;} div.video h2 {margin-bottom: 20px;} div.testimonial {border: 3px solid #c0c0c0; border-left: 0; border-right: 0; padding: 20px; background-color: #e5e5e5;} div.testimonial img {float: left; width:100px; height:106px; padding-right: 15px; padding-bottom: 40px;} div.col {width: 50%; float: left;} div.traenotes {padding: 25px; border: 1px dotted#c4c4c4; font-style: italic; background-color: #fafafa; margin-top: 40px; margin-bottom: 40px;} /* FORMS --------------------------------------------------------------- */ div.lform {padding-bottom: 12px; width: 105px; float: left;} div.rform {padding-bottom: 12px; width: 175px; float: left; } div.mform {padding-bottom: 12px; width: 283px; float: left;} fieldset { border: 0; padding: 10px; width: 475px; margin-left: 50px; } label { font-weight: normal; color: #c0c0c0; } input, textarea { border: #d4d4d4 1px solid; margin-top: 4px; margin-bottom: 4px; background-color: #fafafa; padding: 5px; font-size: 14px; width: 300px; } .s {width: 100px;} .m {width: 200px;} .button {width: 137px; height: 26px; margin: 0; font-family: arial, helvetica; color: #ffffff; border: 0; font-size: 13px; float: right; background:url("css/send.png");} textarea { width: 450px; height: 175px; } /* styling of the container. */ a.myPlayer { display:block; width: 320px; height:240px; text-align:center; margin:0 15px 15px 0; float:left; border:1px solid #999; } /* play button */ a.myPlayer img { margin-top:70px; border:0px; } /* when container is hovered we alter the border color */ a.myPlayer:hover { border:1px solid #000; } /* For sidebar forms */ div#right input, div#right textarea { margin-top: 0px; margin-bottom: 4px; padding: 2px; font-size: 11px; width: 210px; height: 18px; } div#right textarea {height: 75px;} div#right .s {width: 50px;} div#right .m {width: 80px;} div#right .button {width: 120px; background: none; background-color: #ffffff; color: #404040; float: right; border: 0;height: 26px; margin: 10px; font-weight: bold; font-size: 13px;} div.quote {padding-top: 95px; padding-left:25px; padding-right: 25px; background-image:url('css/quick-quote.png'); background-repeat: no-repeat; width: 225px; margin-top: 30px;} div.quote p {margin: 0; padding: 0; color: #19547C;} div.quoteclose {background-image:url('css/quick-quote-bot.png'); background-repeat: no-repeat; height: 60px; width: 269px;} /* JQuery Overlay Styles */ /* get rid of those system borders being generated for A tags */ a:active { outline:none; } :focus { -moz-outline-style:none; } /* the overlayed element */ .apple_overlay, .stopalarms_overlay, .demos_overlay { /* initially overlay is hidden */ display:none; /* growing background image */ background-image:url(css/overlays/white.png); /* width after the growing animation finishes height is automatically calculated */ width:640px; /* some padding to layout nested elements nicely */ padding:35px; /* a little styling */ font-size:11px; } /* default close button positioned on upper right corner */ .apple_overlay div.close, .stopalarms_overlay div.close, .demos_overlay div.close { background-image:url(css/overlays/close.png); position:absolute; right:5px; top:5px; cursor:pointer; height:35px; width:35px; } .demos_overlay div.close {right:15px; top:25px;} div.apple_overlay.black, div.stopalarms_overlay.black, div.demos_overlay.black { background-image:url(css/overlays/transparent.png); color:#fff; } div.stopalarms_overlay.black { width: 760px; } div.demos_overlay.black { width: 800px; margin-top: -15px; } div.apple_overlay h2 { margin:10px 0 -9px 0; font-weight:bold; font-size:14px; } div.black h2 { color:#fff; } #triggers { margin-top:10px; //text-align:center; } #triggers img { background-color:#fff; padding:2px; //border:1px solid #ccc; margin:2px 5px; cursor:pointer; -moz-border-radius:4px; -webkit-border-radius:4px; } div.overlay { background-image:url(css/overlays/transparent.png); background:url(css/overlays/transparent.png) no-repeat; padding:40px; padding-top: 15px; width:576px; height: 442px; display:none; } div.overlay div.close { background:url(css/overlays/close.png) no-repeat; position:absolute; top:2px; right:5px; width:35px; height:35px; cursor:pointer; } a.player { display:block; height:442px; }