/* == PLEASE *DO NOT* EDIT THIS FILE, NOT EVEN A LITTLE BIT. CONTACT JOHN OR STEFF FOR MORE INFO. THANKS == */

form h2 { /* Overwriting generic h2 styles */
	color: #666;
	font-size: 14px;
	margin: 25px 0 5px;
}

legend.shown { /* Hiding all fieldset legends. */
	display: block;
	font-weight: bold;
    margin: 10px 0 0;
    text-indent: 0;
}

fieldset {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background:#ecf7fc;
	border-radius: 5px;
	margin: 0 0 10px;
	padding: 5px 5px 10px 5px;
	width: 460px;
}

label { /* Generic label element. This is displayed block, as it was used throughout the entire We Are Writers project as display block. SIDENOTE: It may be worth moving the label tag into WaW as display block, and keeping label as display inline with a class of ".block". */
	display: inline;
	font-weight: bold;
    line-height: 150%;
    margin: 0 0 5px;
}

label span { /* Spans inside a label, which can be used for descriptive purposes or to provide extra information, are displayed on a new line. These help provide useful information without detracting from the label. */
	display: block;
	font-size: 12px;
	font-weight: normal;
}

textarea {
	border: 1px solid #999;
	font: 14px/150% Helvetica, Arial, "sans serif";
	height: 150px;
	margin: 0 0 10px;
	padding: 5px;
	width: 448px;
}

textarea.autogrow {
	overflow: hidden;
}

input.submit { /* Input of type submit, targetting through a class instead of :submit. */
	clear: both;
    display: block;
    font-size: 32px;
	margin: 10px 0 10px 10px;
}

input.text { /* Input of type text and class text -- IE's benefit, as it doesn't support psuedoclasses. */
	border: 1px solid #999;
	font-size: 14px;
	margin: 0 0 10px;
	padding: 5px;
	width: 448px; /* This number allows for full fieldset width, 448 + 2 (border) + 10 (padding) = 460px. */
}

input:disabled { /* Disabled classes for input buttons. */
	opacity: 0.5;	
}

form.eight-columns fieldset { /* Styles for an eight-column width fieldset. This fieldset will fill the entire area of an eight-column form. */
	width: 620px;
}

form.eight-columns textarea { /* Eight-column width textarea. This width will allow the textarea of an eight-column form to fill the entire area, minus space for pre-defined 5px padding (inherited from textarea definition). */
	width: 618px; /* 618 + 2 + 10 = 620 */	
}

fieldset fieldset { /* A fieldset within a fieldset has no extra padding or margin (other than a top margin), and does not have a colour background. The goal here is to make sure that a fieldset within a fieldset displays as if it wasn't really there (bar the top margin, for vertical spacing). */
	background: transparent;
	clear: both;
	float: left;
	padding: 0;
	margin: 10px 0 0 0;
}

.date-selection { /* This is a div wrapping option/select tags, such that we can get float the contents and have them clear. .date-selection allows you to have 3 select elements with their respective labels appear to be inline -- the labels will be on the same line and the inputs on the same line. This allows for a nicer date chooser, where day/month/year make more sense when displayed next to each other. */
	clear: both;
	display: block;
	height: 100%;
	margin: 0 0 10px;
	overflow: auto;
	width: 100%;
}

.date-selection div { /* The option/select tags are wrapped in div tags and floated left, such that their label appears above the drop-down list and inline with the other labels inside .date-selection */
	display: block;
	float: left;
	margin: 0 10px 0 0;
	width: auto;
}

.date-selection label { /* Generic labels have some form of margin, but since we already have that from the wrapper divs, we don't want any additional margin. */
	margin: 0;	
}

.form-error { /* A wrapper div for a form element with an error. This is generated around each label and input that has an error. It will also have a paragraph tag to explain what the error is. This pargraph element has a class of ".generated-error". */
    background-color: #E598C1;
    clear: both;
    float: left;
    margin: 10px 0 0 0;
    padding: 10px;
	width: 440px;
}

.generated-error { /* This is the class given to any paragraph tag that contains an error description for the .form-error div. This is styled specifically, just incase .form-error contains a paragraph tag that does not contain the error information. */
	color: #990000;
	font-size: 12px;
	font-weight: bold;
	margin: 0;
	text-transform: uppercase;    
}

.form-error input.text { /* Smaller width to accomodate for the extra padding of .form-error wrapper. */
	width: 428px;
}

.eight-columns .form-error {
    background-color: #E598C1;
    clear: both;
    margin: 10px 0 0 0;
    padding: 10px;
	width: 600px;
}

.eight-columns .form-error textarea, .eight-columns .form-error input.text {
	width: 588px;	
}

.block-labels label { /* Useful form class to get the labels to display block rather than inline. */
	display: block;	
}

.block-labels label.inline { /* Allows us to specify inline labels where in a block-label form. Useful for checkboxes and so forth. */
	display: inline	
}