/**
Client:			The Shutter Shop
Date:				181207
**/


/** RESET CODE **/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}

/** **/

/** CLEAR AND FLOATS **/

.clear {
	clear:both;
}
	 
.clearfix:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}

.clearfix {
	display:inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height:1%;
}
.clearfix {
	display:block;
}
/* End hide from IE-mac */	 
	 
.right {
	float:right;
}

.left {
	float:left;
}

/** **/

/** STRUCTURE **/

body {
	margin:0;
	font-family: georgia, helvetica, "Times New Roman", Times, serif;
	color:#000000;
}

.head, .prime, .container, .foot {
	clear:both;
	margin:0 auto;	
}

* html body { /* make ie5.5 behave itself and center the layout */
	text-align:center;
}

* html .head, * html .prime, * html .container, * html .foot { /* for ie5.5 / 6.0 - realign the text */
	text-align:left;
}

* html .container { height:300px; }

.head, .prime, .container, .foot {
	width:967px;
}

.container {	
	border-width:1px;
	border-color: #686868;
	border-style: none solid none solid;
	background:transparent url(/images/containerbg.gif) repeat-y top left;
	min-height:600px;
	height:auto !important;
	height:600px;
}

body#quick_quote .container,
body#order_online .container {
	background: none;
}

.head {
	border-width:1px;
	border-color: #686868;
	border-style: none solid none solid;
	position:relative;
}

.slogan {
	position:absolute;
	top:0;
	right:0;
}

.prime {
	border-width:1px;
	border-color: #686868 #686868 #686868 #000000;
	border-style: none solid none solid;
	background: transparent url(/images/primebg.gif) repeat-y top left;
}

.content_one {
	margin:3px 0 0 0;
	padding:0 0 0 14px;
	width:242px;
	float:right;
	display:inline;	
	min-height:600px;
	height:auto !important;
	height:600px;
}

.spacer { /* fixes collapse of empty div in firefox */
	white-space: pre;
}

.content_two {
	margin:0 0 0 0;
	padding:0 0 0 34px;
	width:664px;
	float:left;
	display:inline;		
}

.foot {
	border-width:1px;
	border-color: #999999 #686868 #686868 #686868;
	border-style: solid solid solid solid;
	height:2em;
}

/** **/

/** PRIMARY NAVIGATION **/

ul.primarynav {
	margin:0 0 0 24px;
	list-style: none;
}

ul.primarynav li {
	float:left;
	line-height:1.6em;
	margin:0;
	list-style: none;
}

ul.primarynav li a {
	margin:0 8px;
	font-size:1em;
	display:block;		
	color:#ffffff;
	border-bottom:2px solid transparent;
	text-decoration:none;
}

ul.primarynav li a:hover {
	text-decoration:none;
	color:#99CC00;
	border-bottom:2px solid #99CC00;
}

ul.primarynav li a.activelink {
	border-bottom:2px solid #ffffff;
}

.prime .right {
	line-height:2em;
}

/** **/

/** SECONDARY NAVIGATION **/

ul.secondarynav {
	margin:0px 0 10px 0;
	border-top:11px #000 solid;	
	background-color:#fff;
	list-style: none;
}

ul.secondarynav ul {
	border-top:none;
	margin:0;
	list-style: none;
}


ul.secondarynav li {
	font-size:0.9em;
	line-height:2em;
	margin:0;
	list-style: none;
}

ul.secondarynav li li {
	font-size:0.9em;
	line-height:1.5em;
	margin:0;
	list-style: none;
}

ul.secondarynav li a {
	display:block;
	color:#000000;
	border-bottom:1px solid #000000;	
	text-decoration:none;
}

ul.secondarynav li li a {
	color:#999999;
	border-bottom:1px solid #999999;
}

ul.secondarynav li a:hover {
	text-decoration:none;
	color:#99CC00;
	border-color:#99CC00;
}

ul.secondarynav li a.activelink {
	color:#99CC00;
	border-color:#99CC00;
}

/** **/

/** FOOT NAVIGATION **/

.foot ul {
	margin:0;
	padding:0;
	float:right;
	padding:0 250px 0 0;
	list-style: none;
}

.foot ul li {
	float:left;
	display:inline;
	line-height:2em;
	list-style: none;
	margin:0;
}

.foot ul li a {
	padding:0 10px;
	font-size:0.75em;
	display:block;
	float:left;
	color:#000;
	text-decoration:none;
}

.foot ul li a:hover {
	text-decoration:underline;
}

.foot ul li a.activelink {
	text-decoration:underline;
}

.foot .left {
	float:left;
	margin:0;
	padding-left:34px;
	font-size:0.7em;
	color:#000;
	line-height:2.7em;
}

/** **/

/** GENERIC STYLES **/

h1,h2,h3,p {
	margin: 0.6em 0;
}

h1 {
	font-size:1.75em;
	color:#666666;
	font-weight:normal;
}

h2 {
	font-size:1.1em;
	color:#000000;
	font-weight:normal;
	border-bottom:1px solid #000000;
	margin-bottom:0;
	padding:0 0 0.2em 0;
}

p, ul, ol {
	color:#666666;
	font-size:0.9em;
	line-height:1.4em;
	margin:1em 0;
}

ul {
	list-style:disc;
	margin-left:16px;
}

ol {
	list-style:decimal;
	margin-left:16px;
}

a {
	color:#99CC00;
}

br {
	height:0em;
	font-size:0em;
	line-height:0em;
}

/* notes */

.note_info {
	background-color: #ffffff;
	border: 1px solid #cacbcc;
	padding:3px;
	clear:both;
	text-align:center;
	margin-left:210px;
	color:#666666;
	font-size:0.7em;
	width:300px;
}

.note_warning {
	background-color: #ffdbe0;
	border: 1px solid #cacbcc;
	color: red;
	font-weight: bold;
	padding: 4px;
	text-align:center;	
}

.note_warning p {
	line-height: 1.0em;
}

/* */

/* Caption images */

.caption_image {
	padding:0;
	margin:0;
}

.caption_image img {
	border-width:1px;
	border-color:#000000;
	border-style:none solid solid solid;
}

.caption_image p {
	padding:0;
	margin:0;
	font-size:0.7em;
	line-height:1.5em;
}

.caption_image.left {
	margin:0 1em 1em 0;
}

.caption_image.right {
	margin:0 0 1em 1em;
}

.content_one .caption_image.left, .content_one .caption_image.right {
	float:none;
	margin:10px 0;
}

.content_one .caption_image img {
	border-style:solid;
}

.caption_image.left.large, .caption_image.right.large {
	border:none;
}

/* */

/** **/

/** STYLES AND STRUCTURE FOR SPECIFIC AREAS / SECTIONS **/

.prime .right {
	margin:0;
	padding-left: 1.5em;
}

.content_two ul {
	list-style: disc;
	margin:0.5em 2em;
}

/* Home */

body#home .container {
	background:transparent url(/images/containerbghome.gif) repeat-y;
}

body#home .content_two {
	float:right;
	padding:0;
	margin:0;
	width:966px;
}

body#home .content_two .clear {
	clear:none;
}

body#home .caption_image img {
	border:none;
}

body#home .caption_image {
	padding:0;
	margin:0;
	width:172px;
}

.section_1 {
	display:inline;		
	padding:0 20px 0 34px;
	float:left;
	width:225px;
}

.section_2, .section_3, .section_4 {
	float:left;
	width:213px;
	margin:0 9px 0 0;
	padding:0;
	border-top:11px solid #000000;
	
}

.section_2 {
	padding:0 18px 0 18px;
}

.section_3 {
	width:210px;
	border-color:#666666;
	padding:0;
}

.section_4 {
	width:192px;
	margin:0;
	border-color:#999999;
	padding:0 18px 0 0;
}

.section_2 h1, .section_3 h1, .section_4 h1 {
	font-size:1.1em;
	color:#000000;
	font-weight:normal;
	border-bottom:1px solid #000000;
	margin-bottom:0;
	padding:0 0 0.5em 0;
}

.section_2 h1 {
	margin-left: -18px;
	margin-right:-18px;
	padding-left:18px;
}

.section_3 h1, .section_4 h1 {
	margin-right:-18px;
}

.section_4 h2 {
	font-size:1em;
	color:#666666;
	border-bottom:1px solid #000000;
	font-weight:normal;
	margin-bottom:0;
	margin-top:1em;
	padding-bottom:0.2em;
	margin-right:-18px;
}

.section_2 p, .section_3 p, .section_4 p {
	margin-top:0;
}

.section_2 h3, .section_3 h3, .section_4 h3 {
	font-size:0.9em;
	color:#000000;
	font-weight:normal;
	margin-bottom:0.2em;
	border:none;
}

/* */

/* Portfolio section */

body#gallery .container {
	background:none;
}

body#gallery .content_two {
	width:933px;
}

body#gallery .content_two .images {
	margin-top:30px;
}

body#gallery .caption_image {
	padding:0;
	margin:0;
	width:209px;
	margin:0 14px 14px 0;
}

body#gallery .categories .caption_image.left {
	margin:0 20px 0 0;
}

body#gallery .caption_image.large {
	width:660px;
}

body#gallery .caption_image img {
	border-width:1px;
	border-color:#000000;
	border-style:solid solid solid solid;
}

body#gallery .caption_image.left {
	margin:0 0.5em 0 0;
}

body#gallery .caption_image.right {
	margin:0 0 0 0.5em;

}

.caption_image.left.large, .caption_image.right.large {
	border:none;
}

body#gallery .content_two .images .caption_image img, body#gallery .content_two .images .caption_image {
	width:105px;
	
}

body#gallery .content_two .images .caption_image {
	min-height:10em;
	height:auto !important;
	height:10em;	
	margin:0 0.6em 0 0;
}
	
body#gallery .content_two .images .caption_image p {
	font-size: 0.7em;
	border-bottom:1px solid #000;
}

body#gallery .caption_image img {
	margin:0;
	padding:0;
}

body#gallery .caption_image {
	min-height:16.5em;
	height:auto !important;
	height:16.5em;	
}

body#gallery div.scroll {
	padding:0 20px 0 0;
	width:230px;
	float:right;
}

body#gallery div.scroll h1 {
	margin:0;
}

/* */

/* News Section */

body#news .content_one {
	background:transparent url(/images/content_one_bg_news.jpg) right bottom no-repeat;
}

a.newslink {
	font-size:0.8em;
	display:block;
	margin:1em 0;
}

/* */

/* Products Section */

.content_one.products {
	background:transparent url(/images/content_one_bg_products.jpg) right bottom no-repeat;
}

/* */

/** Quotes and Online Styles **/

body#quick_quote .container {
	background:#ffffff url(/images/content_one_bg_quick_quote.jpg) right top no-repeat;
}

body#quick_quote .section_1 {
	padding:0;
}

#windows {
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.8em;
}

.relative {

	border:none;
}

.help.relative {
	border: 1px solid #cccccc;
}

/* div areas */

.window {
	width:50.97em;
	margin:1em 0 0 0;
	border-width:1px 1px 1px 1px;
	border-color:#fff;
	border-style:solid;
	background-color:#dfdfdf;
}

.window.total {
 border-top: 2px solid black;
}

.window_details {
	width:49.97em;
	margin:0 0.5em;
	border-width:1px;
	border-color:#ccc;
	border-style:none solid solid solid;
	background-color:#ffffff;
	min-height:8.6em;
  height:auto !important;
  height:8.6em;	
}

.window_errors {
	width:49.97em;
	margin:0 0.5em;
	border-width:1px 1px 1px 1px;
	border-color:#ee1c24;
	border-style:solid solid solid solid;
	background-color:#ffffff;
}

.window_confirm table {
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.8em;
	width: 50.97em;
	margin:0;
}

.window_confirm th.main_heading {
	background: #000000;
	color: #ffffff;
	padding-left:1em;
	line-height:2.0em;
}

.window_confirm tr {
	border-bottom: 1px solid #dfdfdf;
}

.window_confirm tr.total,
.window_confirm tr.empty,
.window_confirm tr.empty td {
	border: 0;
	line-height:2.0em;
}

.window_confirm th {
	font-weight:bold;
	padding-left:1em;
	border-left: 1px solid black;
	border-right: 1px solid black;
}

.window_confirm td {
	padding-left: 1em;
	border-left: 1px solid black;
	border-right: 1px solid black;
}

.window_confirm tr.total th,
.window_confirm tr.total td {
	background: #dfdfdf;
	color: #000000;
	padding-left:1em;
	border-right: 1px solid black;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

.window_confirm tr.total td.first_empty {
	border:0;
	border-top: 1px solid black;
	background:none;
}

.window_confirm tr.total td.empty {
	border:0;
	background:none;
}

.window_confirm tr.total td {
	text-align: right;
	padding-right:1em;
}

.minmaxbox {
	margin:0;
}

.wbox1, .wbox2, .wbox3 {
	min-height:4.5em;
  height:auto !important;
  height:4.5em;	
}

.wbox1 {
	width:18.8em;
	padding:0 0.5em 0 2em;
	margin:0;
	float:left;
	border-right:7px solid #ccc;
	position:relative;
}

.wbox2 {
	width:15em;
	padding:0 0.5em;
	margin:0;
	float:left;
	border-right:7px solid #ccc;
}

.wbox3 {
	width:11.3em;
	padding:0 0.5em;
	margin:0;
	float:left;
}

.window.total .wbox1,
.window.total .wbox2,
.window.total .wbox3 {
	min-height:5.5em;
  height:auto !important;
  height:5.5em;	
}

.window.charges .wbox1,
.window.charges .wbox2,
.window.charges .wbox3 {
	min-height:3.5em;
  height:auto !important;
  height:3.5em;	
}

.window.strapline {
	background-color:#4269DE;
}

.window.strapline p {
	color:white;
	text-align:center;
	font-weight:bold;
}

.window_options {
	margin-top:0.8em;
}

.window_finishes {
	margin:0.8em 0.8em;
}

#window_help {
	position:absolute;
	right:10%;
	top:50%;
}

.help {
	width:299px;
	padding: 0;
	margin: 0;
	position: fixed;
	right: 2em;
	top:110px;
	z-index: 200;
}

.help_header {
	background: transparent url(/images/bg-help-header.png) top left no-repeat;
	height:25px;
}

* html .help_header {
	background: transparent url(/images/bg-help-header.gif) top left no-repeat;
}

.help_content {
	background: transparent url(/images/bg-help.png) top left repeat-y;
	overflow:auto;
	max-height:20em;
	min-height:20em;
	height:auto !important;
	height:20em;
	font-size:0.8em;
}

* html .help_content {
	background: transparent url(/images/bg-help.gif) top left repeat-y;
}

#window_help {
	border:none;
}
.help .admin {
	background: transparent url(/images/bg-help.png) top left repeat-y;
	overflow:auto;
	max-height:2em;
	min-height:2em;
	height:auto !important;
	height:2em;
	padding-left: 1em;
	padding-top: 1em;
}

.help_footer {
	background: transparent url(/images/bg-help-footer.png) bottom left no-repeat;
	height:20px;
}

* html .help_footer {
	background: transparent url(/images/bg-help-footer.gif) bottom left no-repeat;
}


/* */

/* buttons */

.submit_button {
	color:#010101;
	background:#ffffff url(/images/submit_bg.gif) repeat-x bottom left;
	border:1px solid #737373;
}

#windows .submit_button.right { /* used for the help close button */
	color:#41CF11;
	position:absolute;
	right:0.1em;
	top:0.1em;
	width:1.5em;
}

#windows input.min_max {
	color:#41CF11;
	width:1.5em;
	height:1.5em;
	float:left;
	position:absolute;
	top:-0.2em;
	left:0.1em;
	font-weight:bold;
	line-height:1em;
}

.duplicate_window {
	margin: 0 0.3em 0 0;
	width:8.9em;
}

.delete_window {
	margin: 0;
	width:7.7em;
}

.add_window {
	margin: 0;
	width:6.7em;
}

.recalculate_window {
	margin: 0;
	width:6.3em;
}

#windows .order_now {
	margin: 0.6em -0.3em 0 0;
	width:10.0em;
	display:inline;
	height:1.5em;
	float:right;
	display:block;
}

.help_header .submit_button {
	width:20px;
	cursor:pointer;
	position:absolute;
	top:0;
	right:0;
	width:20px;
}

* html .help_header .submit_button {
	position:fixed;
}


/* */

/* labels */

#windows .window_details label, .wbox1 label {
	margin:0.5em 0.5em 0 0;
	padding:0;
	float:left;
	width:12.0em;
	font-weight:normal;
	display:inline;
}

.wbox1 label {
	width:6em;
}

.wbox1 p {
	text-align:right;
}

#windows .window_finishes label {
	width: 11.0em;
}

.window_finishes div p {
	text-align:center;
	font-size:0.8em;
	height:6.5em;
	width:8.7em;
	color: #000000;
	font-weight:bold;
	cursor:pointer;
	margin:0.25em 0.5em;
	padding:1em 0.25em;
}

.window_finishes div {
	float:left;
	margin:0.25em;
	padding:0.25em;
	border: 2px solid #FFFFFF;
}

.window_finishes div {
	color: #FFFFFF;
}

.window_finishes div p.dark {
	color:#FFFFFF;
}

.window_finishes div.active {
	border:2px solid #000000;
}

.window_finishes div.colour_note {
	border:none;
	width:68.0em;
	font-size:0.7em;
	text-align:center;
	color:#666666;
}


/* */

/* input fields */

#windows input {
	font-size:1em;
	margin:0.3em 0.3em 0 0;
}

#windows select {
	font-size:1em;
	margin:0.3em 0.3em 0 0;
}

.input_text, .input_textarea {
	padding:0 0 0.1em 0.5em;
	background-color: #fff;
	color:#000;
	border:1px solid #b2b2b2;
}

.input_textarea {
	font-size:1em;
	font-family: Arial, Helvetica, sans-serif;
	width:29.7em;
}

select.input_text {
	padding:0 0 0.1em 0.2em;
}

.window_name_input {
	margin:0 0.5em 0 0;
	background-color: #fff;
	color:#000;
	border:1px solid #b2b2b2;
	display:inline;
	width:9.7em;	
}
	
.details_select {
	width:15.7em;
	margin:0 0.5em 0 0;
	background-color: #fff;
	color:#000;
	border:1px solid #b2b2b2;
	display:inline;
}

.details_input {
	width:4.0em;
	padding-right:1.1em;
	text-align:right;
}

.window_configuration .details_select {
	width:15.7em;
}

.window_configuration .details_input {
	width:4.0em;
	margin-right:0.55em;
}


/* */

/* text styles */

.window p {
	margin:0.2em 0 0 0;
	padding:0;
	color:#000;
	font-size:1em;
}

.window p.installed, .window p.selffit {
	display:inline;
	float:left;
}

.window p.installed_price, .window p.selffit_price {
	display:inline;
	float:right;
	margin-top: 0.4em;
}

.wbox2 p, .wbox1 p,
.wbox3 p, .wbox1 p {
	font-weight:bold;
}

.wbox1 p {
	margin:0.4em 0 0.6em 0;
}

.quote_info {
	display:inline;
	border:1px solid #999999;
	padding:0.1em 0.6em;
	margin:0 0 0 1.3em;
	color:#999999;
	font-size:0.8em;
}

div.window_errors p {
	margin:0;
	padding:0;
	background-color:#fff;
	color:#ee1c24;
	font-weight:bold;
	padding:0.3em 1.5em;
	font-size:0.85em;
}

span.help_link {
	font-family: serif;
	background-color:#4269DE;
	color:#FFFFFF;
	padding-left: 0.4em;
	padding-right:0.4em;
	padding-bottom:0.1em;
	padding-top:0.1em;
	text-decoration:none;
	font-weight:bold;
	cursor: pointer;
}

.help h1 {
	color:#00cc33;
	margin:0;
	font-size:1em;
	padding:5px 10px 5px 10px;
}

.help p {
	margin:5px 10px 10px 10px;
	background:#fff;
}

.window_options h2 {
	color:#ffffff;
	font-size:11px;	
	height:1.4em;
	padding:0.1em 0 0.1em 3em;
	font-weight:bold;
	border-width:1px;
	border-color:#999999;
	border-style:solid none solid none;
	background-color:#313131;
	margin:0;
}

/** **/

/** ADMIN **/

.admin a {
	color:#cc0000;
	text-decoration:none;
	background:#ddd;
	padding:0.4em;
	border:1px #fff solid;
	line-height: 2em;
	font-weight:bold;
	display: inline;
	font-size:0.6em;
}

.content_one li div.admin a {
	color:#cc0000;
}

.admin a:hover {
	background:#ccc;
}

.caption_image .admin {
	text-align: left;
	position:absolute;
	font-size:1em;
	margin:2px 0 0 2px;
}

.caption_image .admin a {
	margin:0 2px 0 0;
}

.secondarynav div.admin {
	margin:0;
	margin-right:4px;
	text-align:right;
	font-size:1.6em;
}

/** **/

/** FORMS **/

#contact form,
#survey_contact_details form,
#order_contact_details form,
#request_catalogue form {
	font-family: georgia, helvetica, "Times New Roman", Times, serif;
	font-size:0.8em;
}

#contact .note_info,
#survey_contact_details .note_info,
#order_contact_details .note_info,
#request_catalogue .note_info {
	font-size:0.9em;
}

form label {
	width:200px;
	display:block;
	float:left;
	text-align:right;
	padding-top:0.3em;
	padding-right:10px;
	font-weight:bold;
}

fieldset fieldset {
	border: 1px #cacbcc solid;
	padding: 10px;
	margin:0 0 10px 0;
}

fieldset fieldset legend {
	font-weight: bold;
	color:#666666;
}

form div, form .note_info, form .note_warning {
	margin:0.4em 0;
}

form .note_info, form .note_warning, form .buttons, form .note_plain {
	margin-left:210px;
	text-align:left;	
} 	

abbr {
	color:#cc0000;
}
