/**
 * Layout:       regions.css
 * Project:      Project name
 * Version:      1.0
 * Last change:  29/04/09
 * Assigned to:  Diego Lago (dl)
 * Primary use:  Website
 *
 *
 * The main layout consists of two basic blocks:
 * #outer-container is the main container for site content, branding, navigation, search, etc
 * #footer is used for site information that "sticks" to the bottom regardless viewport height
 *
 * The class "wide" is used throughout full width horizontal areas or regions of the layout
 *
 * The default number of columns is three, the order of the columns in the markup is
 * middle, left and right
 * middle is used for main copy, left for sub navigation and right for site highlights
 *
 * The template also supports two columns by overriding margins in #outer-content (main column)
 * and adding body classes
 *
 * Some regions are positioned absolute as their order in the markup does not match the visual order
 * This is because of accessibility best prectices and to improve SEO
 *
 * The template supports both, fixed and flexible widths
 * height units are preferred in ems for scalability
 * 
 *
 * For production merge all styles sheets to a single one and optimise it
 */

html, body, #outer-container {
    height: 100%;
    text-align: center;
}

body > #outer-container {
    height: auto;
    min-height: 100%;
}

#container {
    padding-bottom: 5.7em; /* must be same height as the footer */
}

#iframe-container {
    position:relative;
    top:-8em;
}

#outer-footer {
    clear: both;
    height: 6em;
    margin-top: -6em; /* negative value of footer height */
    position: relative;
    width:100%;
}

.wide {
    margin: 0 auto;
    max-width: 930px;
    min-width: 930px;
    padding: 0;
    position: relative;
    text-align: left;
    width: 930px;
}

/**
 * Columns DEFAULT
 * 3 Columns: left + middle + right
 */
#main {
    float: left;
    margin: 4.5em -19em 0 0;
    width: 100%;
}

#outer-content {
    float: right;
    margin-left: -19.2em;
    width: 100%;
}

#content {
    margin: 0 19em;
    position: relative;
}

#sub-navigation {
    position: relative;
    width: 17.5em;
    float: none;
}

#highlights {
    float: right;
    margin-top: 12em;
    width: 17.5em;
}

/**
 * Columns OVERRIDE
 * 2 columns: middle + right
 */
body.sidebar-right #content {
    margin-left: 0;
}

/**
 * Columns OVERRIDE
 * 2 columns: left + middle
 */
body.sidebar-left #content {
    margin-right: 0;
}

/**
 * Columns OVERRIDE
 * 1 column: middle
 */
body.no-sidebar #content {
    margin-left: 0;
    margin-right: 0;
}

/**
 * Absolute Positioning
 */
#outer-branding {
    background: #002F64 url(../../img/ui/bg-branding.png) repeat-x 0 0;
    position: relative;
    top: 0;
    width: 100%;
}

#branding {
    height: 19em; /* approx. 228px */
}

#carousel{
	float:right;
	height:140px;
}

#navigation {
    left: 0;
    position: absolute;
    top: -4.166em;
    width: 70%;
    z-index: 90;
}

#breadcrumb {
    left: 0;
    position: absolute;
    top: 1.3em;
    width: 150px;
    float: left;
    z-index: 80;
}

#log-in {
    height: 2.8em;
    right: 0;
    position: absolute;
    top: -3.6em;
    width: 20em;
}

#promo {
    height: 6em;
    left: 0;
    position: absolute;
    top: 3em;
    width: 100%;
}

#search {
    height: 4.5em;
    position: absolute;
    /*right: 0;*/
    left: 368px;
    top: 0;
    /*width: 38.6em;*/
    width: 565px;
}

/**
 * Clearing Classes
 */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.table{
	display: table;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {
    display: inline-block;
}
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}