/*
	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.
		... that took AGES to figure out! 
		and still applicable in 2012
		sometimes may need override to static (eg. for IE7 in jq_all.js)
		*/
	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% ; }

/* convenient styles for TinyMCE editor to use (enable in head.php) */
.blueBorder {border:1px solid #7D9EA3 ; padding:2px}
.largerText {font-size:120% ; }
.smallerText {font-size:80% ; }
.addMargins {margin:3px 30px ; }


/* bodge used to pad out expected space on short pages
   not really needed now we have jQuery resizing things */
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:450px ; }
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.h { /* 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 ; }
	div#social a {display:inline !important ; }

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


/*   PRINT & BOOK listings a bit of a mix up of
	styles used by straight html version - .bok, .prnt
	styles used by jQuery version - .book, .print
	... and .mixed ??  */
div#itemListBlock {clear:both ; display:none ; }
div#stockList {clear:both ; }

/* 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, .ctrl { padding-left:3px ; color:#fff ; font-size:80% ; text-align:right ; }
.cart .more {  text-align:left ; }
.more a:visited, .more a:link, .ctrl a:visited, .ctrl a:link {	color:#fff }
/*.cart a:visited, .cart a:link { color:#ffbba9 }   */
.plink {float:left ; } 
div.pic {text-align:center ; }
div.bok h3, div.book h3, div.mixed h3 {
	font:bold small-caps 90% Georgia, "Times New Roman", serif ; text-align:center ; margin:5px 0}
div.bok p, div.book p, div.mixed p {
	font:normal 90% Georgia, "Times New Roman", serif ; text-align:justify ; margin:3px 0 }
div.bok p span.auth, div.book p span.auth, div.mixed p span.auth {font-weight:bold}
div.bok p.price, div.placer p.price {font-style:italic ; text-align:right ; margin:0 3px }
/* div.ctrl p.price {position:relative ; left:500px ; top:-40px ; display:inline-block ;
	background-color:#fff ; padding:3px 6px;  } */
div.bok p.desc, div.book p.desc, div.mixed p.desc {
	margin-left:5% ;
	font-size:80% ; line-height:135% ;
	/* Tried to get font-size as predictable as possible so jQuery can guess the height of a paragraph.
	 	IE, Chrome and FF still render them different somehow with same font on same machine !!
		...even setting font-size in pixels...
		letter- & word-spacing are treated differently anyway, so don't bother!	*/
	}
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 full-details are also in div.bok which may be confusing) */
.prnt, .print {
	margin:10px 15px ; padding:5px ; border:1px solid #7D9EA3 ;
	float:left ; width:130px ; height:160px ; overflow: hidden ;
/* 	background-color:#ffffff ;  */
	text-align: center ;
}
.prnt img { margin:0 auto ; }
.prnt p, .print p {font-weight:normal ; font-style:italic ;}
.prnt p span.auth, .print p span.auth {font-weight:bold ; font-style:normal ;}
.prnt p span.latin, div.print p span.latin {font-weight:normal ; font-style:italic ;}



/* jQuery loaded listings - probably override a lot of the above
 	some .book included in .bok section above */

/*  had a problem here somehow with  div.it had no size so all fit in viewport
	even though their content did not ... most confusing */
div.it {float:left ; border:1px solid #7D9EA3 ; margin:8px 5px 5px 0 ; }
div.itp, div.wrapr {border-width:0  ; margin:0  ; }
div.wrapr {font-size:90% ; padding:5px 5px 0 ; width:675px ; height:100px ;
	min-height:100px ; overflow:hidden} /*  book-wrapper height to be extended by jQuery  */
div.book, div.mixed {overflow:hidden ; }
div.placer img.thum {float:right ; margin-left:8px ; }
div.ctrl {background-color:#7D9EA3 ; border:5px solid #fff ; border-width:6px 5px 0 ;
	height:20px ; width:672px}

/* div.ctrl p.more {margin:0 2px; } */
img.thum {cursor:pointer ; }
div.ctrl {cursor:pointer ; /* text-align:right ; color:#fff ; font-size:90% ;  */ ; }
/* div.ctrl a:link, div.ctrl a:visited {color:#fff ;  } */
/* div.ctrl .price {display:inline-block ; margin:0 5px ; } */
div.ctrl img { margin-top:2px ; }

div.print {float:none ; }
div.print img {float:none !important ; margin:0 auto; }

div.placer p.catDetail {margin-top:2em ; font-size:80% ; font-style:italic ; }
p.inCart {display:none ; }

/*	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*/}
#navresult #print {float:right ; cursor:pointer ; }
#printChoice {position:absolute ; display:block ; z-index:5 ; font: normal .6em verdana, sans-serif ;
	border:2px solid #C4E2E2 ; background-color:#fff ; padding:.5em 1em ;}
#printChoice img {cursor:pointer ; float:right ; margin-top:-3px ; margin-right:-7px ; }
#printChoice em {cursor:pointer ; display:block ; padding:0 1em; }
#printChoice em:hover {background-color:#D8D8D8 ; }

/* Listing preference form */
#prefSet {font:80% normal arial, helvetica, sans-serif ; }
#prefSet select {font:90% normal arial, helvetica, sans-serif ; }


p.left {clear:both ; text-align:left ; }
/*
	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 ; }