@charset "UTF-8";

/* 
========================================================
MRL notes: 
- class selector is a dot '.'
- descendant selector is a space ' '
- margin is outside; padding is inside 
    (margins can be -ve, padding can't be)
- margin: top right bottom left   <-- order 
If one of the above values are missing then: 
    left gets value of right,
    bottom gets value of top
    right gets value of top
========================================================
*/

html, body, div, span, 
h1, h2, h3, h4, p, blockquote, pre,
a, b, em, i, img, ol, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%; /* Does not appear to do anything. */
	font: inherit;   /* This is needed! */
	vertical-align: baseline;
}


body {
    background-color: #fefdf2; 
    margin: 0px; 
    padding: 0px;
}


div#wrapper { 
    /* This wraps around the entire menu and main contents and is used to cut off 
       the right hand side content if the browser window is less than this divs
       width. This is done using overflow: hidden.
       Otherwise if a user sets the browser window is too narrow the panoramic
       picture wraps to below the menu and looks even worse than a cut off
       right side.
       menu width  210 + 
       main width  720  
                   -----
                   930 
    So the wrapper needs to be just a bit wider than the above value. 
    */
    width: 1050px;
    padding: 0px;
    /* Use the top and left margins to move the entire page down and 
    to the right as much as you wish. */
    margin-top: 30px; 
    margin-left: 50px;
    overflow: hidden; 
}

div#menu { 
    /* There is only one div of class menu and this wraps 
       the top logo, the menu items, and the bottom curved image. 
       Rovings & Cardings = 18 ems wide  
    */
    width: 210px;   /* 210px width must be the same as the logo width */
    margin: 0px; 
    margin-bottom: 20px; 
    padding: 0px; 
    float: left; 
}

div#main { 
    width: 730px;      /* set width to a good bit wider than the top image. */ 
    margin: 0px;
    margin-left: 60px; /* Sets the separation of the menu and main div. */
    margin-bottom: 20px;
    padding: 0px; 
    float: left; 
}

/* TODO we might make this not a ID so we can use it more than once. */
div.bottom {
    margin-left:  30px;
    margin-right: 30px;
    clear: both; 
}

/* This is outside of and below the wrapper. */
div#footer { 
    border-top: solid 1px #ccc; 
    width: 100%;
    margin: 0px; 
    padding: 0px ; 
    text-align: center; 
    clear: both; 
}

/*  ===========================
    Spacings for basic elements
    =========================== */ 

h1 { padding-top: 20px; } /* padding top is not needed as p has a margin-top. */	
h2 { padding-top: 20px; }	

p { 
    margin-top: 12px;
    padding-bottom: 0px; 
    font-size: 100%; 
    line-height: 1.8em; 
} 

div#menu ul { 
    /* MRL changed from font-size: 123.1% as its too big; see also p. */
    /* div#menu ul { font-size: 123.1%; } */    /* 16pt */
    margin-right: 0px;
    margin-bottom: 10px;
    /* We pad-right the ul to move it a bit to the left so that 
       it is aligned under the neck of logo than the nose.
       It looks a bit better then. Note: same as in rightImage 
    This is the space between the image dot and the right edge of the ul.
    */ 
    padding-left: 0px;  /* We need this to be zero. */
    padding-right: 10px;    
}

div#menu ul li { 
    line-height: 2.0em; 
    text-align: right; 
    /* This padding-right should be similar to value of the ul padding. 
    It's the space between the end of the menu text and the dot image. */
    padding-right: 10px; 
    display: block; /* Needed to hide the left li dots. */
    /* The dot to the right of the menu items. */
    background: transparent url('base_images/Menu-Link-Background.png') 
        no-repeat right center; 
}


/* ----------------------------------------------------------------- */

div.rightImage { 
    /* This is a special div to make contained images right aligned. 
       It's only used for the bottom curved image at the bottom of the menu, 
       the code for which is in the library directory. */
    text-align: right;
    margin: 0px;
    padding-right: 10px;    /* same as in #menu ul */
}

img.HeadImage { 
    border: solid 1px #845f30; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-box-shadow:    2px 3px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.25);
    box-shadow:         2px 3px 5px #7f7f7f; 
    /* margin: 0 0 16px 50px; */ 
    /* margin: 0 auto 16px auto; */ 
}

img.printlogo { display: none; visibility: hidden; }

.float-left { 
    float: left; 
    width: 202px;
    margin:20px; 
    padding: 0px;
}

div.float-left p {
    margin-top: 4px;;
}

.float-right { float: right; }

img.float-left { 
    margin: 0 16px 16px 0; 
    border: solid 1px #845f30; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -moz-box-shadow:    1px 2px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.25);
    box-shadow:         1px 2px 5px #7f7f7f; 
}

img.float-right { 
    margin: 0 0 16px 16px; 
    border: solid 1px #845f30; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -moz-box-shadow:    1px 2px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.25);
    box-shadow:         1px 2px 5px #7f7f7f;
}

/* Required for image preview by Grakalic javascript. Added by MRL. */
#preview {
    /* color: #845f30; */ 
	position: absolute;
	display: none;
	border: 3px solid #845f30; /*  */
	color: black;         /* Color of the title text at the bottom. Was #fff */
	padding: 1px;       /* Padding is inside the border. */
	background: white;  /* Color of the padding region. */
}


/*  ==========================
    Fonts and their appearance 
    ========================== */

body { font-family: 'Lato'; }

h1, h2, h3, h4 { font-family: 'Copse'; }
h1 { color: #845f30; font-size: 227%; /* 30pt */ clear: both; }
h2 { color: #6d4c21; font-size: 182%; /* 24pt */ clear: both; }
h3 { color: #363636; font-size: 174%; /* 23pt */ clear: both; }
h4 { color: #363636; font-size: 174%; /* 23pt */ clear: both; }

div#menu ul li a { font-family: 'Copse'; }
div#menu ul { font-family: 'Copse'; }

table { font-family: 'Copse'; }  


a { 
    color: #656565; 
    text-decoration: none; 
    -webkit-transition:color 300ms ease-in; 
    -moz-transition:color 300ms ease-in; 
    -o-transition:color 300ms ease-in; 
    transition:color 300ms ease-in;
}

a:hover { color: #845f30; text-decoration: underline; }

blockquote { 
    clear: both; 
	quotes: none;
    padding: 12px; 
    font-family: 'Copse'; 
    font-style: italic; 
    border-top: solid 1px #845f30; 
    border-bottom: solid 1px #845f30; 
    width: 500px; 
    margin: 12px auto 16px auto; 
    line-height: 1.2em; 
}

blockquote:before, blockquote:after {
	content: '';
	content: none;
}

blockquote em { font-style: italic; font-weight: normal; color: #845F30; }

em, i { font-style: italic; }

strong, b { font-weight: bold; }

/* Tables */
table {
	border-collapse: collapse;
	border-spacing: 0;
    margin-bottom: 16px;
}

table thead th { 
    text-align: left; 
    vertical-align: bottom; 
    line-height: 1.4em; /* MRL added line-height to better space out the lines. */
    padding: 2px 10px 5px 10px; 
    color: #845f30; 
    border-right: solid 3px transparent; 
    border-bottom: solid 1px #aaa; 
}

table tbody td { 
    padding: 5px 10px 5px 10px; 
    line-height: 1.4em; /* MRL added line-height to better space out the lines. */
    font-weight: normal; 
    border-right: solid 3px transparent;  /* TODO why transp? */
    border-bottom: solid 1px #aaa; 
}