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;}
7bc10866-909c-4123-baee-80a7d2b0999f
Created on: 28th October, 2022
Last updated: 28th October, 2022
Tagged With: