/* ============================================================
 * VAF STY:ES (non-WordPress version)
 * ============================================================
 */


/* ------------------------------------------------------------
 * COLOURS
 * ------------------------------------------------------------
 */

body {
    background: #1f1f1f;  /* very dark grey */
}
body {
    color: #bcbcbc;  /* very light grey (same as highlighted menu items) */
}
h1, span.vaf_red {
    color: #c30e0e;  /* VAF red */
}
h2, h3 {
    color: #bcbcbc;  /* very light grey (same as highlighted menu items) */
}


/* So Dave can put his "Vintage Aircraft Furniture" strings in VAF red
 * by simply selecting the "bold" option from the WYSIWYG menu */
#content strong {
    color: #c30e0e;  /* VAF red */
}

h1.main-page-title {
    color: #bcbcbc;  /* very light grey (same as highlighted menu items) */
}

/* Default menu colour
 */
#mainMenu li a {
    color: #585858;  /* dark grey */
}

/* Menu colour for current page and ancestor page items 
 */
#mainMenu li.current-page > a,
#mainMenu li.current-page-ancestor > a {
	color: #bcbcbc;  /* very light grey (same as text and headers) */
}

/* Menu hover colour - make this important so if you hover over a parent 
 * page's menu item, then the parent page's menu item turns mid-grey to reflect 
 * the rollover.
 */
#mainMenu a:hover {
	color: #828282 !important;  /* mid grey */
}


/* Generic link colours
 */
a {
    color: #c30e0e;  /* Dull-ish red */
}
a:hover {
    color: #ff0000;  /* Bright red */
}

h1.main-page-title {
    color: #bcbcbc;  /* very light grey (same as highlighted menu items) */
}

/* Table colours
 */
table.productsOverview a img {
    padding: 4px;
    border: 1px solid #c30e0e;  /* VAF red */
}
table.productsOverview a:hover img {
    border: 1px solid #ff0000;  /* Bright red*/
}

 
table.productSpec tr.headers {
	color: #c30e0e;  /* VAF red */
}
 

/* Bevelled-effect borders
 */
#main, #logoDiv, #mainMenu {

    /* Left and top borders in grey */
    border-left: 1px solid #424242;
    border-top: 1px solid #424242;

    /* Right and bottom borders in black */
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

h1.main-page-title,
#imageCollageDiv,
table.productsOverview,
#galleryContainer {

    /* Left and top borders in black */
    border-left: 1px solid #000;
    border-top: 1px solid #000;

    /* Right and bottom borders in grey*/
    border-right: 1px solid #424242;
    border-bottom: 1px solid #424242;
}


/* ------------------------------------------------------------
 * LINKS
 * ------------------------------------------------------------
 */
a {
    text-decoration: none;
}
a:focus, a:active, a:hover,
table.productsOverview a {
    text-decoration: underline;
}




/* ------------------------------------------------------------
 * Main menu
 * =========
 * Note: "ul.sub-menu" is the designation used for Twenty-Eleven
 *       named menus' sub-menus (2 layers).  It therefore takes 
 *       the place of using "ul ul" to refer to these sub-menus. 
 * ------------------------------------------------------------
 */
#mainMenu {
    position: relative;  /* So that the corner spans holding the bolt images
                            can be absolutely positioned */
    clear: both;
    float: left;
    width: 193px;  /* 220px -2 for border and -25 for R&L padding */
    padding: 47px 10px 34px 15px;  /* Adjust width if adjusting R/L padding */
}

#mainMenu ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
#mainMenu li {
    text-align: left;
    font-size: 1.4em;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 110%;
    margin: 0 0 14px 0;  /* Space below each item */
    padding: 0 0 0 22px;  /* Make room for arrow motif */
    background: url('../IMAGES/arrow.png') no-repeat top left;  
}
/* Override the arrow motif for non-product pages (the "home" and "contact" 
 * (pages).  Note: to add css classes to the 'li' items of inidividual menu
 * items go to "Appearance > menus" (LHS of Dashboard) and select "Screen Options"
 * (top-right, beside "Help"). Tick the "css classes" option.  Now when you edit
 * a menu item's properties there will be an extra field to add css classes.
 * Full explanation here:
 *
 *    http://devilsworkshop.org/add-custom-class-individual-menu-items-wpnavmenu/
 */
#mainMenu li.non-product-page {
    padding: 0;  
    background-image: none;  
}

#mainMenu ul.sub-menu {
    margin-top: 10px;
    padding-left: 15px;
}
#mainMenu ul.sub-menu li {
    text-transform: lowercase;
    font-size: 0.7em;
    line-height: 105%;
    margin: 0 0 9px 0;
}
#mainMenu li:hover > a,
#mainMenu a:focus {
    text-decoration: none;
}

/* Hide sub-menu items - they will only be displayed if their parent menu 
 * item is selected (or if subsequently they are selected).
 * Also, don't display the "arrow" background image (and accordingly reset 
 * left padding to 0).
 */
#mainMenu li > ul.sub-menu li {
    display: none;
    padding: 0;
    background-image: none;
}


/* Make the relevant submenu visible when the parent page is the current page.
 */
#mainMenu li.current-page > ul.sub-menu li,
#mainMenu li.current-page-ancestor > ul.sub-menu li {
    display: block;
}


/* ------------------------------------------------------------
 * STRUCTURE
 * ------------------------------------------------------------
 */
body {
    min-height: 700px;  /* If you don't have this then pages which are shorter
                         * than the browser window on the iPad enlarge width-ways
                         * so you can't see the whole page horizontally...
                         * aliy - need to put this in a sep. iPad stylefile
		      * and test on iPhones too!!!
                         */
    min-width: 1000px;  /* If you don't put a min-width of:
	               *    container-width + (2 * container padding/margins)
	               * i.e. here:
	               *                980 + (2 * 10)
	               * then if a user zooms the browser to enlarge the whole site,
	               * the coloured strips (divs) which stretch the whole width of 
	               * the browser stop short of the rest of the content.
	               */
    font-size: 100%;
    
    font-family: Geneva, Verdana, sans-serif;
    
    /* Stuff for centering all the content */
    margin: 0px;  /* Need this to avoid gap at top */
    padding: 0px;
    text-align: center;
}

#container {
    font-size: 0.7em;
	    
    width: 980px;

    margin-top: 10px;
    margin-left: auto;  /* Centers the "container" in the browser window */
    margin-right: auto;
    
    text-align: left;
            
    padding-left: 0px;
    padding-right: 0px;
}

#logo {
    width: 130px;
    margin: 35px 44px 28px 44px;
    border-style: none;
}

#logoDiv {
    position: relative;  /* So that the corner spans holding the bolt images
                            can be absolutely positioned */
    float: left;
    width: 218px;  /* -2 due to border */
    margin-bottom: 10px;
}

#main {
    position: relative;  /* So that the corner spans holding the bolt images
                            can be absolutely positioned */
    margin-left: 230px;
    width: 728px;  /* 730px - 2*1px borders */
    padding: 10px 10px 37px 10px;
}


/* ------------------------------------------------------------
 * Background positioning for the bolt images in all 4 corners 
 * of the panels 
 * ------------------------------------------------------------
 */

.corner { 
    position: absolute; 
    width: 20px;  /* dimensions of graphic or it won't show up */
    height: 20px;
    background: url('../IMAGES/bolt2.png') no-repeat; /* very dark grey */ 
} 

.TL { 
    top: 7px; 
    left: 7px;
} 

.TR { 
    top: 7px; 
    right: 7px;
} 
.BL { 
    bottom: 7px; 
    left: 7px;
} 
.BR { 
    bottom: 7px; 
    right: 7px;
} 


/* ------------------------------------------------------------
 * Image collage for home page
 * ------------------------------------------------------------
 */

#imageCollageDiv {
    position: relative;
    height: 362px;
    margin: 20px 0;
}

.carousel {
    position: absolute;

    /* "Raised" border around images - v. pale grey and v. dark grey */
    /* border-left: 1px solid #eee;
    border-top: 1px solid #eee;
    border-right: 1px solid #777;
    border-bottom: 1px solid #777; */
   
    padding: 4px;
    background: #1f1f1f;  /* very dark grey */
    border: 1px solid #bcbcbc;  /* pale grey */
}

.img1 {
    width: 300px;  width: 292px;
    height: 200px;  height: 192px;
    top: 80px;
    left: 20px;
    z-index: 1;
}
.img2 {
    width: 360px;  width: 352px;
    height: 240px;  height: 232px;
    top: 60px;
    left: 54px;
    z-index: 2;
}
.img3 {
    width: 420px; width: 412px;
    height: 280px;  height: 272px;
    top: 40px;
    left: 88px;
    z-index: 3;
}
.img4 {
    width: 480px;  width: 472px;
    height: 320px;  height: 312px;
    top: 20px;
    left: 122px;
    z-index: 4; /* Center image so bring to front */
}
.img5 {
    width: 420px; width: 412px;
    height: 280px;  height: 272px;
    top: 40px;
    right: 88px;
    z-index: 3;
}
.img6 {
    width: 360px;  width: 352px;
    height: 240px;  height: 232px;
    top: 60px;
    right: 54px;
    z-index: 2;
}
.img7 {
    width: 300px;  width: 292px;
    height: 200px;  height: 192px;
    top: 80px;
    right: 20px;
    z-index: 1;
}


/* ------------------------------------------------------------
 * Headers
 * ------------------------------------------------------------
 */

/* In-content headers */
h1 { 
    font-size: 1.3em;
    margin: 25px 0 10px 0; 
}

/* Main page header */
h1.main-page-title { 
    font-size: 1.5em;  /* Override default above */

    /* Put page header on right of content area */
    width: 710px;  /* 728px of main content panel - 2*8px padding - 2*1px borders */
    text-align: left;  /* Don't float right or text wraps up beside it! */
    text-transform: uppercase;
    padding: 5px 8px;
    margin: 26px 0 0px 0;
    *margin-top: 38px;  /* For IE7 and less due to margin collapse */
}

h2 { 
    font-size: 1.2em;
    margin: 20px 0 8px 0;
}
h3 { 
    font-size: 1.0em;
    margin: 15px 0 6px 0;
}


/* ------------------------------------------------------------
 * Paragraphs
 * ------------------------------------------------------------
 */

p {
	margin: 8px 0px;
	line-height: 130%;
}

/* In case the first para of the page follows the main "main-page-title" header
   directly, ned extra space above it
 */
h1.main-page-title + p {
	margin-top: 25px;
}


/* ------------------------------------------------------------
 * Code for image gallery (http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/)
 * NOTE: can only apply hovers to links in early versions of IE which is why 
 *       the code uses:
 *                       <a class="thumbnail" href="#thumb">
 * ------------------------------------------------------------
 */

#galleryContainer {
    position: relative;
    width: 598px;  /* 600px - 2px for borders that give sunken effect */
    height: 522px;  /* Height attribute set to fit the large image height plus ONE row
                     * of thumbnails, without overlaying text below.
                     */
    padding-left: 25px;  /* inside "sunken area" */
    margin-top: 25px;  /* outside and above the "sunken area" */
    margin-left: 52px;  /* outside and to left of the "sunken area" */
    line-height: 0;  /* Stop the floated thumbnails having a staircase effect due to
                      * imaginary linebreaks being interpreted after each block. See:
                      *   http://therelentlessfrontend.com/2010/02/11/css-menu-stepdown-issue/ */
}

/* Thumbnail-sized images only */
a.thumbnail img.size-thumbnail {
    float: left;
    width: 60px;
    height: 60px;
    padding: 4px;
    border: 1px solid #c30e0e;  /* VAF red */
    margin-top: 426px;  /* So row of thumbnails clears the large image */
    margin-right: 2px;  /* To separate thumbnails */
}

/* Error styling for image gallery */
div.imageError {
    position: absolute;
    top: 210px;
    left: 50px;
    z-index: 100;

    width: 520px;
    padding: 15px;
    background: #fff;
    color: red;
    border: 1px solid red;
}
div.imageError p {
    font-weight: bold;
    font-size: 1.0em;
}

/* Thumbnail-sized images only */
a.thumbnail img.size-thumbnail:hover {
    border: 1px solid #ff0000;  /* bright red */
}

/* Style the span containing the (hidden) enlarged image */
a.thumbnail span { 

    position: absolute;
    top: 0;
    left: -2000px;
    visibility: hidden;
    z-index: -1;

    text-align: center;  /* Center the large image whatever it's width */

    /* All images will be the same height but they will vary in width.
     * As the first image is always visible, but just hidden by the current
     * one, need to make sure the span's background is wide enough to cover
     * the intial image if it's wider than the current one */
    height: 384px;
    width: 571px;  /* Allows a 25px padding to the right within the "sunken area" 
                    * to match the 25px left-padding applied in "#galleryContainer" */
    background: #1f1f1f;  /* very dark grey - same as background - so initial image
                           * can't be seen if the current one is narrower */
    border: 1px solid #fff;
}

/* Enlarged image - display size is 563px x 376px (standard 3:2 ratio).  
 * Do NOT alter these sizes without testing on all browsers, because 1px makes the
 * difference between the image being perfectly centered on all browsers and being
 * 1px out (to the left or right!) on various browsers).
 * The uploaded images are all 400px high by a MAXIMUM of 600px wide */
a.thumbnail span img {
    max-width: 563px;  /* In case pic's ratio is mistakenly wider than 3:2 */
    height: 376px;  /* if alter this, must also alter 'a.thumbnail span' height 
                     * and '#galleryContainer' height and margin-top for
                     * 'a.thumbnail img.size-thumbnail' */
    padding-top: 4px;
    border-style: none;
    
    padding: 4px;
}

/* First image should always be visible (so that there is an initial image)
 * but will be covered by subsequent images (and their dark background if smaller!) */
a.thumbnail span.firstImg {
    visibility: visible;
    top: 25px;
    left: 25px; /* Amount by which enlarged image should be offset horizontally */
    z-index: 1;
}

/* Display (unhide) enlarged image on hover over small version */
a.thumbnail:hover span {
    visibility: visible;
    top: 25px;
    left: 25px; /* Amount by which enlarged image should be offset horizontally */
    z-index: 50;
}

/* Need this as WordPress SOMETIMES puts "<p>" tags around images! */
a.thumbnail p {
    display: inline;  /* Need this or the containing div goes full width */
    margin: 0;  /* Because WP arbitrarily adds para tags around images! */
}
/* Need this as WordPress SOMETIMES inserts "<br />" between multiple images! */
a.thumbnail br {
    display: none;
}


/* ------------------------------------------------------------
 * Table for presenting the products overview for a particular
 * product section.
 * ------------------------------------------------------------
 */

table.productsOverview {
    margin-top: 30px;
    margin-bottom: 25px;
    margin-left: auto;  /* Center table in content area */
    margin-right: auto;
}

table.productsOverview td.firstRow {
    padding-top: 26px;  /* Cannot apply padding to top level <table> element in
                         * <= IE7 so need to do it all in the <td> elements, hence
                         * create padding at top of table by padding top of items
                         * in the first row 
                         */
}
table.productsOverview td.firstCol {
    padding-left: 26px;  /* As above */
}
table.productsOverview td {
    width: 130px;  /* Same width as thumbnail images so text link below can't
                    * wider than the image */
    text-align: center;
    padding-right: 26px;   /* Create spacing between table columns */
}

table.productsOverview td.imgsRow {
    padding-bottom: 5px;  /* Space between base of images and caption */
}
table.productsOverview td.capsRow {
    padding-bottom: 21px;  /* Space below base of caption - looks better as 21 than 26 */
}

table.productsOverview a img {
    height: 130px;
    width: 130px;
}


/* ------------------------------------------------------------
 * Table for spec. for individual product
 * ------------------------------------------------------------
 */

table.productSpec th,
table.productSpec td
{
	padding: 1px 15px;
}
 
 
/* ------------------------------------------------------------
 * Misc.
 * ------------------------------------------------------------
 */
.clearFloats { clear: both; }

.error { color: red; }

img{
    line-height: 1em;  /* Otherwise if thumbnail (or full-sized) images can't be displayed,
                        * their alt text is illegible as each line renders on top of the 
                        * previous one (due to absolute positioning?)
                        */
}

/* ------------------------------------------------------------
 * Image styles
 * ------------------------------------------------------------
 */

/* Collage image for top of Contacts page */
#collageStrip {
    width: 718px;
    height: 87px;

    margin-top: 33px;

    padding: 4px;
    border: 1px solid #bcbcbc;  /* very pale grey */
}

img.aligncenter { 
    float: none; 
    margin: 15px 10px 15px 10px;
}
img.alignleft { 
    float: left;
    margin: 15px 10px 15px 0;
}
img.alignright { 
    float: right;
    margin: 15px 0 15px 10px;
}

img.aligncenter, 
img.alignleft,
img.alignright {
    padding: 5px;
    border: 1px solid #bcbcbc;
}


/* ------------------------------------------------------------
 * The main footer (not the footer inside the content panel).
 * Contains the copyright etc.
 * ------------------------------------------------------------
 */
#footer {
    float: right;
    text-align: right;
    font-size: 0.8em;
    padding: 4px 0 10px 0;
}