/* style sheet for use with Opus's "jero" textbox scheme */

.jero_content {
    float: left;
    width: 100%;
}

.jero_container {
    clear: left;
    float: left;
    width: 100%;
}

.jero_container2 {
    background-color: rgb(237,27,36);
    clear: left;
    float: left;
    width: 100%;
}


.jero_headline {
    margin-left: 12px;
    margin-right: 12px;
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
    color: white;
}

/* override the default h1 colour, to make it visible */
.jero_headline h1 {
     color: white;
}

.jero_bottom {
    margin-left: 12px;
    margin-right: 12px;
    background-image: url('bot.gif');
    background-repeat: repeat-x;
}

.jero_bottom3 {
    margin-left: 12px;
    margin-right: 12px;
    background-image: url('bot3.gif');
    background-repeat: repeat-x;
}

.jero_article {
    margin-left: 12px;
    margin-right: 12px;
    padding-top: 1px !important; /* Vital for Firefox and Chrome */
    padding-bottom: 1px !important; /* Vital for Firefox and Chrome */
}

.jero_article:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.jero_article3 {
    margin-left: 12px;
    margin-right: 12px;
    background-color: white;
    padding-top: 1px !important; /* Vital for Firefox and Chrome */
    padding-bottom: 1px !important; /* Vital for Firefox and Chrome */
}

.jero_article3:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.jero_topleft {
    clear: left;
    float: left;
    width: 12px;
    background-image: url('topleft.gif');
    background-repeat: no-repeat;
}

.jero_topleft2 {
    clear: left;
    float: left;
    width: 12px;
    background-image: url('topleft2.gif');
    background-repeat: no-repeat;
}

.jero_topleft3 {
    clear: left;
    float: left;
    width: 12px;
    background-image: url('topleft3.gif');
    background-repeat: no-repeat;
}

.jero_top {
    margin-left: 12px;
    margin-right: 12px;
    background-image: url('top.gif');
    background-repeat: repeat-x;
}

.jero_top2 {
    margin-left: 12px;
    margin-right: 12px;
    background-color: rgb(237,27,36);
}

.jero_top3 {
    margin-left: 12px;
    margin-right: 12px;
    background-image: url('top3.gif');
    background-repeat: repeat-x;
}

.jero_topright {
    float: right;
    width: 12px;
    background-image: url('topright.gif');
    background-repeat: no-repeat;
    background-position: top right;
}

.jero_topright2 {
    float: right;
    width: 12px;
    background-image: url('topright2.gif');
    background-repeat: no-repeat;
    background-position: top right;
}

.jero_topright3 {
    float: right;
    width: 12px;
    background-image: url('topright3.gif');
    background-repeat: no-repeat;
    background-position: top right;
}

.jero_right {
    background-position: right;
    background-image: url('right.gif');
    background-repeat: repeat-y;
}

.jero_right3 {
    background-position: right;
    background-image: url('right3.gif');
    background-repeat: repeat-y;
}

.jero_left {
    background-image: url('left.gif');
    background-repeat: repeat-y;
}

.jero_left3 {
    background-image: url('left3.gif');
    background-repeat: repeat-y;
}

.jero_botleft {
    clear: left;
    float: left;
    width: 12px;
    background-image: url('botleft.gif');
    background-repeat: no-repeat;
}

.jero_botleft3 {
    clear: left;
    float: left;
    width: 12px;
    background-image: url('botleft3.gif');
    background-repeat: no-repeat;
}

.jero_botright {
    float: right;
    width: 12px;
    background-image: url('botright.gif');
    background-repeat: no-repeat;
    background-position: top right;
}

.jero_botright3 {
    float: right;
    width: 12px;
    background-image: url('botright3.gif');
    background-repeat: no-repeat;
    background-position: top right;
}