@import "/Styles/reset.css";

/* Global Styles */
h1, h2, h3, h4, h5, h6, legend{
    font-family: Trebuchet MS, Verdana, Arial, Sans-Serif;
    font-weight: bold;
    margin: 2px 0;
    padding: 2px 0;
}
h1{
    color: #870000;
    font-size: 24px;
    line-height: 28px;
}
h2{
    color: #333;
    font-size: 20px;
    line-height: 26px;
}
h3{
    color: #870000;
    font-size: 18px;
    line-height: 24px;
}
h4{
    color: #333;
    font-size: 16px;
    line-height: 22px;
}
h5{
    color: #870000;
    font-size: 14px;
    line-height: 20px;
}
h6{
    color: #333;
    font-size: 12px;
    line-height: 18px;
}
p{
    color: #333;
    font-size: 12px;
    line-height: 20px;
    margin: 5px 0px 15px;
    text-align: justify;
}
ul{
}
ul li{
    background: transparent url(Images/bullet3.gif) no-repeat 0 5px;
    color: #333;
    font-size: 12px;
    line-height: 20px;
    padding: 2px 0 2px 16px;
}
a{
    color: #870000;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
img{
    border: 0;
}
img[align="right"]{
    float: right;
    margin: 0 0 0 10px;
}
img[align="left"]{
    float: left;
    margin: 0 10px 0 0;
}
address{
    color: #333;
    font-size: 12px;
    font-style: normal;
    line-height: 20px;
    margin: 5px 0px 15px;
}
fieldset{
    border: 2px solid #ccc;
    margin: 5px 0;
    padding: 5px 10px;
}
    fieldset legend{
        color: #870000;
        font-size: 18px;
        padding: 0 5px;
    }
.clear{
    clear: both;
}
.button{
    background: #870000;
    color: #fff;
    display: block;
    float: left;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 6px;
}
.button:hover{
    background: #666;
    text-decoration: none;
}
.disclaimer{
    background: transparent url(Images/asterisk.gif) no-repeat left top;
    color: #666;
    font-size: 11px;
}

/* Container Styles */
body{
    background-color: #ddd;
    background-image: url(Images/bg_body.gif);
    background-position: left top;
    background-repeat: repeat-x;
    font-family: Verdana, Arial, Sans-Serif;
}
#root{
    background-image: url(Images/bg_body-home.jpg);
}
#wrap{
    width: 100%;
}
#header, #marquee, #content{
    
    margin: 0 auto;
    padding: 0 10px;
}
#header{
    width: 960px;
    height: 120px;
    position: relative;
    margin: 0 auto;
    padding: 0 10px;
}
#marquee{
    width: 960px;
    height: 240px;
    margin: 0 auto;
    padding: 0 10px;
}
#content{
    width: 980px;
    background: transparent url(Images/bg_content.gif) repeat-y center top;
    margin: 0 auto;
}
    .contact #content{
        background: transparent url(Images/bg_content-wide.gif) repeat-y center top;
    }
#main_wrap{
    width: 960px;
    _height: 200px;
    min-height: 200px;
    background: transparent url(Images/bg_main_wrap.gif) no-repeat center -5px;
    margin: 0 auto;
    padding: 10px;
}
    #root #main_wrap{
        background-position: center top;
    }
    .contact #main_wrap{
        background: transparent url(Images/bg_main_wrap-wide.gif) no-repeat center top;
    }
#main{
    width: 620px;
    float: left;
    padding: 0 10px;
}
    .contact #main{
        width: 940px;
        padding: 0 10px;
    }
#sidebar{
    width: 300px;
    float: left;
    padding: 0 10px 10px;
}
#footer{
    width: 960px;
    _height: 60px;
    min-height: 60px;
    background: transparent url(Images/bg_footer.gif) no-repeat center top;
    margin: 0 auto;
    padding: 55px 10px 0;
}
    .contact #footer{
        background: transparent url(Images/bg_footer-wide.gif) no-repeat center top;
    }

/* Header Styles */
#header .logo{
    width: 232px;
    height: 91px;
    position: absolute;
    left: 10px;
    top: 10px;
    background: transparent url(Images/logo.gif) no-repeat left top;
}
#header .logo:hover{
    background-position: left bottom;
}
    #header .logo img{
        display: none;
    }
#header #calltoday{
    width: 400px;
    position: absolute;
    right: 10px;
    top: 20px;
    margin-right: 10px;
    text-align: right;
}
    #header #calltoday .number{
        width: 289px;
        height: 22px;
        background: transparent url(Images/phonenumber.gif) no-repeat left top;
        clear: both;
        float: right;
        margin: 0 0 5px 0;
    }
        #header #calltoday .number span{
            display: none;
        }
    #header #calltoday .cta{
        width: 289px;
        clear: both;
        color: #666;
        float: right;
        font-size: 12px;
        text-align: right;
    }
#header .promotions{
    width: 218px;
    height: 49px;
    position: absolute;
    left: 350px;
    top: 0px;
    background: transparent url(Images/btn_promotions.jpg) no-repeat left top;
    display: block;
    margin: 0;
    padding: 0;
}
#header .promotions:hover,
#header .promotions:focus{
    background-position: left bottom;
}
    #header .promotions span{
        display: none;
    }
.promotions #header .promotions{
    background-position: left bottom;
}

/* Marquee Styles */
#marquee .photo{
    width: 960px;
    height: 240px;
    position: relative;
    background: transparent url(Images/photo-large.jpg) no-repeat left top;
    margin: 0 auto;
}
    #marquee .photo a{
        width: 142px;
        height: 21px;
        position: absolute;
        left: 474px;
        top: 145px;
        display: block;
    }
    #marquee .photo img,
    #marquee .photo a span{
        display: none;
    }

/* Navigation */
#header #nav{
    width: auto;
    height: 32px;
    position: absolute;
    right: 10px;
    top: 83px;
    background: transparent url(Images/bg_nav.gif) repeat-x left top;
}
    #header #nav li{
        display: inline;
        padding: 0;
    }
        #header #nav li a{
            height: 32px;
            background-color: Transparent;
            background-position: left top;
            background-repeat: no-repeat;
            display: block;
            float: left;
            margin: 0 2px 0 0;
        }
            #header #nav li a span{
                display: none;
            }
        #header #nav li a:hover{
            background-position: 0px -32px;
        }
        #header #nav li a.home{
            width: 79px;
            background-image: url(Images/nav_home.gif);
        }
        #header #nav li a.residential{
            width: 135px;
            background-image: url(Images/nav_residential.gif);
        }
        #header #nav li a.commercial{
            width: 144px;
            background-image: url(Images/nav_commercial.gif);
        }
        #header #nav li a.existing{
            width: 194px;
            background-image: url(Images/nav_existingsystems.gif);
        }
        #header #nav li a.about{
            width: 129px;
            background-image: url(Images/nav_aboutkmg.gif);
            margin: 0;
        }
        #root #header #nav li a.home,
        .residential #header #nav li a.residential,
        .commercial #header #nav li a.commercial,
        .existingsystems #header #nav li a.existing,
        .about #header #nav li a.about{
            background-position: 0px -64px;
        }
        #root #header #nav li a.home:hover,
        .residential #header #nav li a.residential:hover,
        .commercial #header #nav li a.commercial:hover,
        .existingsystems #header #nav li a.existing:hover,
        .about #header #nav li a.about:hover{
            background-position: 0px -96px;
        }

/* Footer */
#footer #footer-left,
#footer #footer-right{
    width: 50%;
    font-size: 11px;
    margin: 5px 0 0;
}
#footer #footer-left{
    float: left;
    text-align: left;
}
    #footer p{
        font-size: 11px;
        margin: 0;
    }
    #footer #footer-left ul{
        list-style: none;
        margin: 4px 0;
    }
        #footer #footer-left ul li{
            background: transparent none;
            border-left: solid 1px #999;
            display: inline;
            padding: 0 3px 0 9px;
        }
        #footer #footer-left ul li.first{
            border-left: none;
            padding-left: 0;
        }
#footer #footer-right{
    float: right;
}
    #footer #footer-right address,
    #footer #footer-right p{
        font-size: 11px;
        margin: 0;
        text-align: right;
    }

/* Quick Form */
#QuickForm{
    width: auto;
    height: 295px;
    border: solid 2px #ccc;
    margin: 10px 0;
}
    #QuickForm h2{
        background: #870000;
        color: #fff;
        font-size: 14px;
        margin: 0;
        padding: 2px 0 2px 5px;
    }
    #QuickForm .name, #QuickForm .phone, #QuickForm .email, #QuickForm .subject, #QuickForm .comments{
        height: 22px;
        display: block;
        padding: 3px 0 0;
    }
    #QuickForm .comments{
        height: 70px;
        margin-bottom: 5px;
    }
    #QuickForm p{
        font-size: 11px;
        margin: 5px 10px 10px;
    }
    #QuickForm label{
        width: 70px;
        display: block;
        float: left;
        font-size: 11px;
        margin: 2px 0 2px 10px;
        padding: 2px 5px 2px 0;
        text-align: right;
    }
    #QuickForm input{
        width: 170px;
        color: #333;
        float: left;
        font-size: 11px;
    }
    #QuickForm select{
        width: 174px;
        color: #333;
        float: left;
        font-size: 11px;
    }
    #QuickForm textarea{
        width: 170px;
        height: 60px;
        color: #333;
        float: left;
        font-size: 11px;
    }
    #QuickForm .button{
        margin-left: 85px;
    }
    #QuickForm .req{
        display: block;
        float: left;
        margin-left: 5px;
    }

/* Promo Ads */
#PromoAds{
}
    #PromoAds ul{
    }
        #PromoAds ul li{
            background: transparent url(Images/bullet1.gif) no-repeat left;
            font-size: 11px;
            font-weight: bold;
            line-height: 24px;
            padding: 2px 0 2px 14px;
        }
            #PromoAds ul li a{
                border-bottom: dotted 1px #666;
                line-height: 20px;
                padding: 4px 0;
            }
            #PromoAds ul li a:hover{
                border-bottom: solid 1px #670000;
                text-decoration: none;
            }

/* Package Selector */
#selectterms{
    width: 620px;
    height: 30px;
    position: relative;
    background: transparent url(Images/bg_terms.gif) no-repeat left top;
    display: block;
    list-style: none;
}
    #selectterms li{
        background: transparent none;
    }
        #selectterms li a{
            width: 127px;
            height: 30px;
            display: block;
        }
            #selectterms li a span{
                display: none;
            }
        #selectterms li #terms3year{
            position: absolute;
            left: 0;
            top: -2px;
            background: transparent url(Images/terms_3year.gif) no-repeat;
        }
        #selectterms li #terms3year{ background-position: left 0px; }
        #selectterms li #terms3year:hover{ background-position: left -30px; }
        #selectterms li #terms3year.selected{ background-position: left -60px; }
        #selectterms li #terms3year.selected:hover{ background-position: left -90px; }
        
        #selectterms li #terms1year{
            position: absolute;
            left: 115px;
            top: -2px;
            background: transparent url(Images/terms_1year.gif) no-repeat;
        }
        #selectterms li #terms1year{ background-position: left 0px; }
        #selectterms li #terms1year:hover{ background-position: left -30px; }
        #selectterms li #terms1year.selected{ background-position: left -60px; }
        #selectterms li #terms1year.selected:hover{ background-position: left -90px; }
        
        #selectterms li #terms3year.selected,
        #selectterms li #terms1year.selected{
            z-index: 10;
        }

/* Residential */
.packagelist{
    position: relative;
    background: transparent url(Images/bg_packagelist.jpg) repeat-y right -12px;
    * background-position: right top;
    border: solid 2px #870000;
    margin: 5px 0 15px;
    padding: 0 0 25px 0;
}
    .packagelist .cta{
        width: 260px;
        height: 20px;
        position: absolute;
        right: 138px;
        bottom: -25px;
        * bottom: 0;
        background: transparent url(Images/package_cta.gif) no-repeat left top;
        display: block;
    }
        .packagelist .cta span{
            display: none;
        }
    .packagelist .price{
        width: 120px;
        color: #fff;
        float: right;
        font-size: 12px;
    }
        .packagelist .price p{
            color: #fff;
            font-weight: bold;
            margin: 0;
        }
        .packagelist .price .res3year_basic,
        .packagelist .price .res3year_deluxe,
        .packagelist .price .res3year_premium,
        .packagelist .price .res1year_hardwire,
        .packagelist .price .res1year_wireless,
        .packagelist .price .com3year_basic,
        .packagelist .price .com3year_premium,
        .packagelist .price .existing3year{
            width: 90px;
            height: 140px;
            margin: 0 0 0 5px;
        }
        .packagelist .price .existing3year{
            height: 90px;
        }
        .packagelist .price div span{
            display: none;
        }
        .packagelist .price .res3year_basic{
            background: transparent url(Images/price_res3yr_basic.png) no-repeat left top;
        }
            * html .packagelist .price .res3year_basic{
                background: transparent none;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/App_Themes/Default/Images/price_res3yr_basic.png", sizingMethod="crop");
            }
        .packagelist .price .res3year_deluxe{
            background: transparent url(Images/price_res3yr_deluxe.png) no-repeat left top;
        }
            * html .packagelist .price .res3year_deluxe{
                background: transparent none;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/App_Themes/Default/Images/price_res3yr_deluxe.png", sizingMethod="crop");
            }
        .packagelist .price .res3year_premium{
            background: transparent url(Images/price_res3yr_premium.png) no-repeat left top;
        }
            * html .packagelist .price .res3year_premium{
                background: transparent none;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/App_Themes/Default/Images/price_res3yr_premium.png", sizingMethod="crop");
            }
        .packagelist .price .res1year_hardwire{
            background: transparent url(Images/price_res1yr_hardwire.png) no-repeat left top;
        }
            * html .packagelist .price .res1year_hardwire{
                background: transparent none;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/App_Themes/Default/Images/price_res1yr_hardwire.png", sizingMethod="crop");
            }
        .packagelist .price .res1year_wireless{
            background: transparent url(Images/price_res1yr_wireless.png) no-repeat left top;
        }
            * html .packagelist .price .res1year_wireless{
                background: transparent none;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/App_Themes/Default/Images/price_res1yr_wireless.png", sizingMethod="crop");
            }
        .packagelist .price .com3year_basic{
            background: transparent url(Images/price_com3yr_basic.png) no-repeat left top;
        }
            * html .packagelist .price .com3year_basic{
                background: transparent none;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/App_Themes/Default/Images/price_com3yr_basic.png", sizingMethod="crop");
            }
        .packagelist .price .com3year_premium{
            background: transparent url(Images/price_com3yr_premium.png) no-repeat left top;
        }
            * html .packagelist .price .com3year_premium{
                background: transparent none;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/App_Themes/Default/Images/price_com3yr_premium.png", sizingMethod="crop");
            }
        .packagelist .price .existing3year{
            background: transparent url(Images/price_existing3yr.png) no-repeat left top;
        }
            * html .packagelist .price .existing3year{
                background: transparent none;
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/App_Themes/Default/Images/price_existing3yr.png", sizingMethod="crop");
            }
    .packagelist legend{
        margin-left: 10px;
    }
    .packagelist h4{
        margin: 2px 0 2px 15px;
    }
    .packagelist ul{
        font-size: 12px;
        line-height: 20px;
        margin: 5px 0 10px 20px;
    }
        .packagelist ul li{
            width: 200px;
            background: transparent url(Images/bullet2.gif) no-repeat left 5px;
            display: block;
            float: left;
            margin: 0 20px 0 0;
            padding: 2px 0 2px 15px;
        }

/* Product List Styles */
#productlist_wrap{
    width: 620px;
    height: 400px;
    position: relative;
    border-top: solid 5px #870000;
}
    #productlist{
        width: 620px;
        height: 100px;
        position: absolute;
        left: 0;
        bottom: 0;
        list-style: none;
    }
        #productlist li{
            display: inline;
            float: left;
            margin: 0;
            padding: 0;
        }
            #productlist li a{
                height: 100px;
                background: transparent no-repeat left top;
                display: block;
                float: left;
            }
                #productlist li a span{
                    display: none;
                }
            #productlist li a:hover{
                background-position: left bottom;
            }
            #productlist li a#li_motiondetector{
                width: 91px;
                background-image: url(Images/prodlist_motiondetector.jpg);
            }
            #productlist li a#li_smokedetector{
                width: 82px;
                background-image: url(Images/prodlist_smokedetector.jpg);
            }
            #productlist li a#li_glassbreak{
                width: 84px;
                background-image: url(Images/prodlist_glassbreak.jpg);
            }
            #productlist li a#li_lcdkeypad{
                width: 100px;
                background-image: url(Images/prodlist_keypad.jpg);
            }
            #productlist li a#li_carbonmonoxide{
                width: 108px;
                background-image: url(Images/prodlist_carbonmonoxide.jpg);
            }
            #productlist li a#li_cellbackup{
                width: 75px;
                background-image: url(Images/prodlist_cellbackup.jpg);
            }
            #productlist li a#li_keyfob{
                width: 80px;
                background-image: url(Images/prodlist_keyfob.jpg);
            }
    #productlist_wrap div{
    }
        #productsmain,
        #motiondetector,
        #smokedetector,
        #glassbreak,
        #lcdkeypad,
        #carbonmonoxide,
        #cellbackup,
        #keyfob{
            width: 620px;
            height: 300px;
            position: relative;
            background: transparent no-repeat left top;
            display: none;
        }
        #productsmain{ background-image: url(Images/house_main.jpg); }
        #motiondetector{ background-image: url(Images/house_motiondetector.jpg); }
        #smokedetector{ background-image: url(Images/house_smokedetector.jpg); }
        #glassbreak{ background-image: url(Images/house_glassbreak.jpg); }
        #lcdkeypad{ background-image: url(Images/house_lcdkeypad.jpg); }
        #carbonmonoxide{ background-image: url(Images/house_carbonmonoxide.jpg); }
        #cellbackup{ background-image: url(Images/house_cellbackup.jpg); }
        #keyfob{ background-image: url(Images/house_keyfob.jpg); }
        
            #productlist_wrap div h3,
            #productlist_wrap div a{
                display: none;
            }
            #productlist_wrap div .info{
                width: 275px;
                position: absolute;
                left: 10px;
                top: 45px;
            }
                #productlist_wrap div .info p{
                    font-size: 11px;
                    margin: 0 0 10px;
                    text-align: left;
                }

/* Question List */
#questionlist{
}
    #questionlist h3.question{
        font-size: 16px;
        margin: 2px 0 10px 0;
    }
        #questionlist h3.question a{
            background: transparent url(Images/icon_question.gif) no-repeat 0px 4px;
            padding: 0 0 0 20px;
            text-decoration: none;
        }
        #questionlist h3.question a:hover{
            color: #666;
        }
    #questionlist .answer{
        display: none;
    }
        #questionlist .answer p{
            background: transparent url(Images/icon_answer.gif) no-repeat 0px 10px;
            border-top: dotted 1px #999;
            display: block;
            font-style: italic;
            padding: 8px 0 0 24px;
        }