/************************************************************
	Author: 	Alex Holsgrove
	E-Mail: 	alex.holsgrove@soup.co.uk
	Date:   	7th November 2007
	Client:		Fujifilm B2B
	
	Notes:  	Structure Stylesheet - contains styles for
				page layout and structure such as margins,
				padding, and positioning
************************************************************/


/* -------------------- CORE ELEMENT STYLES -------------------- */

* {
	margin:							0;
	padding:						0;
}

body {
	font-family:					Verdana, Arial, Helvetica, sans-serif;
	font-size:						68.8%;	/* 11pt */
}

p {
	margin-bottom:					10px;
}

h1, h2, h3, h4, h5 {
	margin-bottom:					10px;
}


/* -------------------- STRUCTURAL COMPONENTS -------------------- */

#framework {
	width:							950px;
}

#structure {
	width:							740px;
	float:							right;
	padding-top:					11px;
}

#content {
	width:							570px;
	float:							left;
	overflow:						hidden ;
}

#content.shop {
	width:							740px;
}
			
#callout_column {
	width:							162px;
	float:							right;
	margin-right:					3px;
	z-index:						-1;	
}


/* -------------------- HEADER STYLES -------------------- */
#header #title {
	margin:							0px -3px 17px;
	width:							400px;
	float:							left;	
}
#header #title span{
	font-family:					Arial, Helvetica, sans-serif ;	
	font-size: 						110% ;
	padding-left: 4px ;
}
#header h1 {
	float:							left;
	margin:							15px 0px 0px 23px;
}

#header span {
	float:							left;
	margin:							24px 0px 0px 11px;
}

#header #search {
	float:							right;
	left:							-20px;
	margin-top:						5px;
	position:						relative;
	width:							300px;
}

#header #search .submit {
	width:							4em;
}	

#header #top_links {
	float:							right;
	position:						relative;
	margin-bottom:					5px;	
}

#header #top_links li {
	float:							left;
	padding:						0px 5px;
}

#header #top_links li a {
	margin-left:					5px;
}

#header form {
	float:							right;
	position:						relative;
}

#header #top_nav{
	padding-left:					18px;
	border-bottom:					6px solid #d9d9d9;
	clear:							both;
}
#header #top_nav.top_nav_no_border{
	border-bottom:					0 ;
}
#header #top_nav_sub {
	padding-left:					14px;
	clear:							both;
}

#header #top_nav li {
	padding:						5px 12px 5px 13px;
	float:							left;
}
#header #top_nav li a { font-family:Arial, Helvetica, sans-serif ; font-size: 110% ; }
#header #top_nav_sub li {
	padding:						5px 7px 6px 9px;	
	float:							left;
}


/* -------------------- BREADCRUMBS -------------------- */

#breadcrumbs {
	width:							950px;
	margin:							8px 0px 12px 22px;
}

#breadcrumbs li {
	padding:						0px 4px 0px 5px;
	float:							left;
}


/* -------------------- LOGIN BARS -------------------- */

#login_bar {
	height:							28px;
	padding:						7px 0px 0px 17px;
	margin:							0px 0px 10px;	
}

#login_bar label {
	margin-left:					10px;
}

#login_bar input,
#login_bar a {
	margin-left:					5px;
}

#login_bar form * {
	vertical-align:					middle;
}

#login_bar a img {
	margin-bottom:					3px;
}

#login_bar .left {
	margin-top:						2px;
	float:							left;
}

#login_bar .right {
	margin:							3px 10px 0px 0px;
	float:							right;
}


/* -------------------- SEARCH BARS -------------------- */

#search_bar {
	height:							28px;
	padding:						7px 7px 0px 17px
}

#search_bar * {
	vertical-align:					middle;
}

#search_bar .search {
	float:							left;
	width:							300px;
}

#search_bar .search input {
	margin:							1px 0px 0px 10px;
	width:							200px;
}

#search_bar .submit {
	float:							right;
	margin:							3px 10px 0px 0px;
}


/* -------------------- QUICK SHOP BARS -------------------- */

#quick_shop_bar {
	height:							28px;
	margin:							10px 0px 20px;
	padding:						7px 7px 0px 17px
}

#quick_shop_bar * {
	vertical-align:					middle;
}

#quick_shop_bar .left {
	float:							left;
	width:							400px;
}

#quick_shop_bar .left label {
	margin-left:					10px;
}

#quick_shop_bar .left input {
	width:							200px;
}

#quick_shop_bar .right {
	float:							right;
	margin:							0px 10px 0px 0px
}


/* -------------------- HEADINGS -------------------- */

.product_header {
	margin-bottom:					15px;
	padding:						0px 0px 0px 7px;
}

.product_header h2 {
	margin-bottom:					10px;
}

.product_header h2, 
.product_header p {
	float:							left;
	width:							370px;
}

.product_header .product_link {
	clear:							left;
	float:							left;
	margin:							5px 0px 0px 0px;
}

.product_header .product_image {
	float:							right;
	width:							180px;
	text-align:						center;
}

.product_header form {
	float:							right;
	margin-top:						20px;
	width:							180px;
}

.pagination {
	text-align:						right;
	margin:							10px 6px 20px 7px;
}


/* -------------------- FULL WIDTH PANELS -------------------- */

#feature_panel {
	margin:							0px 0px 20px 15px;
	padding-bottom:					10px;
}

#feature_panel li {
	list-style-type:				none;
}

/* Left Navigation */
#feature_panel #feature_nav {
	margin:							10px 0px 0px 10px;
	width:							236px;
	float:							left;
}

#feature_panel #feature_nav ul {
	margin-top:						10px;
}

#feature_panel #feature_nav ul li {
	margin-bottom:					5px;
}



/* Centre Panels */
#feature_panel #feature_panels {
	width:							436px;
	float:							left;
}

#feature_panel #feature_panels li {
	width:							192px;
	min-height:						116px;
	float:							left;
	margin:							10px 0px 0px 10px;
	padding:						10px 0px 10px 16px;
	position:						relative;
}

/******** Structure **********/

#feature_panel.wide #feature_panels {
	width:							689px;
	float:							left;
}

#feature_panel.wide #feature_panels li{
	margin:							10px 0 0 15px;
}
#feature_panel #feature_panels p {
	width:							102px;
}

/* Right Side List */
#feature_panel #feature_list {
	float:							right;
	margin:							10px 10px 0px 0px;
	width:							230px;
}

#feature_panel #feature_list li {
	padding:						7px 10px 0px;
}

#product_panel {
	margin:							15px 0px 20px 15px;
	padding-bottom:					10px;
}

#product_panel .tagline {
	clear:							both;
	float:							left;
	margin-left:					20px;
}

#product_panel ul {
	float:							right;
	margin-top:						-40px;
	padding-bottom:					25px;
	padding-left:					20px;
}

#product_panel ul li {
	display:						inline;
	float:							left;
	width:							220px;
}

#product_panel ul li h3 {
	margin:							10px 0px 5px 0px;
}


/* -------------------- CONTENT BOXES -------------------- */

.content_box {
	margin-bottom:					40px;
}

.content_box.tight {
	margin-bottom:					5px;
}

.heading {
	height:							41px;
	padding:						0px 10px 6px 6px;
	z-index:						0;
}

.heading h2 {
	float:							left;
	padding:						5px 20px 5px 10px;
	position:						relative;
/*	margin-top:						-5px;*/
}

.content_box .heading h2.right {
	float:							right;
}

.content_box hr {
	margin:							5px 0px;
}

.content_box ol,
.content_box ul {
	margin:							5px 0px 20px 20px;
}

.content_box ol li,
.content_box ul li {
	padding:						5px 0px;
}

.shop .content_box ul.addresses {
	margin:							0px 0px 20px 2px;
}

.shop .content_box ul.addresses li {
	list-style-type:				none;
	margin:							0px 0px 5px 0px;
}

.feature_box {
	margin-bottom:					30px;
}

.shop .feature_box {
	padding-bottom:					10px;
}

.feature_box .title {
	background:						#43B4CF; 
	height:							auto;
	padding:						16px 0px 10px 8px;
	z-index:						0;
	margin:							0;
}

.feature_box .title h2 {
	color:							#FFFFFF;
	display:						inline;
	float:							none;
	font-size:						1.2em;
	font-weight:					bold;
	padding:						16px 0px 0px;
	top:							0;
}

.feature_box .content {
	margin:							0px 7px;
	padding:						15px 10px;
	background:						#FFFFFF;
}

.base_link {
	border-top:						8px solid #FFFFFF;
	text-align:						right;
	background:						#999999;

}

.base_link a {
	display:						block;
	height:							11px;
}

.blank_box {
	margin-bottom:					30px;
	margin-left:					18px;
	width:							552px;	
}

.shop .total {
	color:							#FF0000;
	font-size:						1.6em;
	font-weight:					bold;
	margin:							30px 2px 0px 0px;
	text-align:						right;
}


/* -------------------- CONTENT BOX STRUCTURES -------------------- */

.single_column,
.double_column,
.triple_column,
.narrow_wide {
	margin-left:					18px;
	width:							534px;
}

.double_column .left {
	float:							left;
	width:							257px;
}

.double_column .right {
	margin-right:					10px;
	float:							right;
	width:							257px;	
}

.shop .double_column {
	width:							685px;
}

.shop .double_column .left,
.shop .double_column .right {
	width:							330px;
}


.triple_column .left {
	float:							left;
	width:							130px;
}

.triple_column .centre {
	float:							left;
	width:							210px;
	margin-left:					10px;
}

.triple_column .right {
	float:							right;
	width:							170px;
	margin-right:					3px;
}

.narrow_column {
	background:						#FFFFFF;
	margin:							-20px 6px 0px;
	padding:						10px;
	width:							485px;
}

.narrow_column.image img {
	float:							left;
}

.narrow_column.image p {
	float:							right;
	margin-right:					10px;
	width:							300px;
}

.narrow_wide .left {
	float:							left;
	width:							180px;
}

.narrow_wide .right {
	float:							right;
	width:							340px;
}

.shop .feature_box .single_column {
	margin:							0px 5px;
	width:							690px;
}

/* -------------------- FORM STYLES -------------------- */

.content_box .formbuilder div {
	margin-bottom:					10px;
}

.content_box .formbuilder div input {
	float:							left;
	width:							auto;
}

.content_box .formbuilder legend {
	margin:							10px 0px 0px;
}

.content_box .formbuilder ul {
	margin:							0px;
}

.content_box .formbuilder ul li {
	list-style-type:				none;
}

.content_box .formbuilder ul li label,
.content_box .formbuilder ul li input {
	float:							none;
}

.content_box .formbuilder ul li label {
	margin-left:					5px;
}

.content_box .formbuilder p label,
.content_box .formbuilder div label {
	float:							left;
	width:							200px;
}

.content_box .formbuilder ul,
.content_box .formbuilder textarea,
.content_box .formbuilder p input,
.content_box .formbuilder p select {
	float:							left;
}

.content_box .formbuilder ul li label,
.content_box .formbuilder ul li input {
	width:							auto;
}

.content_box .formbuilder .checkboxes input {
	width:							auto;
}

.content_box form p {
	display: 						inline-block;
}

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

/* Hides from IE-mac \*/
* html .content_box form p {
	height: 						1%;
}

.content_box form p {
	display: 						block;
}
/* End hide from IE-mac */

.content_box form label {
	float:							left;
}

.content_box form input,
.content_box form textarea {
	float:							right;
	width:							300px;
}

.content_box form .buttons * {
	text-align:						right;
	width:							auto;
}

.content_box form .buttons .submit {
	float:							right;
	width:							auto;
}

.content_box form .inline_submit {
	float:							none;
	margin-left:					10px;
	width:							auto;	
}


/* -------------------- BUTTON STYLES -------------------- */

.more_button {
	position:						absolute;
	bottom:							10px;
	right:							10px;
}	

.more_button_left {
	position:						absolute;
	bottom:							10px;
	left:							10px;
}

.shop_buttons {
	border-top:						6px solid #999999;	
	margin:							10px 0px 30px;
	padding:						10px 0px 0px;
}

.shop_buttons a {
	float:							left;
}

.shop_buttons input,
.shop_buttons .right {
	float:							right;
}

.feature_box .shop_buttons {
	border:							none;
	margin:							10px 0px 0px;
}

.shop .update_button {
	float:							right;
	margin:							20px 0px 5px;
}

/* -------------------- LIST STYLES -------------------- */

.section_list {
	position:						relative;
}

.section_list li {
	list-style-type:				none;
	float:							left;
	width:							160px;
	margin-left:					18px;
	padding-bottom:					15px;
}

.section_list h3,
.section_list p,
.section_list a {
	margin-left:					15px;
}

.section_list h3 {
	min-height:						30px;
}

.section_list a {
	position:						relative;
	bottom:							0px;
}

.category_list li {
	list-style-type:				none;
	float:							left;
	width:							130px;
	margin:							0px 6px 30px 0px;
}

/* -------------------- TABLES -------------------- */

table {
	width:							100%;
	border-collapse:				collapse;
	font-size:						0.9em;
	margin:							10px 0px 0px;	
}

table thead tr th {
	background:						#999999 none repeat scroll 0%;
	border-bottom:					1px solid #FFFFFF;
	border-left:					1px solid #FFFFFF;
	border-right:					1px solid #FFFFFF;
	color:							#FFFFFF;
	padding:						0.4em;	
	text-align:						left;
}

table tr td {
	border-right:					1px dotted #CCCCCC;
	padding:						0.4em 0.4em 0.4em 1em;
}

table tr.odd td {
	background:						#F0F0F0;
}

.data_table th {
	background:						#999999 none repeat scroll 0%;
	border-right:					1px solid #FFFFFF;
	color:							#FFFFFF;
}

.data_table td {
	border-right:					1px solid #FFFFFF;
	padding:						3px 0px;
	width:							33%;
}

.compatibility_table td {
	border-top:						1px solid #CCCCCC;
}

.compatibility_table .comp_left {
	padding:						10px 30px 10px 0px;
	width:							340px;
}

.staff_list tr {
	margin:							0px;
}

.staff_list tr td {
	border-bottom:					1px solid #EDEDED;
}

.shop table thead tr th {
	text-align:						center;
}

.shop table tr td {
	border-right:					1px dotted #CCCCCC;
	padding:						0;
	text-align:						center;
}

.shop table tr td.left_align {
	text-align:						left;
	padding-left:					5px;
}

.shop table input {
	font-size:						0.9em;
	margin:							0.1em 0px;
}

.formbuilder table td .submit{ width: auto ; }
.formbuilder table td { border-right: 0 ; }
/* -------------------- PROFILING GALLERY -------------------- */

#gallery_swap {
	display:						block;
	margin:							0px auto;
}

#gallery_comparison li div {
	float:							left;
	padding-left:					14px;
	width:							120px;
}

#gallery_comparison li {
	float:							left;
	list-style-type:				none;
}


/* -------------------- CALLOUTS -------------------- */

.callout {
	z-index:						10;
}

#home_callout_column .widget,
#left_column .widget,
#callout_column .widget {
	border-top:						1px solid #EDEDED;
	border-left:					1px solid #EDEDED;
	margin:							0px 2px 15px;
	overflow:						hidden;
	padding:						1px 2px 2px 1px;
	position:						relative;
	width:							158px;	
}

#col_2 .widget {
	/*border-top:						1px solid #EDEDED;
	border-left:					1px solid #EDEDED;*/
	margin:							0px 2px 15px;
	overflow:						hidden;
	padding:						1px 2px 2px 1px;
	position:						relative;
	width:							218px;	
}
#left_column .widget {
	margin:							0px 2px 15px 26px;
}

#content .widget {
	width:							534px;
}

.widget {
	width:							740px;
}

.banner .widget {
	margin:							0px;
	width:							488px
}

.banner {
	padding:						1px;
	width:							488px;
	margin:							0px auto;
}

.content_box .banner {
	margin-top:						-20px;
}

#col_1 {
	float:							left;
	margin:							5px 0px 0px 15px;
	width:							519px;
}

#col_1 h3 {
	position:						relative;
	top:							-5px;	
}

#col_1 .content {
	background:						#FFFFFF url("/media/site/images/backgrounds/bg_content_box_heading.png") right top no-repeat;
	padding-top:					12px;
}

#col_2 {
	background:						#FFFFFF url("/media/site/images/backgrounds/bg_gradient_tall.png") top repeat-x;
	float:							left;
	margin:							5px 5px 0px;
	padding:						0px 6px 10px;
	width:							218px;
}

/*#col_2 h3 {	
	font-size:						1.1em;
	font-weight:					bold;
	margin-bottom:					0px;
	position:						relative;
	top:							-5px;
}

#col_2 div {
	background:						#FFFFFF;
}*/

#col_2 strong {
	display:						block;
	padding:						17px 83px 5px 12px;
}

#col_2 .service_and_support strong {
	display:						block;
	padding:						17px 23px 5px 12px;
}

#col_2 .service_and_support {
	background:						#FFFFFF;
}

#col_2 .service_and_support ul {
	background:						#FFFFFF url("/media/site/images/backgrounds/bg_gradient_service_and_support.png") bottom left repeat-x;
	color:							#CC0000;	
	margin-top:						10px;
	padding:						0px 12px 10px;	
}

#col_2 .instore_kiosk {
	background:						#FFFFFF url("/media/site/images/backgrounds/bg_panel_instore_kiosk.gif") bottom right no-repeat;
	min-height:						200px;
}

#col_2 .instore_kiosk img {
	margin:							10px;
}

#col_2 .instore_kiosk ul {
	padding:						10px 90px 10px 10px;
}

#col_2 ul li {
	list-style-type:				none;
	padding:						0px 0px 5px 0px;
}

#col_2 ul li a {	
	color:							#000000;
	padding-left:					3px;
	font-size:						0.82em;
}

#home_callout_column {
	background:						#FFFFFF url("/media/site/images/backgrounds/bg_gradient_short.png") top repeat-x;
	float:							left;
	margin:							5px 0px 0px;
	padding:						10px 6px;
	width:							162px;
}

.listbox h4 {
	margin-right:					1px;
	padding:						5px 20px 5px 10px;
}

.listbox p {
	margin:							0px 5px 5px;
}

.listbox ul {
	margin:							0px 5px 10px;
}

.listbox li {
	margin:							3px 0px;
}


/* -------------------- SITEMAP -------------------- */

.sitemap ul {
	margin-left:					20px;
}

.sitemap li {
	margin:							3px 0px;
}

.sitemap a {
	color:							#42B4CF;
}

/* -------------------- FOOTER STYLES -------------------- */

#footer {
	position:						relative;
	clear:							both;
}

#footer p {
	margin-bottom:					-16px;
	padding:						10px 0px 28px 19px;
}

#footer ul {
	float:							right;
	position:						relative;
	bottom:							23px;
	left:							-10px;
}

#footer ul li {
	list-style-type:				none;
	float:							left;
	padding:						0px 14px 0px 6px;
}


/* -------------------- SPECIAL ELEMENTS -------------------- */

.dropshadow {
	position:						absolute;
	bottom:							0px;	
	right:							0px;
	z-index:						-1;
}

.clearfix {
	display: 						inline-block;
}

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

/* Hides from IE-mac \*/
* html .clearfix {
	height: 						1%;
}

.clearfix {
	display: 						block;
}
/* End hide from IE-mac */

.product_header,
.single_column,
.double_column,
.triple_column,
.narrow_column,
.section_list,
.category_list {
	display: 						inline-block;
	position:						relative;
}

.product_header:after,
.single_column:after,
.double_column:after,
.triple_column:after,
.narrow_column:after,
.section_list:after,
.category_list:after {
    content: 						"."; 
    display: 						block; 
    height: 						0; 
    clear: 							both; 
    visibility: 					hidden;
}

/* Hides from IE-mac \*/
* html .product_header,
* html .single_column,
* html .double_column,
* html .triple_column,
* html .narrow_column,
* html .section_list,
* html .category_list {
	height: 						1%;
}

.product_header,
.single_column,
.double_column,
.triple_column,
.narrow_column,
.section_list,
.category_list {
	display: 						block;
}
/* End hide from IE-mac */