/*
	Site-wide CSS file for sotherans.co.uk
*/

/* important general stuff: */
body { 
	background-color:#fff ; margin:0 ; padding:0 ;
	color:#000 ; font-family:"Times New Roman", Times, serif ; 
	font-size:101%  ; /* % for IE resizing bug */
}
p, li {font-size: 80% ; }
h1 {font-size: 160% ; }
h2 {font-size: 130% ; }
h3 {font-size: 100% ; }

img {border-width:0 ; }
ul {list-style-type:none ; padding:0 ; margin:0 ; }

a { /*	Necessary to keep links clickable above overlapping wrapper divs.
		F*ck me! that took AGES to figure out! */
	z-index:50 ; position:relative ; }
a:link { color: #7D9EA3 ; }
a:visited { color: #7D9EA3 ; }


/* some general purpose bits */
.f_left  {float:left ; }
.f_right {float:right ; }
.a_left  {text-align:left ; }
.a_right {text-align:right ; }
.centre {text-align:center ;}
.red {color:#933 ; }
.small {font-size:80% ; }
div.spacer1  {margin-top:100px ; clear:both ; }
div.spacer2  {margin-top:200px ; clear:both ; }
div.spacer3 {margin-top:300px ; clear:both ; }
div.spacer4 {margin-top:400px ; clear:both ; }

fieldset {border:1px solid #7D9EA3; }
legend {color:#2B4D53 ; font-size:90% ; }


/*  jQuery popup bits  */
/*  put at top as some may be overridden later */
div#extra{
	display:none ; position:fixed ; z-index:999 ; 
	top:25px ; left:50% ; width:600px ; margin:0 0 0 -340px ; padding:5px 20px ; 
	border:3px solid #7D9EA3 ; background:#ddd ; 
	-moz-border-radius: 9px ; -webkit-border-radius: 9px; 
}
div#greyCover{
	display:none ; position:fixed ; z-index:500 ; 
	top:0 ; left:0 ; width:100% ; height:100% ; background-color:#000 ;
	/* tried and tested opacity settings for most browsers */
	-moz-opacity: 0.5 ;
	opacity: .50 ;
	filter: alpha(opacity=50) ;
}
textarea.editArea {width:600px ; height:300px ; }
body.mceContentBody { /* TinyMCE specific override */
	   background: #FFF !important; padding: 0 4px; }

.button {background:#d4d4d4 url(../images/grad_butu.jpg) scroll bottom repeat-x ; 
	padding:3px 4px ; cursor:pointer ; font:normal 70% sans-serif ;
	 ; float:right ; margin:3px 6px ; border:1px solid #ccccfc }
.button:hover {background:#d4d4d4 url(../images/grad_butn.jpg) scroll top repeat-x ; 
	color:#eee; }
.button0 { padding:3px 4px ; float:right ; margin:3px 6px ; border:1px solid #ccccfc}
#close {}
#MapContainer img, #MapContainer iframe {margin:0 auto; }
.editable {border:2px dotted transparent ; 	/*  invisible border for editable areas  */
 }
.editHigh {background:#fff url(../images/edit.gif) repeat !important ; border-color: #DD9EB0 } /*add border*/
.editable p { margin:0 ; padding:0 ;}
.login_link {float:right ; }
.login_link a:visited, .login_link a:link { text-decoration:none ; }   
#logged {background:#b80000 url(../images/danger2.gif) repeat-y ; padding:2px ; 
	position:fixed ; top:0 ; width:100% ; z-index:99 ; 
	text-align:right ; color:#fff ; font:normal 70% sans-serif ;  }
#logged form, #logged input {display:inline ; }
.editDivName {font:bold 120% monospace ; color:#7D9EB0 ; }
.editArea {background-color:#F0F2F6 ; font:normal 70% verdana,sans-serif; }




/**********************************************************************************
	All the Main LAYOUT Areas used on EVERY PAGE
	most of the widths, margins, padding & borders are interdependent and Very Carefully Calculated
*/
div#page { /*	container for the topBlock and the content, but not the fixed menu 
				This keeps everything aligned with locked width, centred on screen by margin:auto */
	width:948px ; margin:5px auto 0 ; 
}
/*	topBlock - the container for common stuff at the top of every page.
	Sub-divided into various regions which have background images to make up the whole.
	Text alternatives can be provided for accessibility, but are normally hidden inside a <span>. */
div#topBlock { 
	height:132px ; 
}
	div#topBlock span { /* hide the actual text in top headings */
		display:none ; 
	}
div#top_left { /* graphic only */
	width:187px ; height:132px ; float:left ;
	background: #fff url(../images/top_left.gif) no-repeat top left ;
}
div#top_mid { /* site headings container */
	width:282px ; height:132px ; float:left ; 
}
	div#topBlock h1 { /* site heading */
		margin:0 ; padding:0 ; width:282px ; height:66px ; float:left ; 
		background: #fff url(../images/top_title.gif) no-repeat top left ;
	}
	div#topBlock h2 { /* site sub-heading */
		margin:0 ; padding:0 ; width:282px ; height:66px ; float:left ; 
		background: #fff url(../images/top_subtitle.gif) no-repeat top left ;
	}
div#top_right_A { /* background for flashbox */
	background: #fff url(../images/top_flashbox.gif) no-repeat top left ; 
	float:left ; width:479px ; height:108px ; 
}
	div#flashBox { /* position for flashbox */
		margin:19px 0 0 34px ;   
	}
div#top_right_C { /* background for top menu strip */
	background: #fff url(../images/top_menu.gif) no-repeat top left ;  
	float:left ; width:479px ; height:24px ; 
	text-align:center ; 
}
/* Top Menu strip, also within topBlock */
ul#top_menu {
	margin:0 auto ; padding-left:1px ; 
}
ul#top_menu li { /*  IE6 doesn't like this stuff applied direct to <a> tag   */
	 display:block ; float:left ; padding:2px 1px ; width:62px ; 
}
ul#top_menu a { /* this is the crux of the menu - floating block <a> tags  */
	 display:block ; overflow:hidden ; 
}
ul#top_menu a:link, ul#top_menu a:visited  {
	background-color:#7D9EA3 ; color:#fff ; text-decoration:none ; 
}
ul#top_menu a:hover {
	background-color:#8fafb5 ; text-decoration:underline ; 
}
ul#top_menu li.active a {
	text-decoration:underline ; 
}
/* end of topBlock */


/* Various wrapper divs for Actual CONTENT and left-hand Fixed MENU  */
div#contentHW { /* Horizontal positioning Wrapper for main content (and lower decoration)
		Sets width and locks to centre of div#page and provides left border */
	width:893px ; margin:0 auto ; padding:0 ; border-left:1px solid #7D9EA3 ; 
}
	div#content {	/* ACTUAL CONTENT WRAPPER - wide left-margin to clear Fixed Menu Block */
					/* it leaves around 700px usable width */
		margin:3px 0 0 159px ; padding:10px ; background-color:transparent ;
		border:1px solid #7D9EA3 ; 
		z-index:4 ; /*  keep the content on top */
		position:relative ; /* also required for Firefox */
	}
div#lowerTriangle {
	clear:both ; background:transparent url(../images/trianglebottom.gif) no-repeat top left ; 
	height:38px ; margin:0 0 10px 27px ; border-left:1px solid #7D9EA3 ; 
}

div#menuVW {
	/* Vertical wrapper for Menu Block - keeps it always at fixed position from top of page */
	/* Actually it is NOT fixed by default - browser must prove (by javascript) there is enough room */
	position:absolute ; top:35px ; width:100% ; /* script changes this to position:fixed */
}
	div#menuHW {
		/* horizontal wrapper for Menu Block - keeps width and margins aligned with contentHW */
		width:948px ; margin:0 auto ; 
	}
	div#menu_fixed {
	 /* the actual left-hand Menu Block (vertically fixed, horizontally fluid by enclosing divs) */
			padding:2px ; width:155px ; margin-left:27px ; border-left:1px solid #7D9EA3; 
		}
		div#menu_fixed a {text-decoration:none ; }
		div#menu_fixed div {
			border:1px solid #7D9EA3 ; padding:3px 3px ; margin:2px 0; 
		}
		div#menu_fixed fieldset {border-width:0 ; margin:0 ; padding:0}
		div#menu_fixed p, div#menu_fixed li {margin:0 ; padding:0}
		div#menu_fixed div#logo {margin:3px 0 2px ; padding:0 ; border-width:0 ; text-align:center ; }
		div#menu_fixed h4, div#menu_fixed legend {margin:0 0 4px; font-size:95% ; font-weight:bold ; color:#000 ; }
		div#menu_fixed h5 {margin:4px 0 0 ; }
		div#menu_fixed a:link, div#menu_fixed a:visited {
			color:#7D9EA3 ; border-right:4px solid transparent ;
			display:block ; }
		div#menu_fixed li a:hover, div#menu_fixed h4 a:hover  {
			color:#333 ; border-right:4px solid #7D9EA3}
		div#menu_fixed h4 a:visited, div#menu_fixed h4 a:link {color:#000 ; }
		div#feed ul {list-style-image: url(../images/rss.gif) ; padding-left:20px ;}
		div#feed li a:link {text-shadow: #fff -2px 2px 0 }
	 /*  specific sub-divs */
	div.subCat { border-width:0 0 1px !important}
	div.subCat h4 {font-size:90% !important ; }
	div#DigEditions {border-width:0 !important; }
	div#Cart {background-color:#DBE8E9 ; }

/*
	END of main layout areas
*************************************************************************/


/* BOOK listings */
.item { float:left ; margin: 0 20px ; font-size:90% ; width:670px ; }
.item img, .more img {float:right ; margin:15px 0 0 ; }
div.bok	 {border:1px solid #7D9EA3 ;
	margin:10px 0 ; padding:2px 10px 0 ; width:540px ; }
div.wd { width:650px ; }
.more {background-color:#7D9EA3 ; height:20px ; }
.more img {margin:0 ; padding:0 ; }
.more { padding-left:3px ; color:#fff ; font-size:80% ; text-align:right ; } 
.cart .more {  text-align:left ; } 
.more a:visited, .more a:link {	color:#fff }   
/*.cart a:visited, .cart a:link { color:#ffbba9 }   */
div.pic {text-align:center ; }
div.bok h3 {font:bold small-caps 90% Georgia, "Times New Roman", serif ; text-align:center ; margin:5px 0}
div.bok p {font:normal 90% Georgia, "Times New Roman", serif ; text-align:justify ; margin:3px 0}
div.bok p span.auth {font-weight:bold}
div.bok p.price {font-style:italic ; text-align:right ; margin:0}
div.bok p.desc {margin-left:5% ; font-size:80% ; }
div.bok img {margin-left:5px ; }
.cart p {font-size:75% !important ; }
/* overrides on book detail page */
div.detail div.bok { width:95% ; padding:6px ; border-width:0 ; }
div.detail div.bok p.desc {margin-left:0}
span.sold {color:#777 ; }


/*   PRINT listing  */
/*	 (prints details are also in div.bok which may be confusing) */
div.print {
	margin:10px ; padding:5px ; border:1px solid #7D9EA3 ; 
	float:left ; width:130px ; height:160px ; overflow: hidden ;
	background-color:#ffffff ; 
	text-align: center ; 
}
div.print img { margin:0 auto ; }
div.print p {font-weight:normal ; font-style:italic ;}
div.print p span.auth {font-weight:bold ; font-style:normal ;}
div.print p span.latin, div.bok p span.latin {font-weight:normal ; font-style:italic ;}


/*	Listing Navigation	*/
div.navtext {/*width:600px*/ text-align:left ; clear:both ; }
div.navtext p, p.navtext {font:10px verdana ; /*text-align:right ; margin-right:30px*/}


/*
	END book & print listings
*************************************************************************/


/*	ASSORTED Bits for specific pages  */

/* Contact / Sales */
/* div#FormContainer fieldset {border-width:0;} */
fieldset.f_right label {float:left ; width:200px ; }
fieldset.saleform {border:1px solid #7D9EA3 ; padding:3px 6px ; margin:5px ; }
textarea.wide, input.wide {width:300px ; }
textarea.narr, input.narr {width:180px; }
label.narr {display:inline-block ; width:120px ; }
.form_cart { border:1px solid #7D9EA3 ; padding:2px 5px ; margin:8px 20px; }
.form_cart h4 { margin:0 0 0 4px; }
label.long {display:inline ; margin-left:50px ; }
label.error {color:#c00 ; }
#buyReturn {cursor:pointer ; }
.dim {color:#888 ; text-decoration:line-through ; font-style:italic}
#payFormParts {z-index:9999 ; }
.errorHighlight {color:#933 ; font-style:italic ; background-color:#FCC}


/*  Catalogues     */	
div.Covers { margin-left:50px ; }
div.CatCover {
	border:0px solid #336600; padding: 10px 20px 10px 20px;
	float:left; height:240px; width:150px;
}

/*  Upcoming Catalogues */
fieldset.upcom {border:1px solid #7D9EA3 !important ; margin-bottom:10px }
fieldset.upcom legend {font-size:90% ; font-weight:bold ;  ; padding:0 10px; }
fieldset.upcom p {margin:2px ; }

/*  Books Department  */
div.bookDept {
	background: #F9F9F9 ;
	padding: 5px 10px 0 10px ; margin:10px ; width:312px ; 
	border-top:1px solid #7D9EA3 ; border-bottom:4px solid #7D9EA3 ; 
}
div.bookDept h3 {text-align:center }
div.bookContact {
	margin: 16px 1px 1px 1px ; padding: 5px 10px ;
	width:300px ; /*height:50px ;*/
	background:#FFFFFF ; font-size:80% ; 
}

/*  Prints Department  */
div.deptTopics { margin-top:2em }
div.deptTopics ul { display:block; }
div.deptTopics li { list-style:none ; padding:4px 10px 4px 6px ; float:left ;
	 width:155px ; height:140px ; text-align:center } 
#PrintsContentHolder { padding:10px ; text-align:center ; /*border:1px solid #c54 ; */} 

/* Services */
div#Services {
	position:relative ; margin:0 ; width:100% ; /*height:577px ;*/
	border:1px solid #7D9EA3;background:#F6F6F6 }
div#Services div { background:#FFFFFF ; padding:10px ; border:1px solid #7D9EA3 }
div#Services h2 { text-align:center ; font-size:100% ; font-weight:bold ; color:#666666 }
div#Services p {text-align:justify ;}

#service_corporate { position:relative ; float:left ;
	margin:10px 0 0 10px ; width:50% ; }
#service_libraries { position:relative ; float:right ; 
	margin:10px 10px 0 0px ; width:40% ; }
#service_auction { position:relative ; float:left ;
	margin:10px 0 0 10px ; width:40% ; }
#service_binding{ position:relative ; float:right ; 
	margin:10px 10px 0 0px ; width:50% ; }
#service_framing{ position:relative ; float:left ; 
	margin:10px 0 10px 10px ; width:94% ; }


/* Search  */
fieldset.searchForm {width:40% ; border-width:0 ; display:inline ; float:left ; padding:0 20px ;  ; }
fieldset.searchForm label {float:left ; width:120px ; }
fieldset.searchForm h4 {margin:20px 0 0 ; }
fieldset p {margin:0 ; }
fieldset.searchForm input {display:inline ; font-style:italic ; color:#9bb ; }
p#searchButtons {clear:both ; width:50% ; margin-left:350px ; padding-top:20px}
p#searchButtons img {cursor:pointer ; cursor:hand ; }
#search_notes {clear:both ; width:90% ; padding:1px 10px ; margin:20px auto ; font-size:90% ; background-color:#eee}
#search_notes h3, #search_notes h5 , #search_notes p  , #search_notes li {margin:2px 0 0 ; }
#search_notes ul {list-style-type:none ; margin:2px 0 0 15px; }

/*  Mailing Lists  */
.iblock {display:inline-block ; width:150px ; }


/* debugging  */
.d {font:normal 10px arial ; color:#5a5 ; } /*for debug text*/
.i {font-style:italic ; color:#696 ; } /*for debug text*/
div#debugger, #sess_debug {
	position:fixed ; padding:0 5px ; top:1px ; right:1px ;
	background-color:#246 ; color:#990 ; z-index:200 ; max-width:150px ; 
	border-left:1px solid #fff ; 
	}
#sess_debug {max-width:800px ; top:300px ; left:80px ; }