/**
    Document   : containers
    Created on : Apr 15, 2009, 4:25:53 PM
    Author     : bgunnink

    Various and sundry classes pertaining to containers:  dimensions, accents, and colors.
*/


/**
    base container class is used to specify the existence of a border as well as internal padding
*/

.container {
    border-width: 1px;
    border-style: solid;
    padding: 0.3em;
}



/**
    a variety of color classes, both background and border
*/

.white {
    background-color: #FFFFFF;
    border-color: #ccc;
}

.green {
    background-color: #F2FFE1 !important;
    border-color: #76ca6a;
}

.red {
    border-color: #CC0000;
    background-color: #FFEBE8 !important;
}

.yellow {
    background-color:#FFF6BF !important;
    border-color: #FFD324;
}

.orange {
    background-color:#FDF4E1 !important;
    border-color: #F2A706;
}

.purple {
    background-color: #E2DDFF !important;
    border-color: #800080;
}

.blue {
    border-color: #CEDFF2;
    background-color: #EAF2FA !important;
}

.gray-dark {
    border-color: #CCC !important;
    background-color: #efefef;
}

.gray-light {
    border-color: #CCC !important;
    background-color: #f5f5f5;
}

.drop-shadow {
    border-width: 1px 2px 2px 1px !important;
}

/**
    rounding classes only work in firefox and webkit[safari|chrome] (for now)
*/

.rounded {
    -moz-border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
}

.rounded-top {
    -moz-border-radius-topleft: 0.4em;
    -moz-border-radius-topright: 0.4em;
    -webkit-border-top-left-radius: 0.4em;
    -webkit-border-top-right-radius: 0.4em;
}

.rounded-bottom {
    -moz-border-radius-bottomleft: 0.4em;
    -moz-border-radius-bottomright: 0.4em;
    -webkit-border-bottom-left-radius: 0.4em;
    -webkit-border-bottom-right-radius: 0.4em;
}


/**
    a prefab style for block-level containers with headers and optionally footers
*/

.block {
    border-width: 1px 2px 2px 1px;
    border-style: solid;
    border-color: #333;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    background-color: #fff;
    margin: 0.5em 0;
}

.block .block-title {
    border-width: 1px;
    border-color: #fff #fff #ddd #fff;
    border-style: solid;
    -moz-border-radius-topleft: 0.5em;
    -moz-border-radius-topright: 0.5em;
    -webkit-border-top-left-radius: 0.5em;
    -webkit-border-top-right-radius: 0.5em;
    background: #99C2FF url(/atecustom/images/block-title_bg.png) repeat-x scroll center center;
    margin:0;
    padding:0.2em;
}

/* for emergencies  */
.red .block-title {
    background: #ff6161 url(/atecustom/images/block-title-red_bg.png) repeat-x scroll center center;
}

.red .block-title h3 {
    color: #fff;
    text-shadow: 1px 1px #333; /* the white text needs a different text shadow */
}

/* for alerts  */
.yellow .block-title {
    background: #ff6161 url(/atecustom/images/block-title-yellow_bg.png) repeat-x scroll center center;
}

.block .block-title h3 {
    border: none;
    font-weight:bold;
}

.block .block-title h3 a {
    background-color: #fff;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    border: 1px solid #ccc;
    padding: 0.15em;
}

.block .block-title h3 a:hover {
    background-color: #ededed;
}

.block .block-content {
    padding: 0.5em;
}

.block .block-footer {
    border-width: 1px;
    border-color: #ddd #fff #fff #fff;
    border-style: solid;
    -moz-border-radius-bottomleft: 0.5em;
    -moz-border-radius-bottomright: 0.5em;
    -webkit-border-bottom-left-radius: 0.5em;
    -webkit-border-bottom-right-radius: 0.5em;
    background-color: #E9EEF1;
    margin:0;
    padding:0.2em;
    font-size: 0.9em;
}



/**
    various prefab widths.
    note that the number in the class name is always greater than the _actual_width because we need to allow
    for margins, IE bugs, etc.
*/

.width-25 {
    width:23% !important;
    margin-right:1%;
}

.width-50 {
    width: 47% !important;
    margin-right:1%;
}

.width-75 {
    width: 73% !important;
    margin-right:1%;
}

.width-33 {
    width: 31% !important;
    margin-right:1%;
}

.width-66 {
    width: 64% !important;
    margin-right: 1%;
}


/**
    basic style for detail cluetips
*/
dl.cluetipBox {
        background: transparent url(/atecustom/images/gothicWindowFaded.jpg) no-repeat right bottom;
}

dl.cluetipBox, dl.cluetipBox dt, dl.cluetipBox dd {
    margin-left: 0;
}

dl.cluetipBox dd {
        padding: 4px 0px;
}