/* -- Basic styles --*/

* {
    margin: 0;
    padding: 0;
}

body {
    background: #2A3843 url('http://email.thegrove.co.uk/aem/clients/GRV001/images/pages/forms/the_grove_bg.jpg');
    font: 76% Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #5F5F61;
}

h1  {
	font:2em 'Times New Roman', serif;
	color:#541D54;
	margin-bottom:16px;
}

h2 {
    font:1.2em normal Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #484848;
	background:#A6A6A7;
	padding: 12px 27px;
	text-transform:uppercase;
}

p {
	margin-bottom:16px;
	font-size:1.15em;
	line-height:1.4;
}

a {
	color:#77787A;
	text-decoration:underline;
}

a:hover, a:active, a:focus {
	color:#333;
	text-decoration:none;
}

/* -- Layout --*/

#wrapper {
    width: 750px;
    margin: 20px auto;
    background:#fff url('http://email.thegrove.co.uk/aem/clients/GRV001/images/pages/forms/header-grey.png') 0 10px no-repeat;
    padding: 100px 10px 10px;
	overflow:auto;
	position:relative;
}

#form-container {
	float:left;
	width:480px;
}

#form-container.tall {
	min-height: 172px; 
	background-color: #ddd;
}

#sidebar {
	float:left;
	width:260px;
	margin-right:10px;
}

#unsub #form-container {
	width:290px;
}

#unsub #sidebar {
	width:450px;
}

#unsub .fieldset label {
	width:60px;
}

#unsub .fieldset input {
	width:160px;
}

.fieldset {
    margin-bottom:1em;
    padding: 12px 27px;
	background:#ddd;
	overflow:auto;
}

.fieldset>div, .checkboxes>div {
    margin-bottom:10px;
    display: block;
    padding: 0;
}

.fieldset>div:last-child, .checkboxes>div:last-child {
	margin-bottom:0;
}

form label {
    float: left;
    width: 120px;
	position:relative;
	*position:static;
}

form input, form textarea {
    width: 195px;
    border: 1px solid #5C5C5C;
    padding: 1px;
}

form label.longer {
	width:auto;
	font-size:0.9em;
}

form .checkboxes input {
	width:auto;
	border:0;
	padding:0;
}
/* Checkbox has an ID to allow javascript show/hide (needs a unique hook) */
input#preferenceCheck, div#preferenceCheck input {
	display:inline;
	width:auto;
	border:0;
	padding:0;
	margin-left:3px;
}  

.fieldset .checkboxes {
	float:left;
	margin:0 40px 0 0;
}

.fieldset .checkboxes:last-child {
	margin-right:0;
}

.fieldset .checkboxes:last-child label {
	width: 130px;
}

#fm-submit {
    clear: both;
    border-top: 1px solid #ccc;
}

#fm-submit input {
	float:right;
    margin-top:10px;
    border: 1px solid #333;
    background: #5C5C5C;
    color: #fff;
    font-size: 1.2em;
	text-transform:uppercase;
    padding: 2px 1em;
	width:120px;
    cursor: pointer;
}

#fm-submit input:hover, #fm-submit input:active, #fm-submit input:focus {
    background: #3F3F3F;
}

input:focus, textarea:focus, input:active, textarea:active {
    background: #efefef;
}

.fieldset div.fm-req label span, span#mandatory {
    background:transparent url('http://email.thegrove.co.uk/aem/clients/GRV001/images/pages/forms/mandatory.png') right top no-repeat;
}

span#mandatory {
	background-position:left top;
	display:block;
	padding-left:5px;
	margin-bottom:10px;
}

#preferences {
	overflow:hidden;
}

#privacy{float:left;margin-top:10px;}

