silverstripe-userforms/thirdparty/jquery-validate/demo/login/screen.css
2013-03-18 19:06:47 -04:00

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;
}