/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
@charset "UTF-8";
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #000000;
color: #fff;
text-shadow: none;
}
::selection {
background: #000000;
color: #fff;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers:
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
*, *:before, *:after {
/* padding included in box container */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* set base font size and family (Google Font) */
html, body {
font-family: "Lato", Helvetica, Arial, sans-serif;
font-size: 1em;
color: #ffffff;
background-color: #454545;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: inherit;
font-weight: 300;
line-height: 1.1;
color: inherit;
}
fieldset h1{
color: #000000;
}
.ie8 h1,.ie8 h2,.ie8 h3,.ie8 h4,.ie8 h5,.ie8 h6 {
font-weight: bold;
}
h1 {
font-size: 1.5em;
line-height: 1.35em;
margin: 0;
}
h2 {
font-size: 1.25em;
line-height: 1.35em;
font-weight: bold;
}
h3 {
font-size: 1em;
line-height: 1.35em;
}
/* paragraphs following h3 .. h6 have no top margin */
h3 + p,
h4 + p,
h5 + p,
h6 + p {
margin-top: 0;
}
.h_reverse1 { background:#ef3e33; color: #fff; padding-left: 0.3em;}
.h_reverse2 { background:#444; color: #fff; padding-left: 0.3em;}
.h_reverse3 { background:#000088; color: #fff; padding-left: 0.3em;}
.h2_top {
display: inline-block;
float: right;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
}
figure {
margin: 0px 20px;
}
figcaption {
font-size: 0.8em;
color: #444;
}
a,
a:link,
a:active {
color:#fff;
text-decoration: underline;
}
a:focus,
a:hover {
background:#454545;
color:#c1c1c1;
}
/* external link - show 'external' icon afterwards*/
a[href^="http://"]:after,
a[href^="https://"]:after {
font-family: 'FontAwesome';
content: " \f08e";
}
a[href^="http://www.csoft.co.uk"]:after,
a[href^="http://www2.csoft.co.uk"]:after,
a[href^="https://www.csoft.co.uk"]:after,
a[href^="https://www2.csoft.co.uk"]:after {
content: "";
}
/* Alternatively, we can use an anchor that is only underlined when hovering */
a.alt_a { text-decoration: none !important; }
a.alt_a:hover, a.alt_a:active { text-decoration: underline !important;}
blockquote {
display: inline-block;
font-family: Verdana, Helvetica, sans-serif;
color: #666;
text-shadow: 1px 1px 1px rgb(200, 200, 200);
max-width: 70%;
border : 1px solid #82c0ff;
margin: 5px 20px;
padding: 10px;
/* Border radius */
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
/* Box shadow */
box-shadow: 2px 2px 8px #ccc;
-webkit-box-shadow: 2px 2px 8px #ccc;
-moz-box-shadow: 2px 2px 8px #ccc;
background-color: #DEEBFF !important;
/* http://ie.microsoft.com/TEStdrive/Graphics/CSSGradientBackgroundMaker/Default.html */
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #DEEBFF 50%, #FFFFFF 75%, #DEEBFF 87%, #FFFFFF 93%, #FFFFFF 100%) !important;
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #DEEBFF 50%, #FFFFFF 75%, #DEEBFF 87%, #FFFFFF 93%, #FFFFFF 100%) !important;
/* Opera */
background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #DEEBFF 50%, #FFFFFF 75%, #DEEBFF 87%, #FFFFFF 93%, #FFFFFF 100%) !important;
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(0.5, #DEEBFF), color-stop(0.75, #FFFFFF), color-stop(0.87, #DEEBFF), color-stop(0.93, #FFFFFF), color-stop(1, #FFFFFF)) !important;
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #DEEBFF 50%, #FFFFFF 75%, #DEEBFF 87%, #FFFFFF 93%, #FFFFFF 100%) !important;;
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top left, #FFFFFF 0%, #DEEBFF 50%, #FFFFFF 75%, #DEEBFF 87%, #FFFFFF 93%, #FFFFFF 100%) !important;
}
blockquote:before { content: "\0022"; font-size: 120%; }
blockquote:after { content: "\0022"; font-size: 120%; }
/* default . If you want to style using prism.js then use this markup syntax instead: ... so style . */
:not(pre) > code {
font-family: 'Archivo Narrow', sans-serif;
background-color: #fee9cc;
color: rgba(0, 0, 0, 0.75);
padding: 1px 2px;
border: 1px solid #fdd299;
/* Border radius */
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.help, .help_h {
display: inline-block;
padding: 0.0em 0.3em;
color: #fff;
background: #aaa;
font-weight: bold;
text-decoration: none;
/* Border radius */
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.help {
font-size: 0.9em;
}
.help_h {
background: #0073e6;;
}
.help:hover, a.help_h:hover {
cursor: pointer;
color: #fff;
background: #A10000;
background: -webkit-linear-gradient(#dd0000, #C10000);
background: -moz-linear-gradient(#dd0000, #C10000);
background: -ms-linear-gradient(#dd0000, #C10000);
background: -o-linear-gradient(#dd0000, #C10000);
background: linear-gradient(#dd0000, #C10000);
}
a.help_h:hover, a.help_h:active, a.help_h:visited {
}
form {
width: 100%;
}
input, textarea,select {
border: 1px solid #d0d0d0;
font-size: 1.1em;
background: #fff;
color: #222;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input[type=checkbox] {
/* Larger Checkboxes */
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3);
margin: 3px;
}
input {
padding: 0.3em 0.3em;
}
textarea {
width: 95%;
}
input[type="text"], input[type="password"], input[type="email"] {
width: 275px;
background: #808080;
border: 1px solid #3d3d3d;
padding: 5px;
cursor: pointer;
color: inherit;
}
select {
background: #808080;
border: 1px solid #3d3d3d;
padding: 5px;
cursor: pointer;
color: inherit;
}
input[type=submit] {
border: none;
}
input:focus, textarea:focus, select:focus {
border-color: rgba(82, 168, 236, 0.8);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
/* IE6-8 */
}
/* Lists
-------------------------------------------------------------- */
li ul,
li ol { margin: 0; }
ul, ol { margin: 0 0 1em 0.5em; padding-left: 1.5em; list-style-position: outside;}
ol { list-style: decimal;}
ul { list-style: circle;}
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em; }
/* Definition list that looks like a table - used in character sets page - Lieuwe */
dl.table-display
{
float: left;
margin: 1em 0;
padding: 0;
}
.table-display dt
{
clear: left;
float: left;
width: 10%;
min-width: 9em;
margin: 0;
padding: 15px;
font-weight: bold;
}
.table-display dd
{
float: left;
width: 60%;
margin: 0;
padding: 15px;
}
/*remove the list item indent and symbol*/
.list0 li {
list-style: none;
text-decoration: none;
padding: 2px 0px 2px 0px;
margin-left: -0.7em;
}
.list0 li:before {
content: '' !important;
}
/* Tables
* form1 - WILL BE REMOVED - fieldset should be used instead
-------------------------------------------------------------- */
.table1 , .form1 {
margin-bottom: 1em;
max-width: 80%;
border: 1px solid #ccc;
background: #fff;
}
/* tables that appear in box to have a width of 100% */
.box0 .table1, .box1 .table1 , .box2 .table1 , .box3 .table1 , .box4 .table1 {
max-width: 100%;
}
.form1 { width: 90%;}
.table1 caption, .form1 caption {
font-size: 110%;
color: #777;
text-align: left;
font-weight: normal;
}
.table1 th, .table1 td, .table1 caption,
.form1 th, .form1 td, .form1 caption {
padding: 4px 6px;
text-align: left;
vertical-align: top;
}
/* extra padding for first and last entries */
.table1 th:first-of-type, .table1 td:first-of-type {
padding-left: 1em;
}
.table1 th:last-of-type, .table1 td:last-of-type {
padding-right: 1em;
}
.table1:not(.noborder) tr:first-of-type th {
padding-top: 1em;
}
.table1:not(.noborder) tr:last-of-type td {
padding-bottom: 1em;
}
.table1 th .help, .table1 td .help {font-size: 70% !important;}
.table1 , .form1 {
margin-bottom: 1em;
}
.table1 th, .form1 th, .th {
font-size: 1em;
font-weight: bold;
color: #444;
}
/* special overiding classes for table column centering */
/* By default all table and are LEFT aligned */
/* These classes are added only to elements ) */
/* .tcen_all - CENTER align ALL columns in a table - does upto 20 columns */
/* For example: */
.tcen_all th:nth-child(-n+20), .tcen_all td:nth-child(-n+20) {
text-align: center;
}
/* .tright_all - RIGHT align ALL columns in a table - does upto 20 columns */
/* For example: */
.tright_all th:nth-child(-n+20), .tright_all td:nth-child(-n+20) {
text-align: right;
}
/* .tcen_ - CENTER align SPECIFIC columns in a table */
/* For example: this will center align cols 2,3,4,5 */
.tcen_1 td:nth-child(1), .tcen_1 th:nth-child(1),
.tcen_2 td:nth-child(2), .tcen_2 th:nth-child(2),
.tcen_3 td:nth-child(3), .tcen_3 th:nth-child(3),
.tcen_4 td:nth-child(4), .tcen_4 th:nth-child(4),
.tcen_5 td:nth-child(5), .tcen_5 th:nth-child(5),
.tcen_6 td:nth-child(6), .tcen_6 th:nth-child(6),
.tcen_7 td:nth-child(7), .tcen_7 th:nth-child(7),
.tcen_8 td:nth-child(8), .tcen_8 th:nth-child(8),
.tcen_9 td:nth-child(9), .tcen_9 th:nth-child(9),
.tcen_10 td:nth-child(10), .tcen_10 th:nth-child(10),
.tcen_11 td:nth-child(11), .tcen_11 th:nth-child(11),
.tcen_12 td:nth-child(12), .tcen_12 th:nth-child(12),
.tcen_13 td:nth-child(13), .tcen_13 th:nth-child(13),
.tcen_14 td:nth-child(14), .tcen_14 th:nth-child(14),
.tcen_15 td:nth-child(15), .tcen_15 th:nth-child(15),
.tcen_16 td:nth-child(16), .tcen_16 th:nth-child(16),
.tcen_17 td:nth-child(17), .tcen_17 th:nth-child(17),
.tcen_18 td:nth-child(18), .tcen_18 th:nth-child(18),
.tcen_19 td:nth-child(19), .tcen_19 th:nth-child(19),
.tcen_20 td:nth-child(20), .tcen_20 th:nth-child(20) { text-align: center; }
/* .tleft_ - LEFT align SPECIFIC columns in a table */
/* For example: this will left align cols 2,3,4,5 */
.tleft_1 td:nth-child(1), .tleft_1 th:nth-child(1),
.tleft_2 td:nth-child(2), .tleft_2 th:nth-child(2),
.tleft_3 td:nth-child(3), .tleft_3 th:nth-child(3),
.tleft_4 td:nth-child(4), .tleft_4 th:nth-child(4),
.tleft_5 td:nth-child(5), .tleft_5 th:nth-child(5),
.tleft_6 td:nth-child(6), .tleft_6 th:nth-child(6),
.tleft_7 td:nth-child(7), .tleft_7 th:nth-child(7),
.tleft_8 td:nth-child(8), .tleft_8 th:nth-child(8),
.tleft_9 td:nth-child(9), .tleft_9 th:nth-child(9),
.tleft_10 td:nth-child(10), .tleft_10 th:nth-child(10),
.tleft_11 td:nth-child(11), .tleft_11 th:nth-child(11),
.tleft_12 td:nth-child(12), .tleft_12 th:nth-child(12),
.tleft_13 td:nth-child(13), .tleft_13 th:nth-child(13),
.tleft_14 td:nth-child(14), .tleft_14 th:nth-child(14),
.tleft_15 td:nth-child(15), .tleft_15 th:nth-child(15),
.tleft_16 td:nth-child(16), .tleft_16 th:nth-child(16),
.tleft_17 td:nth-child(17), .tleft_17 th:nth-child(17),
.tleft_18 td:nth-child(18), .tleft_18 th:nth-child(18),
.tleft_19 td:nth-child(19), .tleft_19 th:nth-child(19),
.tleft_20 td:nth-child(20), .tleft_20 th:nth-child(20) { text-align: left; }
/* .tright_ - RIGHT align SPECIFIC columns in a table */
/* For example: this will right align cols 2,3,4,5 */
.tright_1 td:nth-child(1), .tright_1 th:nth-child(1),
.tright_2 td:nth-child(2), .tright_2 th:nth-child(2),
.tright_3 td:nth-child(3), .tright_3 th:nth-child(3),
.tright_4 td:nth-child(4), .tright_4 th:nth-child(4),
.tright_5 td:nth-child(5), .tright_5 th:nth-child(5),
.tright_6 td:nth-child(6), .tright_6 th:nth-child(6),
.tright_7 td:nth-child(7), .tright_7 th:nth-child(7),
.tright_8 td:nth-child(8), .tright_8 th:nth-child(8),
.tright_9 td:nth-child(9), .tright_9 th:nth-child(9),
.tright_10 td:nth-child(10), .tright_10 th:nth-child(10),
.tright_11 td:nth-child(11), .tright_11 th:nth-child(11),
.tright_12 td:nth-child(12), .tright_12 th:nth-child(12),
.tright_13 td:nth-child(13), .tright_13 th:nth-child(13),
.tright_14 td:nth-child(14), .tright_14 th:nth-child(14),
.tright_15 td:nth-child(15), .tright_15 th:nth-child(15),
.tright_16 td:nth-child(16), .tright_16 th:nth-child(16),
.tright_17 td:nth-child(17), .tright_17 th:nth-child(17),
.tright_18 td:nth-child(18), .tright_18 th:nth-child(18),
.tright_19 td:nth-child(19), .tright_19 th:nth-child(19),
.tright_20 td:nth-child(20), .tright_20 th:nth-child(20) { text-align: right; }
.form1 tfoot th {
text-align: right;
}
/* You can zebra-stripe your tables in outdated browsers by adding the class "even" to every other table row. */
.table1 tr:nth-child(even) td, .table1 tr.even td { background: #fff; }
.table1 tr:nth-child(odd) td, .table1 tr.odd td { background: rgba(219,141,0,0.075); }
/* match odd and even cell columns of table */
.form1 tr td { background: #fff; }
/* form fieldsets
-------------------------------------------------------------- */
/************************************/
/* (.fieldset1 ) form field styling */
/* plain - 2 column */
/************************************/
.fieldset1 {
display: inline-block;
vertical-align: top;
text-align: left;
width: 90%;
font-size: 0.9em;
margin: 0.5em;
/*padding-left: 10px;*/
/*border-top: 1px solid #ccc;*/
background: transparent;
}
.fieldset1 img {
padding: 0;
}
.fieldset1 hr {
border-top: 1px solid #ccc;
}
.fieldset1 p {
margin-top: 0.2em;
padding-left: 1em;
clear: both;
}
.fieldset1 textarea,
.fieldset1 input[type=text],
.fieldset1 input[type=email],
.fieldset1 input[type=password],
.fieldset1 input[type=tel] {
max-width: 100%;
}
.fieldset1 legend {
font-size: 120%;
font-weight: bold;
margin-bottom: 0.4em;
padding: 0.3em;
/*color: #777;*/
}
.fieldset1 label {
background: transparent;
vertical-align: top;
position: relative;
margin-bottom: 0.8em;
padding-left: 5px;
padding-right: 5px;
width: inherit;
}
.fieldset1 .form_input {
background: transparent;
position: relative;
margin-bottom: 0.8em;
padding-left: 5px;
width: inherit;
overflow: inherit;
}
.fieldset1 fieldset fieldset { /* nested fieldset */
width: auto;
}
/*******************************/
/* (.fieldset2 ) form field styling */
/* label/input background colours - 2 column */
/*******************************/
.fieldset2 {
display: inline-block;
vertical-align: top;
text-align: left;
width: 90%;
font-size: 0.9em;
margin: 0.5em;
padding-left: 10px;
border-top: 1px solid #ccc;
background: transparent;
}
.fieldset2 img {
padding: 0;
}
.fieldset2 hr {
border-top: 1px solid #ccc;
}
.fieldset2 p {
margin-top: 0.2em;
padding-left: 1em;
clear: both;
}
.fieldset2 textarea,
.fieldset2 input[type=text],
.fieldset2 input[type=email],
.fieldset2 input[type=password],
.fieldset2 input[type=tel] {
max-width: 100%;
}
.fieldset2 legend {
font-size: 120%;
font-weight: bold;
margin-bottom: 0.4em;
padding: 0.3em;
color: #777;
}
.fieldset2 label {
vertical-align: top;
position: relative;
float: left;
clear: both;
width: 97%;
color: #666;
margin-bottom: 0.8em;
padding: 4px;
background: #dfefff;
}
.fieldset2 .form_input {
position: relative;
float: left;
width: 97%;
margin-bottom: 0.8em;
padding: 4px;
background: #ffffc4;
overflow: inherit;
}
.fieldset2 fieldset fieldset { /* nested fieldset */
width: auto;
}
/* fieldset breakpoint 1 */
/* min-width - 768px */
@media all and (min-width: 48em){
.fieldset1, .fieldset2 {
width: 90%;
}
/************************************/
/* (.fieldset1 ) form field styling */
/************************************/
.fieldset1 label {
float: left;
clear: both;
width: 39%;
}
.fieldset1 .form_input {
float: left;
width: 60%;
padding-left: 0;
}
/************************************/
/* (.fieldset2 ) form field styling */
/************************************/
.fieldset2 label {
width: 39%;
}
.fieldset2 .form_input {
width: 60%;
}
}
/* fieldset breakpoint 2 */
/* min-width - 1024px */
@media all and (min-width: 64em){
.fieldset1, .fieldset2 {
min-width: 45%;
max-width: 90%;
}
/* classes to override width of a fieldset. Add to element. Choice of two: */
.fieldset_width_a {
min-width: 25% !important;
max-width: 47% !important;
}
.fieldset_width_b {
width: 95% !important;
}
}
/* To have a fieldset (label and input_form) all in one column:
add 'fieldset_1column' class:
...
*/
.fieldset_1column {
width: 90% !important;
}
.fieldset_1column label,
.fieldset_1column .form_input,
.fieldset_1column .css_submit {
width: 100% !important;
display: inline-block;
margin: 0;
}
.fieldset_1column label {
padding-left: 0;
padding-right: 0;
}
.fieldset_1column .form_input {
margin-bottom: 0.7em;
}
.fieldset_1column .help {
float: right;
}
/**************************************/
/* Tab styling for simple jQuery tabs */
/**************************************/
/* tab1 section */
.tab1_section {
margin: 0 2%;
width: 96%;
}
ul.tab1 {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 26px;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
width: 100%;
}
ul.tab1 li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 2em ;
height: 25px;
line-height: 25px;
border: 1px solid #999999;
border-bottom: 0px solid #fff;
border-left: none;
font-size: 0.9em;
background: #fee9cc;
overflow: hidden;
position: relative;
}
ul.tab1 li:hover {
background: #CCCCCC;
}
ul.tab1 li.active{
background: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.tab1_container {
border: 1px solid #999999;
border-top: 0px solid #fff;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab1_container .tab1_content {
display: none;
padding: 20px 4%;
font-size: 0.8em;
display: none;
}
/**********************************/
/* Tab styling for MISC_createTab */
/* media queries will affect 'csofttab1' see layout_2.css */
/**********************************/
.csofttab1 {
position: relative;
display: block;
background: #fff;
width: 100%;
overflow: auto;
}
.csofttab1_body {
position: relative;
padding: 8px;
overflow: auto;
}
.csofttab1 fieldset {
border: none;
width: inherit;
min-width: 70%;
max-width: 95%;
}
.csofttab1_style {
/* Border radius */
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-top-right-radius: 0;
border-top-left-radius: 0;
/* Box shadow */
box-shadow: 2px 2px 8px #bbb;
-webkit-box-shadow: 2px 2px 8px #bbb;
-moz-box-shadow: 2px 2px 8px #bbb;
border: 1px solid #808080;
border-top: none;
}
ul.csofttab1_ul {
display: table;
table-layout: fixed;
width: 100%;
list-style: none;
margin: 0px;
padding: 0;
}
ul.csofttab1_ul li {
display: table-cell;
width: auto;
text-align: center;
}
.csofttab1_link {
display: inline-block;
background: #eee;
text-align: center;
border: solid 1px #d0d0d0;
}
.csofttab1_link:hover {
cursor: pointer;
background: #dfefff;
}
.csofttab1_slide {
padding: 8px;
bottom: 32%;
position: absolute;
display: block;
opacity: 0.3;
font-size: 600%;
color: #007af4;
text-shadow: 0 0 1px #000;
}
.csofttab1_slide:hover {
cursor: pointer;
}
.csofttab1_selected {
background: #dfefff;
}
.csofttab1_bottom {
position: absolute;
bottom: 10px;
min-width: 8em;
}
.csofttab1_left {
float: left;
left: 8px;
}
.csofttab1_right {
float: right;
right: 8px;
}
/* Clear icon inside input text ,
, , etc, that you want to have a pulse/throb effect */
.animation_pulse {
-webkit-animation-name: pulse;
-webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: pulse;
-moz-animation-duration: 1.5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: pulse;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-moz-keyframes pulse {
0% { opacity: 1.0; }
50% { opacity: 0.2; }
100% { opacity: 1.0; }
}
@-webkit-keyframes pulse {
0% { opacity: 1.0; }
50% { opacity: 0.2; }
100% { opacity: 1.0; }
}
@keyframes pulse {
0% { opacity: 1.0; }
50% { opacity: 0.2; }
100% { opacity: 1.0; }
}
/* Slightly smaller fonts - using the 'small' attrribute is too small */
.font_90pct { font-size: 0.9em; }
.font_70pct { font-size: 0.7em; }
.font_normal { font-size: 1em; font-weight: normal; color: #222; }
/* background tints */
.background0 { background-color: transparent !important;}
.background1 { background-color: #f7f7f7 !important;}
.background2 {
background-color: #ef3e33 !important;
color:#fff;
}
.background3 {
border: 1px solid #DEEBFF !important;
background-color: #DEEBFF !important;
/* http://ie.microsoft.com/TEStdrive/Graphics/CSSGradientBackgroundMaker/Default.html */
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #DEEBFF 50%, #FFFFFF 75%, #DEEBFF 87%, #FFFFFF 93%, #FFFFFF 100%) !important;
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #DEEBFF 50%, #FFFFFF 75%, #DEEBFF 87%, #FFFFFF 93%, #FFFFFF 100%) !important;
/* Opera */
background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #DEEBFF 50%, #FFFFFF 75%, #DEEBFF 87%, #FFFFFF 93%, #FFFFFF 100%) !important;
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(0.5, #DEEBFF), color-stop(0.75, #FFFFFF), color-stop(0.87, #DEEBFF), color-stop(0.93, #FFFFFF), color-stop(1, #FFFFFF)) !important;
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #DEEBFF 50%, #FFFFFF 75%, #DEEBFF 87%, #FFFFFF 93%, #FFFFFF 100%) !important;;
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top left, #FFFFFF 0%, #DEEBFF 50%, #FFFFFF 75%, #DEEBFF 87%, #FFFFFF 93%, #FFFFFF 100%) !important;
}
.background_report1 {
background-color: #ffead5 !important;
}
/* ------------------- */
/* white styling definitions (without font sizing) */
/* ------------------- */
.white {
color: #fff;
}
.white [class^="icon-"],
.white i {
color: #fff;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
}
.white h1,
.white h2,
.white h3,
.white h4,
.white h5,
.white h6 {
color: #fff;
font-weight: 600;
font-family: 'Oswald', sans-serif;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
width: 100%;
}
.white a {
color: #fff;
}
.white a:hover {
color: #fff;
text-decoration: underline;
}
/* give section or div padding if it has a background */
section.background0,section.background1,section.background2,section.background3,section.background_report1,
div.background0,div.background1,div.background2,div.background3,div.background_report1 {
padding: 10px;
}
.pointer { cursor: pointer;}
.accordian.plus, .accordian.plus a { color: #ef3e33 !important;}
.accordian.minus, .accordian.minus a { color: #ef3e33 !important;}
.accordian.plus:hover,.accordian.minus:hover { text-decoration: underline;}
.plus:before, .minus:before {
font-family: 'FontAwesome';
display: inline-block;
font-size: 100%;
line-height: 1;
min-width: 1.0em;
text-align: right;
margin-right: 0.2em;
}
.plus:before {content:'\f138';}
.minus:before {content:'\f13a';}
h2.accordian {border: none;}
/* OVERRIDNG CLASSES */
.fa-3x {font-size: 3em;}
.nopadding {padding: 0 !important;}
.noborder {border: none !important;}
.noborder_right {border-right: 0 !important;}
.noborder_left { border-left: 0 !important;}
.noborder_top {border-top: 0 !important;}
.noborder_bottom { border-bottom: 0 !important;}
.center { text-align: center !important;}
table.center { margin: 0 auto !important;} /* How to center tables */
.left { text-align: left !important;}
.right { text-align: right !important;}
.nowrap { white-space: nowrap; }
.numeric { text-align: right !important; }
.full_width {width: 100% !important; max-width: 100% !important; }
.width_90pct { width: 90% !important; max-width: 90% !important; }
.width_80pct { width: 80% !important; max-width: 80% !important; }
.width_70pct { width: 70% !important; max-width: 70% !important; }
.width_60pct { width: 60% !important; max-width: 60% !important; }
.width_50pct { width: 50% !important; max-width: 50% !important; }
.width_40pct { width: 40% !important; max-width: 40% !important; }
.width_30pct { width: 30% !important; max-width: 30% !important; }
.width_20pct { width: 20% !important; max-width: 20% !important; }
.width_10pct { width: 10% !important; max-width: 10% !important; }
.auto_width {width: auto !important;}
.column_minwidth1 { min-width: 12em !important;}
/* No stripes on tables td. To use add the '.nostripe' class to the table element
*/
.nostripe tr td { background: #fff !important; }
/* ------------------- */
/* Sizing classes */
/* ------------------- */
.row-medium .icon-lock.fa-3x {
margin-left: 16px;
}
.row-medium {
font-size: 110%;
}
.row-large {
font-size: 130%;
}
.row-large a {
font-size: 135%;
font-weight: bold;
}
/* Standarised border radius */
.radius_tl {border-top-left-radius: 7px;}
.radius_tr {border-top-right-radius: 7px;}
.radius_bl {border-bottom-left-radius: 7px;}
.radius_br {border-bottom-right-radius: 7px;}
/* Project Tracking */
.pt_orphan { background-color: #FFDEAD !important; }
.pt_feedback { background-color: #DDFFCC !important; }
.pt_24442 { background-color: #FAF6C5 !important; }
.pt-box-private { background-color : #ffffae; }
/* most likely to be removed */
.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.2; }
.large { font-size: 1.2em; line-height: 1.2; margin-bottom: 1.25em; }
.hide { display: none; }
.quiet { color: #666; }
.loud { color: #000; }
.info { font-weight: bold; color:#D22E42; }
.added { background:#060; color: #fff; }
.removed { background:#900; color: #fff; }
.empty { background:#fff; color: #fff; }
/* cca */
.wizard_done {
display: -moz-inline-box;
display: inline-block;
padding: 0px 2px 0px 2px;
color: Black;
text-decoration: none;
background-color: #cfcfcf;
border: 1px solid Black;
}
.wizard_not_done {
display: -moz-inline-box;
display: inline-block;
padding: 0px 2px 0px 2px;
color: Grey;
text-decoration: none;
background-color: #f0f0f0;
border: 1px solid Grey;
}
.wizard_not_allowed {
display: -moz-inline-box;
display: inline-block;
padding: 0px 2px 0px 2px;
color: #c8c8c8;
text-decoration: none;
background-color: #f0f0f0;
border: 1px solid #c8c8c8;
}
.wizard_current {
display: -moz-inline-box;
display: inline-block;
padding: 0px 2px 0px 2px;
color: Black;
text-decoration: none;
background-color: #FFD700;
border: 1px solid Black;
}
/***************/
/* css buttons */
/***************/
.myStationButton{
background-color: rgb(69, 69, 69);
color: rgb(255, 255, 255);
margin-left: 5px;
border: 1px solid rgb(128, 128, 128) !important;
background-image: none;
display: inline-block;
padding: 10px;
text-decoration: none !important;
}
.myStationButton:hover{
background-color: #555;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button:hover, button:active, #css_button_secondary:hover, #css_button_secondary:active {
color: #fff;
border: 1px solid #2E6DA4;
background: #007EC0;
}
button:disabled, #css_button_secondary:disabled {
background: #ddd;
color: #999;
border: 1px solid #999;
cursor: default;
}
/* css_button (red: small and large) */
.css_button, .css_submit, .css_button_small,
.css_button:link, .css_submit:link, .css_button_small:link {
display: inline-block;
font-family: 'Oswald', sans-serif;
vertical-align: middle;
text-align: center;
text-decoration: none;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
white-space: nowrap;
font-size: 1em;
padding: 4px 12px;
color: #ffffff;
background: #ef3e33;
-webkit-box-shadow: 3px 3px 4px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 3px 3px 4px 0px rgba(50, 50, 50, 0.5);
box-shadow: 3px 3px 4px 0px rgba(50, 50, 50, 0.5);
/* Border radius */
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.css_button, .css_submit, .css_button_small {
color: #fff;
background: #ef3e33;
min-width: 8em;
margin-top: 4px;
margin-bottom: 4px;
}
.css_button_small {
min-width: 4em;
margin: 0px;
}
.css_button:hover, .css_submit:hover, .css_button_small:hover {
color: #fff;
background: #db2319;
-webkit-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.5);
cursor: pointer;
}
button.css_button, button.css_button_small, button.css_submit,
.css_submit {
border: none;
}
.css_button a:visited, .css_button:visited, .css_button:focus, .css_button a:focus,
.css_button_small:focus, .css_button_small a:focus,
.css_submit a:visited, .css_submit:visited, .css_submit:focus, .css_submit a:focus {
color: #fff;
}
.css_button:disabled, .css_button_small:disabled,
.css_submit:disabled, .css_submit:disabled {
color: #999;
background: #ddd;
font-weight: normal;
text-shadow: none;
cursor: default;
}
/* icon styles */
.close_icon {
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 1.2em;
line-height: 1;
background: transparent;
color: #777;
}
.close_icon:after {
font-family: 'FontAwesome';
content: " \f00d";
color: #777;
}
.close_icon a {
background: transparent;
color: #777;
text-decoration: none;
}
.close_icon:hover,.close_icon a:hover {
background: transparent;
color: #c0c0c0;
cursor: pointer;
}
.close_icon a:visited, .close_icon:visited, .close_icon:focus, .close_icon a:focus {
color: #777;
}
.top_link1 {
display: inline-block;
font-weight: bold;
text-decoration: none;
white-space: nowrap;
padding: 5px;
margin-left: -7px;
}
.top_link1:hover {
text-decoration: underline;
}
/* page (body) background colours */
.private_body {
background: #FFF4E0 !important;
}
.blacklist_body {
background: #E1E1E1 !important;
}
.delete_body {
background: #FFBBBB !important;
}
.suspended_body {
background: #ffff66 !important;
}
/* boxOver tooltip */
.bo_tooltip_h {
z-index: 150;
background-color:#e7edf3;
color: #003366;
text-decoration: none;
border : 1px solid #B0C4DE;
border-bottom: none;
padding: 4px;
font-weight: bold;
}
.bo_tooltip_b {
z-index: 150;
background-color:#FFF4E0;
color:#000000;
text-decoration: none;
border : 1px solid #B0C4DE;
padding: 4px;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster:
http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}