/*********************************
    GENERAL
**********************************/
body {
    background: #fff;
    color: #505050;
    font: 14px 'Open Sans', sans-serif;
    
    padding: 0;
}
/* div containing initial website load styling*/
#pageload {
    background-color: #fff;
    position: absolute;
    z-index: 3000;
    float: left;
    height: 3868px;
    width: 1170px;
    font-size: 80px;
    text-align: center;
    padding-top: 200px;
    text-transform: uppercase;
}
/* general purpose class for hiding elments */
.hidden {
    display: none;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}

.red {
    color: red;
}
/* general purpose class for clearing */
.clear {
    clear: both;
}
/* general purpose class setting the background white */
.whiteBackground {
    background: #fff !important;
}
/* general purpose class setting the background grey*/
.greyBackground {
    background: #E9EAE5;
}
/* general purpose class for centering elments */
.center {
    margin-right: auto;
    margin-left: auto;
}
/* universal link styling */
a {
    color: #004385;
    cursor: pointer;
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    text-decoration: none;
}

    a:visited {
        color: #004385;
    }
/* general purpose single line  */
.seperator {
    border-bottom: solid 1px #808080;
}

.error {
    color: red;
    font-style: italic;
}

.authorize {
    visibility: hidden;
}

.closeOptions {
    float: right;
    width: 14px;
    height: 13px;
    cursor: hand;
    cursor: pointer;
    background-image: url(close.png);
}

#printMessage {
    font-family: 'Gill Sans MT';
    font-size: 16px;
    color: #4D4B4B;
    padding-top: 10px;
}

/*********************************
    SITE LAYOUT
**********************************/
.main {
    height: auto;
    overflow: hidden;
    border-bottom: 6px solid #004385;
}
/* shadow for main */
.shadow {
    background-color: transparent;
    height: 1px;
    width: 100%;
    box-shadow: 0px 2px 7px #8ea3af;
    z-index: 2;
}

.wrapper {
    padding: 5px 10px;
}
/*********************************
    FOOTER
**********************************/
/* footer logos image */
#footer a {
    display: block;
    text-align: center;
    width: 100%;
}

#footer a div {
    margin: auto;
}

#footer {
    padding-top: 10px;
    margin-bottom: 15px;
}

.CATHALACLogo {
    background-image: url('CATHALAC.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 67px;
    height: 63px;
}

.ICIMODLogo {
    background-image: url('ICIMOD.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 148px;
    height: 63px;
}

.NASALogo {
    background-image: url('NASA.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 79px;
    height: 63px;
}

.RCMRDLogo {
    background-image: url('RCMRD.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 175px;
    height: 63px;
}

.USAidLogo {
    background-image: url('USAid.jpg');
    background-repeat: no-repeat;
    background-position: center;
    width: 85px;
    height: 70px;
    background-size: 85px 85px;
}

.CILSSLogo {
    background-image: url('CILSS.jpg');
    background-repeat: no-repeat;
    background-position: center;
    width: 64px;
    height: 63px;
    background-size: 60px 61px;
}

.ADPCLogo {
    background-image: url('ADPC.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 63px;
    background-size: 100px 50px;
}
/* container SERVIR program link*/
#SERVIR_info {
    font-size: 18px;
    color: #313233;
    font-weight: bold;
    text-align: center;
}
/* social media button container */
#social_media {
    padding-left: 15px;
    text-align: center;
}
    /* social media button */
    #social_media img {
        margin: 10px;
        height: 35px;
        width: 35px;
    }

/*********************************
    SECURITY HEADER
**********************************/
/* security header container */
#security {
    height: 23px;
    background-color: #656565;
    color: #fff;
    font-size: 12px;
}
/* security component container */
#security_components {
    float: right;
}
/* security link (log in) */
#security a {
    color: #fff;
    padding: 5px 10px;
}
/*********************************
    HEADER
**********************************/
/* header container */
#header {
    padding: 0 10px 10px 10px;
    vertical-align: middle;
    align-items: center;
}
/* SERVIR header logo */
.logo {
    margin-top: 15px;
    width: 100%;
}

.servir {
    background-image: url('SERVIRLogo.png');
    background-repeat: no-repeat;
    background-position: left;
    width: 187px;
    height: 26px;
}

.catalogue-words {
    background-image: url('CatalogueWords.png');
    background-repeat: no-repeat;
    background-position: -10px;
    width: 142px;
    height: 26px;
}
/* search feature container */
#search {
    background-color: #E5E5E5;
    float: none;
    width: 100%;
    height: 38px;
    margin: 10px 0px 5px 5px;
    text-align: center;
}
    /* search text box styling */
    #search > input {
        background-color: #fff;
        width: 100%;
        height: 27px;
        background-image: url('search.png');
        background-repeat: no-repeat;
        background-position: right;
        border: 1px solid #E5E5E5;
        border-radius: 5px;
        margin: 5px 0;
        color: #747474;
        font-style: italic;
        font-size: 12px;
    }
        /* transparentcy on focus for IE */
        #search > input:focus::-webkit-input-placeholder {
            color: transparent;
        }
        /* transparentcy on focus for Firefox */
        #search > input:focus:-moz-placeholder {
            color: transparent;
        }
/*********************************
    LOGIN
**********************************/
/* login form container */
#loginForm {
    text-align: center;
}
/* textbox on the login form */
input.form-control {
    background-color: #fff !important;
    width: 212px;
    height: 44px;
    border: 1px solid #E5E5E5;
    border-radius: 3px;
    margin-left: auto;
    margin-right: auto;
    color: #ADADAD;
    font-style: italic;
    font-size: 15px;
    padding-left: 48px;
}
/* username textbox */
.username {
    background-image: url('username.png') !important;
    background-repeat: no-repeat;
    background-position: left;
}

    .username:hover {
        background-image: url('username_hover.png');
        background-repeat: no-repeat;
        background-position: left;
        -webkit-transition: background-image 500ms ease-out;
        -moz-transition: background-image 500ms ease-out;
        -o-transition: background-image 50ms ease-out;
        transition: background-image 500ms ease-out;
    }
/* password textbox */
.password {
    background-image: url('password.png');
    background-repeat: no-repeat;
    background-position: left;
}

    .password:hover {
        background-image: url('password_hover.png');
        background-repeat: no-repeat;
        background-position: left;
        -webkit-transition: background-image 500ms ease-out;
        -moz-transition: background-image 500ms ease-out;
        -o-transition: background-image 50ms ease-out;
        transition: background-image 500ms ease-out;
    }
/*********************************
   CATALOGUE
**********************************/
/* welcome message container */
.welcome {
    font-size: 12px;
    padding: 15px;
    line-height: 20px;
}
/* tabbed view menu container (map/list views) */
.viewmenu {
    background: #E9EAE5;
    height: auto;
}
/* filter selection container */
#selection {
    font-size: 13px;
    background-color: #fff;
    border: 1px solid #C7C8C4;
    border-radius: 3px;
    min-height: 25px;
    padding: 10px;
    margin: 10px 0px;
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 100%;
}
/* filter selection lable style */
.selection_label {
    padding: 0 5px;
    color: #004385;
    font-size: 13px;
    vertical-align: top;
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
/* filter selection delete icon */
.selection_delete {
    vertical-align: top;
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0 5px;
}
/* view menu tab container */
.tabs {
    float: none;
}
/* view menu tab */
.tab {
    float: right;
    width: 100%;
    height: 45px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
/* list view tab unselected */
.listview.grey {
    background: url('listview_grey.png') no-repeat center;
}
/* map view tab unselected */
.mapview.grey {
    background: url('mapview_grey.png') no-repeat center;
}
/* list view tab selected/hover icon */
.listview, .listview:hover {
    background: url('listview.png') no-repeat center;
}
/* map view tab selected/hover icon */
.mapview, .mapview:hover {
    background: url('mapview.png') no-repeat center;
}
    /* view menu tab selected/hover background */
    .selected, .mapview:hover, .listview:hover {
        background-color: white;
    }
/*********************************
   CATALOGUE - LISTVIEW
**********************************/
/* the filter menu container on the list view */
#menu {
    min-width: 155px;
    max-width: 100%;
    float: none;
    padding: 20px 8px 0 0;
}
    /* filter menu title style ("Narrow By") */
    #menu .title {
        text-transform: uppercase;
        color: #636363;
        font-size: 13px;
        font-weight: bold;
        padding-bottom: 10px;
    }
/* filter menu option container */
.menuCategory {
    font-weight: bold;
    font-size: 15px;
    color: #636363;
    margin: 15px 0;
    cursor: pointer;
}
    /* filter menu triangle image placement */
    .menuCategory .images {
        display: inline-block;
        margin-right: 5px;
        margin-bottom: -5px;
    }

.maxHeight {
    max-height: 100% !important;
}
/* filter menu option items container */
.menuSubCategory {
    max-height: 450px;
    overflow: auto;
}

    .menuSubCategory .nested {
        max-height: 350px;
        overflow: auto;
    }
/* filter menu option item container */
.menuSubItem .menuCategory {
    font-size: 12px;
    padding-left: 5px;
    margin: 0 0 15px 15px;
}
    /* all filter menu item containers */
    .menuSubItem .menuCategory .menuSubCategory .menuSubItem {
        margin: 5px 0 0 15px;
    }

        .menuSubItem .menuCategory .menuSubCategory .menuSubItem .subCategoryItem {
            font-size: 12px;
        }
/* filter menu option items container */
.subCategoryItem {
    font-weight: normal;
    font-size: 14px;
}
/* filter menu option items container */
.menuSubItem {
    margin: 10px 5px;
}
/* filter menu option items inputs */
input[type="checkbox"] {
    display: none;
}

    input[type="checkbox"] + label span {
        display: inline-block;
        width: 17px;
        height: 17px;
        margin: -1px 4px 0 0;
        vertical-align: middle;
        background: url(images.png) left top no-repeat;
        background-position: -37px -148px;
        cursor: pointer;
    }

    input[type="checkbox"]:checked + label span {
        background: url(images.png) left top no-repeat;
        background-position: -10px -148px;
    }
/* info panel container (appears on hover of (i) )*/
.info {
    float: right;
    margin-left: 10px;
    width: 16px;
    height: 16px;
    cursor: hand;
    cursor: pointer;
    background-image: url(info.png);
}
/* info panel */
.infoPanel {
    background: #fff;
    max-width: 150px;
    position: absolute;
    z-index: 1000;
    font-size: 14px;
    line-height: 20px;
    color: #505050;
    padding: 10px;
    border: 1px solid #B7B7B7;
}
    /* info panel left arrow notch */
    .infoPanel .notch {
        position: absolute;
        top: 33px;
        margin: 0;
        border-top: 10px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid #B7B7B7;
        border-bottom: 10px solid transparent;
        padding: 0;
        width: 0;
        height: 0;
        /* ie6 height fix */
        font-size: 0;
        line-height: 0;
        /* ie6 transparent fix */
        _border-right-color: pink;
        _border-left-color: pink;
        _filter: chroma(color=pink);
        right: -20px;
        transform: rotate(180deg);
    }
/* product list container for list view */
#productList {
    width: auto;
    float: none;
    overflow: hidden;
    padding: 10px;
    margin: 10px 0px 10px 10px;
    background-color: #fff;
}
/* product list title container */
#titleBar {
    padding: 10px 5px;
}
    /* product list title style */
    #titleBar .title {
        font-size: 18px;
        text-transform: uppercase;
        font-weight: bold;
    }
    /* product list result count style */
    #titleBar .result_count {
        font-size: 12px;
        float: right;
        color: #313233;
        line-height: 150%;
    }
/* product list toolbar container (authorized only) */
#productListTools {
    display: block;
    min-height: 30px;
}
/* product list tool */
.productListTool {
    float: right;
    padding: 0 5px;
    cursor: pointer;
}
    /* product list tool icon */
    .productListTool img {
        padding: 5px;
    }
/* product list product container */
.product {
    border-bottom: solid 1px #808080;
    padding: 5px 0;
    min-height: 110px;
}

    .product .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .product .column {
        width: 100%;
        height: 35px;
    }
    /* product title style */
    .product .title {
        color: #004385;
        font-size: 22px;
        cursor: pointer;
    }
    /* product new badge */
    .product .new_badge {
        background-image: url(new_badge.png);
        background-repeat: no-repeat;
        background-position: center;
        width: 40px;
        height: 40px;
        background-size: 40px 40px;
        float:right;
    }
    /* product description style */
    .product .description {
        font-size: 17px;
        color: #313233;
        margin-bottom: 10px;
    }
    /* product status style */
    .product .status {
        color: #7B7B7B;
        font-size: 17px;
    }
    /* product image container */
    .product .product_image {
        height: 100px;
        width: 100px;
        margin: 10px auto;
        position: relative;
    }
    /* product image */
    .product img {
        height: 100px;
        width: 100px;
    }
    /* no products message */
    .product .no_products {
        display: none;
    }
    /* product edit icon */
    .product .edit {
        float: right;
        color: #313233;
        font-size: 13px;
        z-index: 100;
        padding-left: 25px;
    }
    /**/
    .product .draft {
        float: right;
        color: #313233;
        font-size: 13px;
        z-index: 100;
    }
/* product edit icon */
.edit {
    background-image: url('edit.png');
    background-repeat: no-repeat;
    background-position: left;
    cursor: pointer;
}

    .edit:hover {
        background-image: url('edit_hover.png');
        background-repeat: no-repeat;
        background-position: left;
        color: #3498DB;
        cursor: pointer;
    }
/*********************************
   CATALOGUE - MAP VIEW
**********************************/
#mapview {
    padding-top: 10px;
}
/* the map container */
#map {
    height: 600px;
    margin: 0 auto;
    margin-top: 4px;
    margin-bottom: 15px;
    background: #6ED2EE;
}
/* class for region menu options */
.menuItem {
    width: 150px;
    height: auto;
    font-size: 12px;
    font-weight: normal;
    padding: 15px 20px;
    background-color: #fff;
    margin: 0;
    margin-left: -8px;
}

    .menuItem:hover {
        background: #F0AE1F;
        color: #fff;
        visibility: visible;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
/* class for selected region menu option */
.menuItemSelected {
    background: #F0AE1F !important;
    color: #fff;
}
/* region menu on map */
#map ul {
    z-index: 2002;
    right: 25px;
    text-align: left;
    display: inline;
    position: absolute;
    margin: 10px !important;
    list-style: none;
    padding-left: 0;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
    /* region menu button on map */
    #map ul li {
        width: 150px;
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        display: inline-block;
        position: relative;
        padding: 10px 20px;
        background: #fff;
        cursor: pointer;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
        /* region menu list */
        #map ul li ul {
            padding: 0;
            position: absolute;
            top: 37px;
            left: -2px;
            width: 150px;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            display: none;
            opacity: 0;
            visibility: hidden;
            -webkit-transiton: opacity 0.2s;
            -moz-transition: opacity 0.2s;
            -ms-transition: opacity 0.2s;
            -o-transition: opacity 0.2s;
            -transition: opacity 0.2s;
        }
        /* region menu list */
        #map ul li:hover ul {
            display: block;
            opacity: 1;
            visibility: visible;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -ms-transition: all 0.5s;
            -o-transition: all 0.5s;
            transition: all 0.5s;
        }
        /* region menu list item */
        #map ul li ul li {
            font-size: 12px;
            font-weight: normal;
            background: #fff;
            display: block;
            color: #505050;
        }

            #map ul li ul li:hover {
                background: #F0AE1F;
                color: #fff;
            }
/* title style for the map pop up message */
.mapPopupLabelTitle {
    color: #F0AE1F;
}
/* text style for the map pop up message */
.mapPopupLabelTitle, .mapLabel {
    font-size: 21px;
}

.mapviewEdit {
    height: 25px;
}
/* product list container in the map view */
#mapProducts {
    max-height: 600px;
    max-width: 100%;
    overflow: auto;
}
    /* product container in the product list */
    #mapProducts .product {
        border-bottom: solid 1px #808080;
        padding: 5px 0;
        min-height: 107px;
        clear: both;
    }
        /* product title in the product container */
        #mapProducts .product .title {
            font-size: 16px;
            font-weight: bold;
            margin-left: 85px;
        }

        #mapProducts .product:hover .title {
            color: #F0AE1F;
        }
        /* product descriptions in the product container */
        #mapProducts .product .description {
            font-size: 14px;
            margin-left: 85px;
        }
        /* product image container in the product container */
        #mapProducts .product .product_image {
            height: 80px;
            width: 80px;
            float: left;
        }

        #mapProducts .product:hover .product_image img {
            border: solid 2px #EDD100;
            -webkit-box-shadow: 0 0 5px rgba(237, 209, 0, 1);
            -moz-box-shadow: 0 0 5px rgba(237, 209, 0, 1);
            box-shadow: 0 0 5px rgba(237, 209, 0, 1);
        }
        /* product image in the product container */
        #mapProducts .product img {
            height: 80px;
            width: 80px;
        }
/* class assigned to the filter menu to position and 
    style it for the map view */
.mapMenu {
    background-color: rgba(255,255,255,0.8);
    padding-left: 5px !important;
    position: absolute;
    z-index: 2002;
    height: 606px;
}
/* small tab on the map view filter menu */
.menuTab {
    width: 20px;
    height: 30px;
    margin-top: 350px;
    z-index: 2003;
    position: absolute;
    float: left;
    padding: 10px 11px;
    background-color: #fff;
    cursor: pointer;
    margin-left: 0px;
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/* class assigned to menuTab when filter menu is expanded  */
.expanded {
    margin-left: 155px;
}
/* creates a small triangle pointing left */
.triangle-left {
    width: 0;
    height: 0;
    margin-left: -5px;
    border-top: 5px solid transparent;
    border-right: 7px solid #505050;
    border-bottom: 5px solid transparent;
}
/* creates a small triangle pointing right */
.triangle-right {
    width: 0;
    height: 0;
    margin-left: -5px;
    border-top: 5px solid transparent;
    border-left: 7px solid #505050;
    border-bottom: 5px solid transparent;
}
/* creates a small triangle pointing up */
.triangle-up {
    width: 0;
    height: 0;
    margin-top: 10px;
    float: right;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #505050;
}
/* creates a small triangle pointing down */
.triangle-down {
    width: 0;
    height: 0;
    margin-top: 10px;
    float: right;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #505050;
}
/*********************************
    PAGE VIEWER
**********************************/
/* tool container */
.tools {
    display: table-row;
    vertical-align: middle;
    height: 40px;
}
/* tool style */
.tool {
    font-size: 13px;
    color: #313233;
    padding: 0 5px;
    cursor: pointer;
    display: table-cell;
    padding-top: 20px;
}
    /* tool icon */
    .tool img {
        padding: 0 5px;
    }
/* page contianer */
#page {
    padding: 15px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    margin: 15px;
}
    /* page title style */
    #page .title {
        color: #3398DA;
        font-weight: bolder;
        font-size: 24px;
        text-transform: uppercase;
        margin: 10px;
    }
    /* page subTitle style */
    #page .subTitle {
        color: #3398DA;
        font-weight: bolder;
        font-size: 19px;
        margin: 10px 0px 10px 10px;
    }
    /* page text style */
    #page .text {
        color: #313233;
        font-size: 16px;
        margin: 10px 10px 20px 10px;
        line-height: 22px;
    }
/* page qoute style */
.quote {
    color: #747474;
    font-size: 21px;
    font-style: italic;
    margin: 10px;
    border-top: 1px solid #A7A9A5;
}
/* page image container */
#page .image {
    float: right;
    margin: 10px;
    min-height: 200px;
    min-width: 200px;
    max-width: 400px;
    text-align: center;
}
/* page image */
.image img {
    display: block;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
/* loading icon */
.loading {
    height: 64px !important;
    width: 64px !important;
    display: block;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}
/* used for js placement of highlights section (method sizeSpacer)*/
#spacer {
    width: 0px;
    float: right;
}
/* highlights section container*/
#highlights {
    background-color: #F1F1F1;
    color: #313233;
    padding: 10px;
    margin-top: 15px;
}
    /* highlights title style */
    #highlights .highlightTitle {
        font-size: 17px;
        font-weight: bold;
        padding-top: 7px;
        color: #5A5A5A;
    }
    /* highlights text style */
    #highlights .highlightText {
        font-size: 16px;
        line-height: 24px;
    }
/* highlights description style */
.highlightDesc {
    font-size: 22px;
    color: #747474;
    padding: 0 10px;
    background-color: #fff;
}

/*********************************
    METADATA EDITOR
**********************************/
#metadata {
    padding: 15px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    margin: 15px;
}

    #metadata .title {
        font-weight: bold;
        font-size: 18px;
        color: #747474;
    }

    #metadata .instructions {
        font-size: 17px;
        color: #747474;
    }

    #metadata .menuSubCategory {
        /*text-align: justify;
        width: 100%;*/
    }

    #metadata .menuSubItem {
        /*vertical-align: top;
        display: inline-block;
        *display: inline;
        zoom: 1;*/
    }
/*********************************
    DOCUMENT EDITOR
**********************************/
#document {
    padding: 15px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    margin: 15px;
}

#documentList {
    background-color: #F1F1F1;
    color: #313233;
    margin: 10px;
    padding: 10px;
    min-height: 160px;
    position: relative;
}

#document .title {
    font-weight: bold;
    font-size: 18px;
    color: #747474;
}

#document .instructions {
    font-size: 17px;
    color: #747474;
}

#document input {
    color: #505050;
    font: 14px 'Gill Sans MT','Segoe UI', tahoma, arial, helvetica, sans-serif !important;
}

#document .btn {
    margin-top: 15px;
    margin-right: 30px;
    float: right;
}

#document input[type=text] {
    width: 90%;
    height: 30px;
    padding-left: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

#document input[type="file"] {
    width: 80%;
    color: #505050;
    font: 14px 'Gill Sans MT','Segoe UI', tahoma, arial, helvetica, sans-serif !important;
    margin-left: auto;
    margin-right: auto;
}

.documentName {
    margin-top: 15px;
}

.document_label a {
    padding: 0 5px;
    color: #505050;
    font: 15px 'Gill Sans MT','Segoe UI', tahoma, arial, helvetica, sans-serif !important;
    vertical-align: top;
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

.document_label {
    padding-top: 10px;
}

.document_delete {
    vertical-align: top;
    display: -moz-inline-stack;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin: 0 5px;
}

#documentUpload {
    /*border: dashed 1px red;*/
}

#documentList {
    /*border: dashed 1px blue;*/
}
/*********************************
    EDITOR
**********************************/
.elementIsEmpty {
    display: block;
    width: 100%;
    min-height: 50px;
    margin: 3px;
}

    .elementIsEmpty .highlightDesc {
        min-height: 180px;
    }

        .elementIsEmpty .highlightDesc .elementMsg {
            margin-top: 70px;
        }

#Image .elementIsEmpty .elementText, #Introduction .elementText {
    min-height: 300px;
    min-width: 100%;
}

#Image .elementText {
    /*max-height: 305px;*/
}

.editImage {
    /*float: right;*/
    margin: 10px;
    min-height: 200px;
    min-width: 200px;
    max-width: 400px;
    text-align: center;
    line-height: 30px;
}

    .editImage img {
        display: block;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

#fontMenu {
    float: right;
    position: absolute;
    z-index: 2000;
    background: #fff;
    border: 1px solid #d9d9d9;
}

.fontTools {
}

.fontTool {
    font-size: 13px;
    color: #313233;
    padding: 5px;
    cursor: pointer;
    display: table-caption;
}

.fontTool, x:-moz-any-link, x:default {
    display: block;
}

#Introduction .elementText {
    padding-left: 15px;
    padding-top: 15px;
}

#description .elementText {
    margin-top: 10px;
}

#Image .elementMsg, #Introduction .elementMsg {
    margin-top: 150px;
}

#Purpose .elementIsEmpty .elementText, #Uses .elementIsEmpty .elementText {
    min-height: 250px;
}

#Purpose .elementMsg, #Uses .elementMsg {
    margin-top: 90px;
}

.emptyText {
    border: 1.5px solid #C9C9C9;
    background-color: #C8C8C8;
}

.inEdit {
    border: 0.5px solid #3397DB;
    background-color: transparent;
}

.elementMsg {
    color: #757373;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    font-style: normal;
    font-weight: bolder;
    margin-top: 10px;
}

.elementText {
    height: 100%;
}

.title.editable {
    text-transform: none !important;
}

#create_page input[type=text] {
    width: 90%;
}

.tool_edit {
    width: 91px;
    height: 29px;
    float: right;
    background-image: url('edit_btn.png');
    background-repeat: no-repeat;
    background-position: left;
    cursor: pointer;
}

.tool_delete {
    width: 106px;
    height: 29px;
    float: right;
    background-image: url('delete_btn.png');
    background-repeat: no-repeat;
    background-position: left;
    cursor: pointer;
}

/*********************************
    IMAGES/TOOLBAR
**********************************/
.clearfix {
    *zoom: 1;
}

    .clearfix:before, .clearfix:after {
        display: table;
        content: "";
        line-height: 0;
    }

    .clearfix:after {
        clear: both;
    }

.hide-text {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.input-block-level {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btn-file {
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}

    .btn-file > input {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translate(-300px, 0) scale(4);
        font-size: 23px;
        direction: ltr;
        cursor: pointer;
    }

.fileupload {
    margin-bottom: 9px;
}

    .fileupload .uneditable-input {
        display: inline-block;
        margin-bottom: 0px;
        vertical-align: middle;
        cursor: text;
    }

    .fileupload .thumbnail {
        overflow: hidden;
        display: inline-block;
        margin-bottom: 5px;
        vertical-align: middle;
        text-align: center;
    }

        .fileupload .thumbnail > img {
            display: inline-block;
            vertical-align: middle;
            max-height: 100%;
        }

    .fileupload .btn {
        vertical-align: middle;
    }

.fileupload-exists .fileupload-new, .fileupload-new .fileupload-exists {
    display: none;
}

.fileupload-inline .fileupload-controls {
    display: inline;
}

.fileupload-new .input-append .btn-file {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

.thumbnail-borderless .thumbnail {
    border: none;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.fileupload-new.thumbnail-borderless .thumbnail {
    border: 1px solid #ddd;
}

.control-group.warning .fileupload .uneditable-input {
    color: #a47e3c;
    border-color: #a47e3c;
}

.control-group.warning .fileupload .fileupload-preview {
    color: #a47e3c;
}

.control-group.warning .fileupload .thumbnail {
    border-color: #a47e3c;
}

.control-group.error .fileupload .uneditable-input {
    color: #b94a48;
    border-color: #b94a48;
}

.control-group.error .fileupload .fileupload-preview {
    color: #b94a48;
}

.control-group.error .fileupload .thumbnail {
    border-color: #b94a48;
}

.control-group.success .fileupload .uneditable-input {
    color: #468847;
    border-color: #468847;
}

.control-group.success .fileupload .fileupload-preview {
    color: #468847;
}

.control-group.success .fileupload .thumbnail {
    border-color: #468847;
}

.parentEditable:hover .btn-toolbar {
    visibility: visible;
}

.btn-toolbar {
    /*
    margin-top: 10px;
    margin-bottom: -20px;
    z-index: 1000;
    */
    float: right;
    margin-right: 8px;
    visibility: hidden;
}

.btn-group {
    position: relative;
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.btn-group {
    position: relative;
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.btn {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 4px 12px;
    margin: 0 2px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #e6e6e6;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border: 1px solid #cccccc;
    *border: 0;
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    *margin-left: .3em;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}

    .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
        color: #333333;
        background-color: #e6e6e6;
        *background-color: #d9d9d9;
    }

#pictureBtn {
    width: 24px;
    height: 22px;
    background-image: url('upload.png');
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#deleteBtn {
    width: 24px;
    height: 22px;
    background-image: url('delete.png');
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.deleteDocument {
    width: 19px;
    height: 19px;
    padding-top: 6px;
    background-image: url('delete_btn_grey.png');
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.images {
    background: url("images.png") top left no-repeat;
}

.footer-logo {
    width: 345px;
    height: 49px;
    background-position: -10px -10px;
}

.print {
    width: 135px;
    height: 30px;
    background-position: -10px -69px;
    cursor: pointer;
}

.download {
    width: 135px;
    height: 30px;
    background-position: -155px -69px;
    cursor: pointer;
}

.header-logo {
    width: 336px;
    height: 29px;
    background-position: -10px -109px;
}

.delete {
    width: 20px;
    height: 20px;
    background-position: -300px -69px;
    cursor: pointer;
}

.arrow-right {
    width: 10px;
    height: 18px;
    background-position: -330px -69px;
    cursor: pointer;
}

.checked {
    width: 17px;
    height: 17px;
    background-position: -10px -148px;
    cursor: pointer;
}

.unchecked {
    width: 17px;
    height: 17px;
    background-position: -37px -148px;
    cursor: pointer;
}

.search {
    width: 14px;
    height: 15px;
    background-position: -64px -148px;
    text-align: center;
}

.arrow-down {
    width: 14px;
    height: 11px;
    background-position: -88px -148px;
    cursor: pointer;
    padding-bottom: 15px;
}
/*********************************
    MISC
**********************************/
.button {
    width: 90px;
    height: 45px;
    font-family: 'Gill Sans MT';
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    padding: 10px 11px;
    background-color: #3397DB;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}



@media (min-width: 892px) {
    .tab {
        margin-top: 25px;
    }
}

@media (max-width: 1080px) {
}

@media (max-width: 992px) {
}



@media (min-width : 480px) {
    .servir {
        float: left;
    }

    .catalogue-words {
        float: right;
        background-position: right;
    }

    .logo {
        width: 335px;
    }

    #search {
        float: right;
        width: 283px;
        text-align: inherit;
    }

    #search > input {
        width: 269px;
        margin: 6px;
    }
    /* transparentcy on focus for IE */
    #search > input:focus::-webkit-input-placeholder {
        color: transparent;
    }
    /* transparentcy on focus for Firefox */
    #search > input:focus:-moz-placeholder {
        color: transparent;
    }

    /* view menu tab container */
    .tabs {
        float: right;
        margin-right: 20px;
    }

    /* view menu tab */
    .tab {
        float: right;
        margin: 10px 0 0 5px;
        width: 140px;
    }


    /* footer logos image */
    #footer a {
        float: left;
        width: 50%;
        margin-bottom: 15px;
    }

    .infoPanel {
        max-width: 300px;
    }
}

    
@media (min-width : 768px) {
    
}


@media (min-width : 992px) {
    body {
        margin: 0 20px 20px 20px;
    }

    #menu {
        max-width: 33%;
        float: left;
    }

    /* product title style */
    .product .title {
        margin-left: 115px;
    }

    /* product image container */
    .product .product_image {
        float: left;
        margin: 0 15px 0 0;
        position: absolute;
    }
    /* product description style */
    .product .description {
        margin-left: 115px;
        margin-bottom: 0;
    }
    /* product status style */
    .product .status {
        float: right;
    }


    /* container SERVIR program link*/
    #SERVIR_info {
        text-align: right;
    }

    #footer {
        margin-bottom: 0;
    }

    /* footer logos image */
    #footer a {
        float: right;
        padding-left: 15px;
        width: inherit;
    }

    #social_media {
        text-align: left;
    }

    /* social media button */
    #social_media img {
        float: left;
    }

    #mapProducts {
        max-width: 385px;
    }
    /* product container in the product list */
    #mapProducts .product {
        border-bottom: solid 1px #808080;
        padding: 5px 0;
        min-height: 90px;
        clear: initial;
    }
    .tabs {
        margin-top: 15px;
    }

    /* tool container */
    .tools {
        float: right;
    }

    #Image .elementIsEmpty .elementText, #Introduction .elementText {
        min-width: 310px;
    }

    /* info panel left arrow notch */
    .infoPanel .notch {
        left: -20px;
        transform: rotate(0);
    }

}

    
@media (min-width: 1200px) {
    .tab {
        margin-top: 15px !important;
    }
}