silverstripe-userforms/thirdparty/jquery-validate/demo/login/screen.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;
		}