helpers.css

/*
       structures.css
       The structure of the page, generic widths, heights, padding, margins and floats and other useful functions live here.
       This file should make make developing custom templates much, much quicker.

       @author: Hannah
       @created: 02/05/12

       @notes: A combination of all the items on this page will accomodate a large variety of template styles.

*/

/* For this to work the element you're applying it too must have a width s*/
.alignHorizontal { margin: 0px auto;}

/* Use as alternative to line-height if you want text to be vertically aligned in a div that doesn't have a fixed height */
.alignVertical {display: table-cell ; vertical-align : middle;}

/* Clear floats */
.clear {clear: both ;}
.cLeft {clear: left ;}
.cRight {clear: right ;}

/* floats */
.fleft {float: left ;}
.fright {float: right ;}

/* Aligning Text */
.tLeft {text-align: left ;}
.tRight {text-align: right ;}
.tCenter {text-align: center ;}
.tJustify {text-align: justify ;}

/* Display elements */
.dBlock {display: block ;}
.dInline {display: inline ;}
.dInlineBlock {display: inline-block ;}

.hideText { /* Less browser intensive hack for hiding text. Doesn't render a -9999px page */
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
}

.reset {
        border: 0px;
        padding: 0px;
        margin: 0px;
}

.pR10 {padding-right: 10px;}

/* Widths In percentages, for elastic layouts */
.w10p { width : 10%; }
.w15p { width : 15%; }
.w20p { width : 20%; }
.w25p { width : 25%; }
.w30p { width : 30%; }
.w35p { width : 35%; }
.w40p { width : 40%; }
.w45p { width : 45%; }
.w49p { width : 49%; }
.w50p { width : 50%; }
.w55p { width : 55%; }
.w60p { width : 60%; }
.w65p { width : 65%; }
.w70p { width : 70%; }
.w75p { width : 75%; }
.w80p { width : 80%; }
.w85p { width : 85%; }
.w90p { width : 90%; }
.w95p { width : 95%; }
.w100p { width : 100%; }

/* Heights In percentages, for elastic layouts */
.h10p { height : 10%; }
.h15p { height : 15%; }
.h20p { height : 20%; }
.h25p { height : 25%; }
.h30p { height : 30%; }
.h35p { height : 35%; }
.h40p { height : 40%; }
.h45p { height : 45%; }
.h50p { height : 50%; }
.h55p { height : 55%; }
.h60p { height : 60%; }
.h65p { height : 65%; }
.h70p { height : 70%; }
.h75p { height : 75%; }
.h80p { height : 80%; }
.h85p { height : 85%; }
.h90p { height : 90%; }
.h95p { height : 95%; }
.h100p { height : 100%; }

/*Errors*/

.info, .success, .warning , .error, .validation {
        background-position: 10px center ;
        background-repeat: no-repeat;
        border: 1px solid;
        margin: 10px 0px;
        padding: 15px 10px 15px 50px;
}
.info {
        background-color: #DFF3FC;
        background-image: url('../images/information.png');
        color: #00529B;
}
.info a, .success a, .warning a, .error a {
        color: #000; /*text-decoration: underline;*/
}
.success {
        background-color: #DFF2BF;
        background-image: url('../images/success.png');
        color: #4F8A10;
}
.warning {
        background-color: #FDF7DC;
        background-image: url('../images/warning.png');
        color: #9F6000;
}
.error {
        background-color: #FFBABA;
        background-image: url('../images/error.png');
        color: #D8000C;
}

.test { border : 10px solid red;}