/* ---------------------------------------------------------------------------------

	File: 			layout.css
	Author: 		Walter Botich
	Created: 		01/07/08
	Modified:		07/30/08
	Description: 	Sets default layout for the site
					Included as part of screen.css

---------------------------------------------------------------------------------- */

/* GLOBALS ----------------------------------------------------------------------- */
body {
    margin: 0 auto;
    text-align: center;
}
span.grouping {
    display: block;
    margin: .5em 0;
    padding: .25em .5em;
    font-size: 1.3em;
    font-weight: bold;
    color: #ce8b0e;
    background: #f9d89b url("../../../images/bg-grouping.gif") no-repeat top right;
    border-bottom: 1px solid #ce8b0e;
}

/* Generic container */
.container {
    margin: 0 auto;
}

/* Scrollable region */
.scroll {
    height: 290px;
    margin: 1em 0;
    overflow: auto;
    /* IE bug fix */
    overflow-x: hidden;
    overflow-y: scroll;
    /* end bug fix */
    background: #ffffff;
    border: 1px solid #cccccc;
}

/* Columns */
.two-column, .three-column, .four-column { 
    /* IE 5.5/6 bug fix */
    display: inline;
    /* end bug fix */
    float: left;
    margin: 0 10px;
}
    /* 2 column layout */
    .two-column {
        width: 46%;
    }

    /* 3 column layout */
    .three-column {
        width: 30%;
    }
    /* 4 column layout */
    .four-column {
        width: 210px;
        font-size: .8em;
        margin: 0 13px;
    }
        .four-column div {
            border: 2px solid #000000;  
        }
            .four-column div p {
                margin: 0;
                text-align: center;
                background: #ffffff;
            }
        .four-column h2 {
            padding: .3em 0;
            font-size: 1.2em;
            text-align: center;
            text-transform: uppercase;
        }
        .four-column dl {
            padding: 1em;
            color: #ffffff;   
        }
            .four-column dl dt {
                color: #000000;   
            }
            .four-column dl dd {
                padding-left: .5em; 
            }

/* Generic link buttons */ 
a.button, a.button:visited {
    padding: .15em .3em;
    font-weight: bold;
    color: #ffffff;
    background: #ee3a43;
    border: 1px solid #990000;
}
a.button:hover {
    text-decoration: none;
    color: #ffffff;
    background: #cc3a43;
}

/* Multi media classes */
.video-viewer, .map-viewer {
    margin: 1em 0;
    background: #000000;
    border: 1px solid #cccccc;
}
    .video-viewer {
        width: 332px;
        height: 290px;
    }
    .map-viewer {
        width: 100%;
        height: 450px;
    }

.map-info {
    position: absolute;
    top: -5px; left: 305px;
    z-index: 1; /* make sure message is on top of the map */
    width: 250px;
}

/* UNIQUE PAGE CONTAINERS ----------------------------------------------------------- */

/* Can be used as the "root" container */
#page {
    margin: 0 auto;
    padding: 0 25px;
    width: 950px;
    text-align: left;
}
    
/* Header content */
#header {

}
    #header h1 {
        display: none;   
    }

/* Navigation menus */
#nav-horz {
    float: left;
    width: 100%;
    margin: 0 0 1em 0;
    padding: .25em .25em 0 0;
    font-size: .9em;
    color: #ffffff;
	background: #000000 url("../../../images/bg-nav_horz.gif") repeat-x top;
}
    #nav-horz ul {
	    float: left;
	    margin-top: .2em;
    }
        #nav-horz ul li {
            display: inline;
            margin: 0;
            padding: 0 .75em;
            list-style-type: none;
            font-weight: bold;
        }
        #nav-horz a {
            color: #ffffff;
        }
        #nav-horz a:hover {
            color: #ee3a43;
	        text-decoration: none;
        }

#nav-vert {
    float: left;
    width: 170px;
    text-align: right;
}
    #nav-vert img {
        margin-bottom: .75em;
    }
    #nav-vert ul {
        font-size: .8em;
    }
        #nav-vert ul li {
            margin: 0 0 .75em;
            list-style-type: none;
            font-weight: bold;
        }
        #nav-vert ul li a {
            display: block;
            width: 99%;
            padding: .25em .25em;
        }
        #nav-vert ul li a:hover {
            color: #ffffff;
	        text-decoration: none;
	        background: #ee3a43;
        }

/* Main content */
#content {
    float: left;
    width: 600px;
    margin: 0 20px;
    background: url("../../../images/bg-content.jpg") repeat-y;
    border-bottom: 1px solid #ee3a43;
}
    #content h2 {
        color: #ee3a43;
    }
    
/* Footer content */
#footer {
    clear: both;
    padding: .5em 0 0;
    font-size: .8em;
}
    #footer p {
        font-size: .9em;
        color: #999999;
    }
    #footer ul {
	    list-style-type: none;
	    text-align: center;
    }
        #footer ul li {
            display: inline;
            margin: .25em 1em .25em;
        }

/* ADDITIONAL CLASSES --------------------------------------------------------------- */

/* Path information */
.breadcrumbs {
    padding: .5em .75em;
    font-size: .7em;
    border-bottom: 2px solid #ffffff;
}

/* Login information */
.login {
    float: right;
    font-size: .9em;
    text-align: right;
}

.search {
    float: right;
}

.section {
    padding: 1em 1.5em;
    font-size: .8em; 
}
.case-study {
    width: 72%   
}
#locations div {
    margin: .25em .5em;
}
#locations h3 {
    padding: .25em .5em;
    background: #666666;
    color: #ffffff;
}

.product-logo {
    margin: 0;
    background: #ffffff;
    border: 1px solid #cccccc !important;
}

.key-terms {
    min-height: 13em;
    margin: 0;
    padding: 1em;
    font-size: .8em;
    background: #000000 url("../../../images/bg-key_terms.gif") no-repeat bottom;   
}

.international {
    margin-bottom: .5em;
    padding: .5em;
    font-size: .8em;
    text-align: center;
}

.featured-column {
    float: left;
    width: 140px;
}
.featured {
	font-size: .8em;
}
    .featured h4 {
        padding: .15em;
        text-align: center;
        color: #ffffff;
        background: #000000 url("../../../images/bg-featured.gif") no-repeat top;
        border-bottom: 1px solid #ffffff;
    }
    .featured dl {
    }
        .featured dl dt {
            padding: .25em;
            text-align: center;
            background: #333333;
        }
            .featured dt a {
                color: #efefef;   
            }
            .featured dt a:hover {
                color: #ee3a43;
                text-decoration: none;
            }
        .featured dl dd {
            padding: .75em;
            font-size: .9em;
        }

        
/* Special classes for each section */
.breadcrumbs, .featured, .rubber_lining, .geomembrane, .modular_roofing, .thru-wall_flashing {
    color: #ffffff;
}
    .breadcrumbs, .featured {
        background: #000000;   
    }
    .rubber_lining {
        background: #00457c;
    }
    .geomembrane {
        background: #00853e;
    }
    .modular_roofing {
        background: #4c4a4b;
    }
    .thru-wall_flashing {
        background: #b3a663;
    }
    
.breadcrumbs a, .featured a, .rubber_lining a, .geomembrane a, .modular_roofing a, .thru-wall_flashing a,
.breadcrumbs a:visited, .featured a:visited, .rubber_lining a:visited, .geomembrane a:visited, .modular_roofing a:visited, .thru-wall_flashing a:visited {
    color: #ffffff;
}
.breadcrumbs a:hover, .featured a:hover, .rubber_lining a:hover, .geomembrane a:hover, .modular_roofing a:hover, .thru-wall_flashing a:hover {
    color: #ee3a43;
}

.modal-background {
    background-color: #dadada;
    filter: alpha(opacity=70);
    opacity: 0.7;
}