/* --- Studio Mooch ------------------------- */
/* --- Amy Largent - Designer --------------- */
/* --- www.StudioMooch.com -------------------*/
/* --- Built for Ridgewood Apartments ------- */
/* --- (c)2015-2024 ------------------------- */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~ GENERAL FORMATTING ~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    /* To make responsive design work correctly */
    @-ms-viewport {
        width: extend-to-zoom;
        zoom: 1.0;
        }
    
    * {
        margin: 0;
        padding: 0;
        border: none;
    }
    
    html {
        height: 100%;
        font-size: 16px;
        font-family: Tahoma, Geneva, sans-serif;
        color: #3a3a3a;
        line-height: 1.25rem;
    }
    @media screen and (max-width: 799px) { html { font-size: 14px; } }
    @media screen and (min-width: 800px) { html { font-size: 16px; } }

    body {background-color: white;}
    #page-container { width: 100%; margin: 0 auto; }
    .accent { color: #acdb8b; font-weight: bold; }
    
    .youtube-videos {
        margin: 40px 0;
    }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    /* Contact Info */
    @media only screen and (max-width: 949px) { #contact-info { text-align: center; margin-top: 10px !important; } }
    @media only screen and (min-width: 950px) { #contact-info { float: right; margin-right: 60px; margin-top: 20px; } }
    #contact-info p { font-size: 11pt; letter-spacing: 0.06em; line-height: 1.75em; }
    #contact-info a { color: #3a3a3a; text-decoration: none; }

    /* Logo */
    @media only screen and (max-width: 949px) { #logo { text-align: center; margin: 40px 0; } }
    @media only screen and (min-width: 950px) { #logo { width: 20%; max-width: 230px; float: left; margin-left: 20px; } }
    @media only screen and (min-width: 950px) { #logo img { width: 100%; }}
    #logo img a { text-decoration: none; }

    /* Header Content */
    @media only screen and (min-width: 600px) { #page-header-content { max-width: 1500px; margin: 0 auto; }}


    /* ~~~~~~ NAVIGATION ~~~~~~ */

    /* Mobile */
    @media only screen and (max-width: 599px) {
        #navigation-MOBILE ul li { text-align: center; border-bottom: 1px solid #968879; }
        #navigation-MOBILE ul li a { display: inline-block; width: 100%; line-height: 40pt; text-decoration: none; color: #3e9e0c; }
        #navigation-PC { display: none; }
    }

    /* Computer - Horizontal nav below logo*/
    @media only screen and (min-width: 600px) {
        #navigation-MOBILE { display: none; }
        #navigation-PC a { text-decoration: none; color: #3e9e0c; }
        .nav-item { float: left; text-align: center; width: 14.28%; }
    }

    /* Computer - Horizontal nav in-line with logo*/
    @media only screen and (min-width: 950px) {
        #navigation-PC { float: right; width: 75%; margin: 60px 20px 0 0; }
    }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~ GENERAL CONTENT ~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    h1 {
        text-align: center;
        color: #3e9e0c;
        margin: 4rem 0 0.2rem;
        text-transform: uppercase;
        line-height: 26pt;
    }
    
    h1.welcome { text-transform: capitalize; }
    h1.first { margin-top: 4rem !important; }
    h1.extra-top-space { margin-top: 100px; }
    h2 { text-align:  center; text-transform: uppercase; font-size: 12pt; }
    h3 { font-weight: normal; margin-bottom: 6px;}
    p { font-size: 1rem; }
    @media only screen and (max-width: 949px) { p { padding: 0 1rem; } }
    a { color: #4c7fcb; }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~ HOME ~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


    /* ------------------ */
    /* -- Feature Image - */
    /* ------------------ */
    .feature-image-MOBILE, .feature-image-PC { margin-top: 40px; }
    .feature-image-MOBILE img, .feature-image-PC img { width: 100%; padding: 15px 0; border-top: 1px solid #70b244; border-bottom: 1px solid #70b244; }
    .feature-image-MOBILE h1, .feature-image-PC h1 { color: black; margin: 2rem 0; }
    
    /* Feature Image Smallest - No border, text underneath */
    @media only screen and (max-width: 599px) {
        .feature-image-PC { display:none; }
        .feature-image-MOBILE img { border: none; }
        .feature-image-MOBILE p { margin: 0 5% 30px 5%; line-height: 2em; }
    }
    
    /* Feature Image - Add borders for new navigation style (horizontal nav) */
    @media only screen and (min-width: 600px) {
        .feature-image-PC { display: none; }
        .feature-image-MOBILE p { margin: 0 5% 30px 5%; line-height: 2em; }
    }

    /* Feature Image - Move text inside image for large screen */
    @media only screen and (min-width: 1220px) {
        .feature-image-PC { display: inherit; }
        .feature-image-MOBILE { display: none; }
        .feature-image-PC { position: relative; }
        .feature-image-PC img {}
        .feature-text { width: 28%; z-index: 100; position: absolute; top: 0; right: 20px; }
        .feature-text h1 { margin-top: 2.5rem; }
        .feature-text p {font-size: .85rem; }
    }

    /* Feature Image - Minor text adjustments for larger sizes */
    @media only screen and (min-width: 1100px) { .feature-text p { font-size: .95rem; line-height: 1.5rem; } }
    @media only screen and (min-width: 1450px) { .feature-text p { line-height: 2.5rem; } }
    @media only screen and (min-width: 1680px) { .feature-text p { font-size: 1.25rem; color: #675d52; } }
    @media only screen and (min-width: 1900px) { .feature-text h1 { font-size: 2.5rem; margin-top: 5rem; margin-bottom: 3rem; } .feature-text { width: 25%; right: 60px; } }


    /* ------------------ */
    /* -- Apt. Layouts -- */
    /* ------------------ */
    .apartment-layout-frame { padding-bottom: 50px; }
    .apartment-layout img { margin-top: 15px; max-width: 623px; }
    
    /* Single column layout */
    @media only screen and (max-width: 949px) {
        .apartment-layout { width: 90%; margin: 50px auto 0 auto; }
        .apartment-layout p { padding: 0; }
        .floorplan-image { text-align: center; }
        .floorplan-image img { width: 100%; }
    }
    
    /* Dual column layout */
    @media only screen and (min-width: 950px) {
        .apartment-layout-frame { max-width: 1600px; margin: 0 auto; }
        .apartment-layout { float: left; width: 44%; margin: 50px 3% 0 3%; }
        .floorplan-image img { width: 100%; }
    }

    /* ------------------ */
    /* --- Amenities ---- */
    /* ------------------ */
    .amenities { margin-top: 40px; max-width: 1400px; }
    .amenities ul { list-style-type: none; }
    
    /* Single column layout */
    @media only screen and (max-width: 949px) {.amenities ul li { text-align: center; line-height: 26pt; }}
    
    /* Triple column layout */
    @media only screen and (min-width: 950px) {
        .amenities { width: 90%; margin: 40px auto 0 auto; }
        .amenities ul { float: left; width: 30%; margin: 0 1.5%; }
        .amenities li { font-size: 10pt; line-height: 26pt; }
    }
    
    /* Font Adjustments */
    @media only screen and (min-width: 1050px) { .amenities li { font-size: 10pt; line-height: 26pt; } }
    @media only screen and (min-width: 1100px) { .amenities li { font-size: 11pt; line-height: 28pt; } }
    @media only screen and (min-width: 1250px) { .amenities li { font-size: 12pt; line-height: 30pt; } }
    
    
    /* ------------------ */
    /* ---- Gallery ----- */
    /* ------------------ */

    .gallery-intro { max-width: 1532px; margin: 60px auto 0 auto; }
    .gallery-intro img { width: 100%; }
    /* For actual gallery styling, see both demo.css and style.css in css folder */
    
    
    /* ------------------ */
    /* ---- Reviews ----- */
    /* ------------------ */
    .reviews { max-width: 1500px; margin: 50px auto 0 auto; }
    .reviews img { padding-bottom: 10px; }
    .review p { font-size: 12pt; font-style: italic; color: #696969; font-family: Georgia, serif; line-height: 1.6em; }
    .review p strong { color: #3a3a3a; }
    .reviews a { color: #4c7fcb; text-decoration: underline; }
    
    /* Single column layout */
    @media only screen and (max-width: 949px) {
        .five-stars {text-align: center; }
        .review { width: 80%; margin: 0 auto 40px auto; }
    }
    
    /* Triple column layout */
    @media only screen and (min-width: 950px) {
        .review { float: left; width: 25%; margin: 0 4%; }
        .three-reviews + .three-reviews { margin-top: 60px; }
    }
    
    
    /* ------------------ */
    /* ---- About WC ---- */
    /* ------------------ */
    .about { max-width: 1400px; }
    .about-westchester { margin-top: 40px; }
    .about-westchester p { margin-bottom: 20px; line-height: 1.75rem; }
    .main-westchester-image img { padding: 15px 0;  border-top: 1px solid #70b244; border-bottom: 1px solid #70b244; margin-bottom: 25px; }
    .local-events { text-transform: uppercase; font-weight: bold; margin-bottom: 10px; }
    .thing-to-do img { margin-bottom: 10px; }
    .thing-to-do p {font-size: 10pt; }
    .thing-to-do a { text-decoration: none; color: #3a3a3a; }
    
    /* Single column layout */
    @media only screen and (max-width: 749px) {
        .about-westchester p {
            margin: 5%;
        }
        .main-westchester-image img { width: 100%; }
        .about-westchester-images { text-align: center; }
        .thing-to-do { margin-bottom: 30px; }
    }
    
    /* Single column layout with 3 event images in single row*/
    @media only screen and (min-width: 750px) {
        .about { margin: 0 30px; }
        .about-westchester-images { text-align: center; }
        .thing-to-do { float: left; width: 30%; margin: 0 1.5%; }
        .three-westchester-images { max-width: 734px; margin: 0 auto; }
    }
    
    /* Double column layout with margin */
    @media only screen and (min-width: 1150px) {
        .about { margin: 0 30px; }
        .about-westchester { float: left; width: 39%; }
        .about-westchester p {font-size: 11pt; }
        .about-westchester-images { float: right; width: 59%; margin-top: 50px;}
    }
    
    /* Centering once full-content-width */
    @media only screen and (min-width: 1500px) {.about { margin: 0 auto; }}
    
    
    /* ------------------ */
    /* -- Apply Button -- */
    /* ------------------ */
    .apply-today { text-align: center; margin-top: 100px; }
    .apply-today img { width: 90%; max-width: 502px; }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~ PAGE HEADER IMAGES ~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .page-header-image { width: 100%; margin-top: 40px; }
    .page-header-image img { width: 100%; padding: 15px 0; border-top: 1px solid #968879; border-bottom: 1px solid #968879; }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~ FLOORPLANS ~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

    .apartment-info { width: 90%; margin: 30px auto 0 auto; text-align: center; }
    .apartment-info img { width: 100%; max-width: 623px; margin-bottom: 20px; }
    .apartment-info h3 { text-align: left; font-weight: bold; }
    .apartment-info ul { margin: 15px 0 0 20px; }
    .apartment-info ul li { text-align: left; padding: 8px 0; }
    
    /* Dual column layout */
    @media only screen and (min-width: 1300px) {
        .apartment-info { width: 70%; }
        .apartment-info img { float: left; margin-right: 80px; }
        .apartment-info ul { margin-left: 725px; }
    }
    
    
    /* ------------------ */
    /* --- Want More ---- */
    /* ------------------ */
    .want-more { text-align: center; }
    .want-more p { margin: 25px 0 5px 0; }
    
    /* Dual column layout */
    @media only screen and (min-width: 750px) {
        .want-more { width: 80%; max-width: 800px; margin: 0 auto; }
        .more-section { float: left; width: 50%; }
    }
    
    /* 4 column layout */
        @media only screen and (min-width: 1200px) {
        .want-more { max-width: 1400px; }
        .more-section { width: 25%; }
        .more-section img { width: 90%; max-width: 298px;}
    }
    
    
    /* ------------------ */
    /* --- Amenities ---- */
    /* ------------------ */
    .amenities-list { width: 90%; margin: 0 auto; }
    .amenities-list h3 { margin-top: 40px; font-weight: bold; }
    .amenities-list ul { margin-left: 30px; }
    .amenities-list li { padding: 6px 0; }
    
    /* 2 column layout */
    @media only screen and (min-width: 900px) {
        .amenities-list { width: 80%; max-width: 1050px; }
        .amenities-half { float: left; width: 50%; }	
    }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~ NEIGHBORHOOD ~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    
    .neighborhood { max-width: 1200px; margin: 0 auto; }
    .neighborhood p { padding: 30px 10px 0 10px; line-height: 1.75em; }
    .neighborhood h3 { font-weight: bold; margin-top: 30px; margin-left: 10px; }
    .neighborhood ul { margin: 5px 0 0 30px; }
    .links { margin: 15px 0 0 40px; line-height: 1.75em; }
    
    
    /* Some other dudes css */
    /*  SECTIONS  */
    .section { clear: both; padding: 0px; margin: 0px; }
    .section-group * { margin: 0; padding: 0; }
    
    /*  COLUMN SETUP  */
    .col { display: block; float:left; margin: 1% 0 1% 1.6%; }
    .col:first-child { margin-left: 0; }
    
    /*  GROUPING  */
    .group:before,
    .group:after { content:""; display:table; }
    .group:after { clear:both;}
    .group { zoom:1; /* For IE 6/7 */ }
    
    /*  GRID OF FOUR  */
    .span_4_of_4 { width: 100%; }
    .span_3_of_4 { width: 74.6%; }
    .span_2_of_4 { width: 49.2%; }
    .span_1_of_4 { width: 23.8%; }
    
    /*  GO FULL WIDTH BELOW 480 PIXELS */
    @media only screen and (max-width: 480px) {
        .col {  margin: 1% 0 1% 0%; }
        .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
    }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~ ABOUT RIDGEWOOD ~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .about-paragraph { max-width: 900px; margin: 0 auto; }
    .about-paragraph p { padding: 30px 10px 0 10px; line-height: 1.75em; }
    .association-logo { text-align: center; margin-top: 40px; }
    .waitlist-accent {color: #378612; font-weight: bold; }
    .waitlist {
        width: 100%;
        max-width: 700px;
        margin: 25px auto;
        padding: 0 5%;
    }
    .waitlist p {
        font-size: 12pt;
        color: #378612;
        line-height: 1.75em;
        font-style: italic;
    }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~ AVAILABILITY ~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .availability { text-align: center; }
    .availability h3 { font-weight: bold; margin: 25px 0 5px 0; }
    .availability-pic { text-align: center; margin-top: 40px; }
    .forms { margin-top: 55px; text-align: center; }
    
    /* Dual column layout */
    @media only screen and (min-width: 480px) {
        .forms { margin-left: 25px; }
        .forms img { margin: 0 10px; }
    }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~ CONTACT ~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    .contact-section { max-width: 950px; margin: 0 auto; }
    .contact-section iframe { padding: 0 5%; width: 90%; height: 400px; }
    .map-embed { text-align: center; margin: 40px 0; }
    .contact-info { text-align: center; }
    .contact-info p { margin-bottom: 30px; line-height: 1.75em;}
    
    /* Contact Info 2 column layout */
    @media only screen and (min-width: 930px) {
        .contact-section iframe {width: 600px; height: 400px;}
        .map-embed { float: left; margin-right: 30px; }
        .contact-info { float: left; text-align: left; margin-top: 40px; }
    }
    
    /* FORM STYLES */
    form { width: 90%; margin: 30px auto 0 auto; max-width: 1160px; font-size: 11pt; }
    .form-line { width: 100%; margin-bottom: 15px; }
    .form-label { float: left; width: 200px; }
    .form-entry { float: left; }
    input[type=text], select { border: 1px solid #968879; padding: 6px 10px; width: 240px; font-size: 12pt; color: #a28b7d; } 
    input[type=radio] { margin: 0 8px; }
    input[type=checkbox] { margin-right: 5px; }
    textarea { border: 1px solid #968879; padding: 6px 10px; width: 100%; height: 100px; font-size: 12pt; color: #a28b7d; font-family: Tahoma, Geneva, sans-serif; }
    form h3 { font-size: 11pt; font-weight: bold; margin-bottom: 20px; }
    .submit-form { background: url("images/Send-Form.jpg") no-repeat scroll 0 0 transparent; cursor: pointer; height: 63px; width: 190px; margin-top: 20px; }
    
    /* Single column layout */
        @media only screen and (max-width: 1199px) {
        form { text-align: center; }
        form h3 { margin-top: 30px; }
        .form-label { width: 100%; margin-top: 10px; }
        .form-entry { width: 100%; }
        input[type=text], select, input[type=radio], input[type=checkbox] { margin-top: 5px; }
        table { width: 80%; max-width: 420px; margin: 0 auto; }
        tr { width: 100%; }
        td { width: 33%; text-align: left; }
        textarea { width: 90%; max-width: 420px; margin-top: 20px; }
    }
    
    /* 2 column, side-by-side layout */
    @media only screen and (min-width: 1200px) {
        .form-section { float: left; width: 48%; margin: 0 1%; }
        .submit-button { text-align: center; } 
        td { padding: 4px 10px; } 
        h2.contact-header { margin-top: 20px; }
    }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~ FOOTER ~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    #page-container-footer { margin: 60px 0; text-align: center; }
    #page-container-footer p { font-size: 10pt; line-height: 1.75em; }
    .credits { color: #8d8d8d; }
    .credits a { color: #8d8d8d; }
    #page-container-footer img { margin-top: 20px; margin-bottom: 50px; }