/*  
Theme Name: Vignon Bleu
Theme URI: http://wordpress.org/
Description: Gallic Books template by Twelve12 based on the rather lovely <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
Version: 1.0
Author: Andrew Richards based on Kurbick theme by Michael Heilemann.
Author URI: http://www.twelve12.co.uk/

	Vignon v1.0
	http://www.twelve12.co.uk/vignon
	
	This theme is an extension of Kubrick as designed and build by Michael Heilemann.

	Kubrick v1.5
    http://binarybonsai.com/kubrick/

	This theme was designed and built by Michael Heilemann,
	whose blog you will find at http://binarybonsai.com/

	The Kubrick CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
	
*/

/* A quick user's guide to CSS - this covers basic CSS only and should not be considered exhaustive.
**
** Styles can be defined to apply to HTML elements in three ways (note the prefixes):
** 		tag		: style applies to all instances of HTML tags called tag (e.g. body, div, p, a, etc.)
**		#name	: style applies to the HTML tag identified by name. Tag names should be unique on each page (so this can only apply to one element).
**		.class	: style applies to all instances of HTML tags where identified by a class marker. This may be used for different types of tags.
**
** Where a style identifier is a list the following applies:
**		if the list is comma separated then the style applies to each of the listed tags, names or classes, e.g.
**			img, p : style applies to all instances of image and paragraph tags.
**		if the list is space separated then the style applies to tag instances where the nested ordering applies, e.g.
**			p img : stlye applies to all images where the image is directly contains by a paragraph; images outside of paragraphs and not affected.
**
** Padding versus Margins: the size of an element is basically the size of its content (either implicitly, e.g. text or images where no width or 
** height is defined; or explicitly, text or images elements where one or more explicitly size is defined). The space the element takes on screen
** is this size plus any defined padding. Padding increases the size of the element with respect to its background colour etc. (so padded areas
** have the same colour as the content). The padded element has a border (typically of zero size) and then a margin, which is essentially white
** space used to separate the element from other elements.
**
** Caveat: whilst simplistic true there are enough other consideration to make this a very complicated area but this basic detail should allow
** spacing modifications more or less as intended.
*/


/*
** Colour scheme:
** #191946 - a dark/navy blue chosen to match the existing Gallic logo
 
** #B0C4DE - a light blue used for the links in the footer - this is nicely visible on the blue background
 
** white   - er, white. Used for the page background and for text in the footer, also known as #ffffff
 
** #CC0000 - the red colour used for author text and links; also used for the bover-over colours for links in the footer
**
*/ 

/*
** Basic sizing (other sizes exist this is just the most repeated elements
** Corner rounding radius
*/

/* The body is the HTML tag that contains all visible content; this can be considered the root or top-level for all styles */
body {
	/* background-color - this is background colour used around the edge of the content - e.g. the left/right vertical bars */
	background-color: #191946;  
	/* color - this is the default colour to be used by the site's content - e.g. the text colour. It's the same as the background
	** colour above - the "white" page background is defined in the #page element, below.
	*/
	color: #191946; 
	/* Resets 1em to 10px */
	font-size: 80%; 
	/* 
	** TODO - add link reference to web-safe fonts/font-families
	*/
	font-family: Geneva, Gill Sans, Arial, Sans-serif;
	/* when setting margin/padding we'll do it explicitly where we need it so set all element to have zero as default */
	margin: 0;
	padding: 0; 
}

/* Page is used to identify the main section of the layout used to contain content - i.e. anything outside of the page div is
** the vertical side borders or the thin top border that stops the page bumping up to the top of the browser.
*/

#page {
	padding-bottom: 0px;
	margin-bottom: 0px;
	/* background-color here controls the background colour for the site's content (except the footer bit) */
	background-color: white; 
	/* The first margin value controls the size of the gap between the top of the browser window and the page containing the content */
	margin-top: 12px;
	margin-left: auto; 
	margin-right: auto;
	/* Make main page text slightly bigger to improve readability on screen */
	font-size: 120%;
	/* give the page a nice border, for the moment it's the same colour as the background so not visible but useful is playing with colours */
	border: solid 4px #191946; 
	/* width controls the width of the main display area; this is set to a standard value to allow the site to look okay
	** on low resolution screens or other devices. Q.v. bbb.co.uk - this has a similar width but everything is shifted to be top-left
	** with space appearing on the right hand side. If changing this the width of the #footer should probably be made to be consistent */
	width: 760px; 
	text-align: justify;
}

/* The footer is, er, the bit at the bottom which contains the hosting and design details. It's nice to be noticed. */
#footer {
	background-color: #191946; 
	/* change the standard text colour to be the same as the main page */
	color: white;
	/* make the text smaller relative to the main content's text size */
	font-size: 90%;
	/* make everything nicely centered */
	text-align: center;
	/* give the footer a little headroom so its content is not bumped up against the page content */
	padding: 20px 0; 
	/* width - same as the #page element */
	width: 760px;
	/* need clear as there's likely to be some floating elements above - make sure the footer is really the footer */
	clear: both;
	/* Fudge for IE - without this the border corner causes a white bar to appear above the footer */
	/* margin-top: -13px */
}

/* Make the anchor tags within the foot appear different to the rest of the page */
#footer a {
	color: #B0C4DE;
}

/* ... and make the anchor tags in the footer change to the red used for elsewhere when the user's mouse strays across them giving
** a visual cue to the link actually being a link
*/
#footer a:hover {
	color: white;
}

#bottomBorderCorners {
	clear: both;
	/* Make bottom section same height as the rounded gifs; only needed for IE to stop page coloured bar appearing */
	height: 30px;
}

#topLeftCorner, #bottomLeftCorner
{
	float: left;
}

#topRightCorner, #bottomRightCorner
{
	float: right;
}

#rights {
	font-style: italic; 
}

/* ANCHOR tags
** Define main style for all links within the document. 
*/
a {
	font-weight: bold;
	/* make same the same colour as the rest of the text; we need to do this explicitly to avoid the default HTML colourings */
	color: #191946; 
	/* get rid of the underlying that comes with standard hyperlinks */
	text-decoration: none;
}

/* Styles for when user's mouse is hovering over a hyperlink; we'll not mess with them too much by showing the underlining
** associated with normal hyperlinks
*/
a:hover {
	text-decoration: underline;
}

/* Make book links appear italicised */
.authorDetail a.bookLink {
	font-style: italic;
}

/* Make links and author text appear differently */ 
a.authorLink, .bookDetailRowAuthor
{
	color: #CC0000;
}

/* Make link for current page appear differently in navigation */
.header-block a.selectedMenuLink {
	color: #CC0000;
}

/* Get rid of the nasty border that's normally added to linked images - the logo looks particularly unattractive otherwise */
a img {
	border: none; 
}

/* THE HEADER SECTION 
** This is the bit with the logo and the main navigational links
*/

/* The outer wrapper for entire heading */
.header-block 
{ 
	font-size: 100%;
	margin-top: 20px;
	color: #CC0000;
} 


/* Although the logo appears leftmost we want it next to the bar that appears from the right
** Everything is floated right but in reverse order in the HTML.
*/
#header-logo {
	float: right;
}

/* This is the wrapper block for everything right of the logo */
#header-right {
	float: right; 
	/* make header bar same width as the section headings */
	width: 380px; 
	/* force the bar down to approximately the middle of the logo */
	margin-top: 32px; 
} 


/* This covers the back that appears on the right of the logo; an element within header-right */
.header-right-bar {
	color:#FFFFFF; 
	background-color: #191946;  
	padding-top:1px;
	padding-bottom:1px;
	height: 16px;
}

/* These ids refer to the main nagivation links shown above and below the header-right-bar; elements within header-right */
#header-above-bar, #header-below-bar {
	padding-top: 4px; 
	padding-bottom: 4px; 
	text-align: center;
}

/* This is used to control the spacing between the header section and the first section header or any page content */
#header-separator {
	clear: both; 
	height: 10px;
}


/* Whatever we're doing with links elsewhere make the main navigation ones look like normal lnks 
** We'll inherit decoration from the page links (so no underlying) but reset any weighing/bolding 
*/
.header-block a
{
	font-weight: normal;
}

/*
** Default layout is used for basic site content that isn't otherwise specifically styled, e.g. not gallery, book or author pages.
** (So this will apply to "about us", "contact", etc.
*/
.defaultLayout {
	padding-top: 10px;  
	margin-top: 10px;  
	margin-left: 40px;
	margin-right: 40px;
	text-align: justify;
	clear: both;
}

.defaultLayout strong, .strongLink {
	color: #CC0000;
}

/*
** Section header - the section title heading (with rounded edge)
** Note: although described as "gallery" these styles are used on all section headings across all pages
*/
.gallerySection {
	clear: both; 
	margin: 0px;
	padding: 0px;
}

#galleryOuter {
	clear: both;
	padding: 0px;
	margin: 0px;
	border-collapse: collapse;		
}

.gallerySectionHeader {
	float: right;
	font-weight: bold; 
}	

.gallerySectionSpacer {
	margin-top: 20px;
}

.gallerySectionHeaderImageDiv {
	float: left; 
}

.gallerySectionHeaderCaption {
	/* set colours to be inverse of main page text */
	background-color: #191946; 
	color: white;
	float: left;
	/* make caption same size as the rounded edge! */
	height: 18px;
	text-align: center;
	font-weight: bold;
	font-size: 100%;
	/* Make the main part of the section heading the same width as the main link bar in the header*/
	width: 360px;
}

/*
** TEMPLATE PAGE STYLES
*/

/* GALLERY PAGE STYLES */

/* Container for each book show as detailed section */	
.galleryDetailRow {
	margin-left: 40px;
	margin-right: 40px;
	clear: both;
}

.galleryDetailRowSpacer {
	clear: both;
	height: 40px;
}

.galleryImageRowSpacer {
	clear: both;
	height: 20px;
}

/* Inner container for book image */
.galleryDetailRowImage {
	width: 120px;
	float: left;
}

/* Inner container for details */
.galleryDetailRowDetail {
	width: 500px;
	float: right;
}

/* Image image when shown as part of book detail */
.galleryDetailImage {
	padding: 0px;
	margin: 0px;
	height: 240px;
	width: 160px;
}

/* Book title caption when shown as part of book detail */
.galleryDetailRowTitle {
	font-size: 150%;
	font-weight: bold;
}

/* Author name when shown as part of book detail */
.galleryDetailRowAuthor {
	padding-left: 10px;
	padding-top: 2px;
}

/* The book summary when shown as part of book detail */
.galleryDetailRowSummary {
	padding-left: 10px;
	padding-top: 10px;
}


.galleryDetailRowAvailable {
	padding-top: 10px;
	padding-left: 10px;
	font-weight: bold;
	float: left;
}

.galleryDetailRowMore {
	padding-top: 10px;
	padding-left: 10px;
	font-weight: bold;
	font-size: small;
	float: left;
	clear: both;
}

.galleryDetailRowOrder {
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	float: right;
}

.galleryImageRow {
	width: 100%;
	clear: both;
	display: block;
	text-align: center; /* Fake centering for row of images */	
}

.gallery-col0-of-2 { float: left; width: 50%; }
.gallery-col1-of-2 { float: left; width: 49%; }

.gallery-col0-of-3 { float: left; width: 33.3%; }
.gallery-col1-of-3 { float: left; width: 33.3%; }
.gallery-col2-of-3 { float: left; width: 33.3%; }

.gallery-col0-of-4 { float: left; width: 25%; }
.gallery-col1-of-4 { float: left; width: 25%; }
.gallery-col2-of-4 { float: left; width: 25%; }
.gallery-col3-of-4 { float: left; width: 24%; /* needed for IE! Pile of shit */ }

.galleryFilterSection {
	margin-top: 10px;
	margin-bottom: 10px;
	clear: both;
	text-align: center;
	font-size: 80%;
}
	
/* Book stuff */
.bookSection
{ 
	clear: both;
	padding-top: 20px;
}	

.bookDetailSection 
{
	clear: left;
	width: 40%;
	float: left;
	padding-left: 20px;
	padding-right: 10px;
}

.bookSummary
{
	width: 50%; 
	float: left; 
	margin-left: 20px;
}	

.bookDetailImage
{
	padding: 0px;
	margin: 0px;
	height: 420px;
	width: 280px;
}

#bookDescription
{
	clear: left;
	text-align: justify;
}

.bookDetailPublished
{
	font-size: 80%;
}	
	
.bookDetailISBN
{
	font-size: 80%;
}

.bookPrice
{
	font-size: 80%;
}

.bookDetailRowAuthor 
{
	font-size: 150%;
	font-weight: bold;
}

.bookDetailRowTranslator
{
	padding-left: 10px;
	padding-top: 2px;
}

.bookDetailSynopsis
{
	padding-top: 10px;
}

.bookOtherSectionSpacer
{
	clear: both;
	margin-top: 20px;
}

/*	padding-top: 20px; HERE  */
.bookOtherSection {
	clear: both;
	margin-left: 20px;
}

.bookReview {
	margin-top: 10px;
}	

.bookFormat {
	font-size: 80%;
}
	
.bookThemes {
	font-size: 80%;
}
	
.bookThemes a {
	font-weight: normal;
	font-style: normal;
}	

.authorSection {
	clear: both;
	padding-top: 10px;
	margin-left: 40px;
	margin-right: 40px;
}

.authorImage {
	float: left;
	margin-left: 0px;
	margin-right: 20px;
}

.authorImagePicture
{
	width: 160px;
	height: 240px;
}

.authorImageCopyright {
	clear: both;
	text-align: center;
	font-size: 60%;
	margin-top: 4px;
}

.authorDetail
{
	text-align: justify;
}


/*
** BASIC PAGES -  SPECIFIC FORMATTING
*/

/* News page : page is dividend into section using the rounded-bar headings 
** The classes below control how news items are formatted within each section.
*/

/* newsItem is the outer class for a news items; this wraps the subject heading, detail and date */
.newsItem
{
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 20px;
}

/*  newsSubHeading is used for an item of news within a section */
.newsSubHeading
{
	font-size: 120%;
	font-weight: bold;
	margin-bottom: 2px;
	color: #CC0000;
}

.newsSubHeading a
{
	color: #CC0000;
	text-decoration: underline;
}

/* newsDetail is the actual news item itself, i.e. the main text */
.newsDetail
{
	margin-left: 20px;
	margin-bottom: 4px;
}

/* newsDate is used for the datestamp for each news items */
.newsDate
{
	text-align: right;
	font-size: 80%;	
}

/*
** Readers' group page - page(s) contain suggested question for reading groups
*/

/* make the book cover appear top-left with some space around its edges against the text */
#readingImage
{
	float: left; 
	padding-right: 40px;
	padding-bottom: 20px;
}

/* space out the list elements for the actgual questions */
#readingQuestions li
{
	margin-bottom: 10px;
}

/*
** Generic bits of formatting
*/

iframe {
	padding: 0px;
	margin: 0px;
}


#footerSpacer {
	height: 20px;
	clear: both;
}

.preFooter 
{
	clear: both;
	padding: 1px;
}

hr {
	/* Where horizontal line is used to separate section make it invisible */
	display: none;
	clear: both;
}


/*
**	Styles for third-party components
*/
#marqueecontainer {
	position: relative;
	width: inherit; /*marquee width */
	height: 100px; /*marquee height */
	background-color: white;
	overflow: hidden;
	border: 0px solid #191946;   
}


/* 
	"Now I have only one thing left to do: nothing. I don't want any belongings, any memories. No friends, no love. Those are all traps." 
*/