457 lines
6.2 KiB
CSS
457 lines
6.2 KiB
CSS
|
/*******************************************************************************
|
||
|
********************************************************************************
|
||
|
**
|
||
|
* - GENERAL
|
||
|
*
|
||
|
* - PAGE CONTAINERS
|
||
|
*
|
||
|
* - HEADER
|
||
|
*
|
||
|
* - CONTENT
|
||
|
**
|
||
|
********************************************************************************
|
||
|
******************************************************************************/
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
/* GENERAL ------------------------------------------------------------------ */
|
||
|
|
||
|
html
|
||
|
{
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
/* Zero default margin & padding around common elements */
|
||
|
body, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, ul, ol, li, p
|
||
|
{
|
||
|
margin: 0;
|
||
|
border: none;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
body
|
||
|
{
|
||
|
height: 100%;
|
||
|
background-color: #333333;
|
||
|
background-image: url(images/bg.gif);
|
||
|
background-position: 0% 0;
|
||
|
color: #000000;
|
||
|
line-height: 1.5;
|
||
|
font-family: Arial, Helvetica, sans-serif;
|
||
|
font-size: 62.5%;
|
||
|
text-align: center;
|
||
|
overflow:auto;
|
||
|
}
|
||
|
|
||
|
a:link
|
||
|
{
|
||
|
color: #003399;
|
||
|
}
|
||
|
|
||
|
a:visited
|
||
|
{
|
||
|
color: #B266B2;
|
||
|
}
|
||
|
|
||
|
a:hover
|
||
|
{
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
/* PAGE CONTAINERS ---------------------------------------------------------- */
|
||
|
|
||
|
#page
|
||
|
{
|
||
|
width: 636px;
|
||
|
w\idth: 600px;
|
||
|
min-height: 100%;
|
||
|
margin: 17px auto;
|
||
|
padding: 0 18px;
|
||
|
background-image: url(images/page.gif);
|
||
|
background-repeat: repeat-y;
|
||
|
text-align: left;
|
||
|
}
|
||
|
|
||
|
* html #page
|
||
|
{
|
||
|
height: 100%;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
/* HEADER ------------------------------------------------------------------- */
|
||
|
|
||
|
#header
|
||
|
{
|
||
|
height: 90px;
|
||
|
background-color: #B2DD32;
|
||
|
background-image: url(images/header1.jpg);
|
||
|
background-repeat: repeat-x;
|
||
|
}
|
||
|
|
||
|
h1
|
||
|
{
|
||
|
padding: 0 35px;
|
||
|
font-size: 2.2em;
|
||
|
font-weight: normal;
|
||
|
line-height: 82px;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
/* CONTENT ------------------------------------------------------------------ */
|
||
|
|
||
|
#content
|
||
|
{
|
||
|
padding: 0 25px;
|
||
|
}
|
||
|
|
||
|
p
|
||
|
{
|
||
|
font-size:1.1em;
|
||
|
margin-top: 1.5em;
|
||
|
}
|
||
|
|
||
|
form
|
||
|
{
|
||
|
margin-top: 1.5em;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
/*** MASTER FORM WIDTHS - CUSTOMIZE THIS TO CHANGE THE FORM LAYOUT ***/
|
||
|
|
||
|
/*
|
||
|
form width: 550px
|
||
|
left column: 190px / 180px + 10px padding
|
||
|
mid column: 200px
|
||
|
right column: 160px
|
||
|
*/
|
||
|
|
||
|
form{
|
||
|
width:550px !important;
|
||
|
}
|
||
|
|
||
|
fieldset.submit
|
||
|
{
|
||
|
padding-left: 190px !important;
|
||
|
}
|
||
|
|
||
|
form label{
|
||
|
padding:0px 10px;
|
||
|
width: 160px;
|
||
|
}
|
||
|
|
||
|
form label.error,
|
||
|
form input.submit
|
||
|
{
|
||
|
margin-left:180px !important;
|
||
|
}
|
||
|
|
||
|
form fieldset fieldset label.error
|
||
|
{
|
||
|
margin-left:0px !important;
|
||
|
width:200px !important;
|
||
|
}
|
||
|
|
||
|
|
||
|
form .centered{
|
||
|
margin-left:180px !important;
|
||
|
width:200px !important;
|
||
|
}
|
||
|
|
||
|
form .text,
|
||
|
form .button,
|
||
|
form .group,
|
||
|
form .control,
|
||
|
form .submit,
|
||
|
form textarea,
|
||
|
form select
|
||
|
{
|
||
|
width: 200px !important;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
/*** FIELDSETS AND LEGENDS ***/
|
||
|
|
||
|
form{
|
||
|
width:550px;
|
||
|
margin-bottom:25px;
|
||
|
clear:both;
|
||
|
}
|
||
|
|
||
|
form fieldset
|
||
|
{
|
||
|
margin: 0 0 1.5em 0;
|
||
|
padding: 0 0 10px 0px;
|
||
|
|
||
|
border: 1px solid #BFBAB0;
|
||
|
|
||
|
background-color: #F2EFE9;
|
||
|
background-image: url(images/fieldset_gradient.jpg);
|
||
|
background-repeat: repeat-x;
|
||
|
|
||
|
background-color: #fff;
|
||
|
background-image: url(images/fieldset-gradient-02.jpg);
|
||
|
background-position:bottom;
|
||
|
|
||
|
float: left;
|
||
|
clear: both;
|
||
|
width: 100%;
|
||
|
|
||
|
}
|
||
|
|
||
|
form fieldset.submit
|
||
|
{
|
||
|
padding: 0px 10px 10px 190px;
|
||
|
border-style: none;
|
||
|
|
||
|
background-color: transparent;
|
||
|
background-image: none;
|
||
|
|
||
|
float: none;
|
||
|
width: auto;
|
||
|
|
||
|
}
|
||
|
|
||
|
form legend
|
||
|
{
|
||
|
color: #000000;
|
||
|
|
||
|
font-size:1.3em;
|
||
|
font-weight: bold;
|
||
|
font-variant:small-caps;
|
||
|
|
||
|
margin-left: 1em;
|
||
|
padding:0px 5px;
|
||
|
}
|
||
|
|
||
|
form fieldset p{
|
||
|
margin:10px 0px 0px 10px;
|
||
|
}
|
||
|
|
||
|
/*** FORM BLOCKS ***/
|
||
|
|
||
|
form ul
|
||
|
{
|
||
|
padding:5px 10px;
|
||
|
list-style: none;
|
||
|
}
|
||
|
|
||
|
form li
|
||
|
{
|
||
|
width: 100%;
|
||
|
|
||
|
padding:5px 0px 10px 0;
|
||
|
border-top:1px dotted #ccc;
|
||
|
|
||
|
display:block;
|
||
|
float: left;
|
||
|
clear: left;
|
||
|
}
|
||
|
|
||
|
form li:first-child
|
||
|
{
|
||
|
border:none;
|
||
|
}
|
||
|
|
||
|
|
||
|
/*** FORM BLOCK ELEMENTS ***/
|
||
|
|
||
|
form label
|
||
|
{
|
||
|
padding:0px 10px;
|
||
|
width: 160px;
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
form .error{
|
||
|
color: #c00;
|
||
|
}
|
||
|
|
||
|
form label.error
|
||
|
{
|
||
|
color: #c00;
|
||
|
|
||
|
font-size: 100%;
|
||
|
font-weight: bold;
|
||
|
font-variant:small-caps;
|
||
|
|
||
|
width:308px;
|
||
|
display: none;
|
||
|
|
||
|
margin:8px 0px 0px 180px;
|
||
|
padding:3px 0px 0px 5px;
|
||
|
border-top:1px dotted #ccc;
|
||
|
|
||
|
clear:both;
|
||
|
}
|
||
|
|
||
|
form label.info{
|
||
|
font-size: 100%;
|
||
|
font-weight: bold;
|
||
|
font-variant:small-caps;
|
||
|
|
||
|
margin:8px 0px 0px 180px;
|
||
|
padding:3px 0px 0px 5px;
|
||
|
}
|
||
|
|
||
|
form fieldset fieldset,
|
||
|
form .group
|
||
|
{
|
||
|
width:200px;
|
||
|
|
||
|
margin: 0;
|
||
|
border:none;
|
||
|
|
||
|
background:none;
|
||
|
|
||
|
float:left;
|
||
|
clear: none;
|
||
|
|
||
|
}
|
||
|
|
||
|
form fieldset fieldset label
|
||
|
{
|
||
|
width:auto !important;
|
||
|
white-space:nowrap;
|
||
|
padding:0px;
|
||
|
margin:0px;
|
||
|
display:block;
|
||
|
clear:both;
|
||
|
}
|
||
|
|
||
|
form label label.error{
|
||
|
margin-left:0px;
|
||
|
}
|
||
|
|
||
|
form label.centered{
|
||
|
padding:0px 0px;
|
||
|
width:200px !important;
|
||
|
}
|
||
|
|
||
|
/* see also the error class at the foot of the page */
|
||
|
|
||
|
form fieldset fieldset label.spaced
|
||
|
{
|
||
|
margin-bottom:3px;
|
||
|
}
|
||
|
|
||
|
/*** FORM ELEMENT COLUMNS ***/
|
||
|
|
||
|
.col-1,
|
||
|
fieldset fieldset.col-1 label
|
||
|
{
|
||
|
width:100%;
|
||
|
}
|
||
|
|
||
|
.col-2,
|
||
|
fieldset fieldset.col-2 label
|
||
|
{
|
||
|
width:50%;
|
||
|
}
|
||
|
|
||
|
.col-3,
|
||
|
fieldset fieldset.col-3 label
|
||
|
{
|
||
|
width:33%;
|
||
|
}
|
||
|
|
||
|
.col-4,
|
||
|
fieldset fieldset.col-4 label
|
||
|
{
|
||
|
width:25%;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
/*** FORM ELEMENTS ***/
|
||
|
|
||
|
form input.submit{
|
||
|
margin:10px 0px 10px 180px;
|
||
|
padding:0px 2px;
|
||
|
}
|
||
|
|
||
|
form input, textarea, select,
|
||
|
form label
|
||
|
{
|
||
|
font-size:1.1em;
|
||
|
line-height:1.6em;
|
||
|
}
|
||
|
|
||
|
form input, textarea, select
|
||
|
{
|
||
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||
|
}
|
||
|
|
||
|
form .input[type="text"],
|
||
|
form textarea
|
||
|
{
|
||
|
padding:1px;
|
||
|
}
|
||
|
|
||
|
form .input[type="radio"],
|
||
|
form .input[type="checkbox"]
|
||
|
{
|
||
|
margin:0px;
|
||
|
padding:0px;
|
||
|
position:relative;
|
||
|
top:3px;
|
||
|
}
|
||
|
|
||
|
/*** SUPPORTING CLASSES ***/
|
||
|
|
||
|
form label.required{
|
||
|
background-image:url(images/required_star.gif);
|
||
|
background-position:right;
|
||
|
background-repeat:no-repeat;
|
||
|
}
|
||
|
|
||
|
form span.required{
|
||
|
padding-right:15px;
|
||
|
}
|
||
|
|
||
|
form .clean
|
||
|
{
|
||
|
border:none;
|
||
|
}
|
||
|
|
||
|
form .info{
|
||
|
padding-top:0.5em;
|
||
|
font-size:80%;
|
||
|
line-height:100%;
|
||
|
color:#aaa;
|
||
|
}
|
||
|
|
||
|
form .indent{
|
||
|
padding:2px 20px;
|
||
|
width:auto !important;
|
||
|
white-space:nowrap;
|
||
|
padding-left: 25px !important;
|
||
|
}
|
||
|
|
||
|
form label.disabled{
|
||
|
color:#aaa;
|
||
|
}
|
||
|
|
||
|
form .highlight{
|
||
|
background-color:#e2e2e2;
|
||
|
}
|
||
|
|
||
|
.off{
|
||
|
display:none !important;
|
||
|
}
|
||
|
|
||
|
.clear{
|
||
|
clear:both;
|
||
|
}
|
||
|
|