/*
Title: Fallt master stylesheet for screen media. Montpellier Version. (September 2007)
Authors: Christian Lange + Nicholas Kove.
Thank you: Christopher Murphy, Nicklas Persson and W. Conrad Rontgen.
Last Update: 22/09/07
*/


/*
Body and Layout
*/

body
{
margin: 0 20px;
padding: 0;
text-align: center;
font-family: 'Lucida Grande', Verdana, 'Trebuchet MS', Arial, sans-serif;
font-size: 12px;
line-height: 1.7;
color: #000;
background: #E8E7EC url("/assets/background_grey.gif") repeat-y;
background-position: center;
}

#container
{
margin: 0 auto;
padding: 0 0 40px 0;
width: 692px;
text-align: center;
border-bottom: #333 solid 4px;
background: #FFF;
}

#main-content
{
margin: 0 auto;
width: 640px;
text-align: left;
background: #FFF;
}

#header
{
margin: 30px 0 40px 0;
background: #FFF;
}

#title
{
margin: 0 0 20px 0;
background: #FFF;
}

#content
{
width: 420px;
float: left;
background: #FFF;
}

#widecontent
{
width: 640px;
background: #FFF;
}

#sidebar
{
width: 200px;
float: right;
background: #FFF;
}

#rule
{
clear: both;
margin: 20px 0 20px 0;
border-bottom: 1px solid #999;
}

#textnavigation
{
width: 420px;
float: left;
}

#search
{
width: 200px;
float: right;
}

#print
{
margin: 0 0 30px 0;
}

#print p
{
font-size: 12px;
line-height: 0.9;
color: #333;
}


/*
Be kind to Netscape! 
*/

p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd
{
font-family: 'Lucida Grande',  Verdana, 'Trebuchet MS', Arial, sans-serif;
font-size: 12px;
line-height: 1.7;
color: #000;
font-weight: normal;
}	


/*
Typography
*/

/*
Check the following rule!!
The <p> is covered in the body, lose it?
*/

p
{
font-family: 'Lucida Grande', Verdana, 'Trebuchet MS', Arial, sans-serif;
font-size: 12px;
line-height: 1.7em;
}

h1
{
font-weight: bold;
}

/*
Check the following rule!!
There are spans on the <h2>s for the format, yet there's no format class:
<h2><span class="format">Various Formats</span> | F.0000.0000</h2>
*/

h2
{
font-size: 11px;
line-height: 0;
color: #333;
}

/*
Check the following rule!!
Target this <h3> for the sidebar? This might free up the <h3> in the content div for further use.
*/

h3
{
font-weight: bold;
border-top: 1px solid #999;
padding-top: 4px;
border-bottom: 1px solid #999;
padding-bottom: 4px;
}	

/*
Check the following rule!!
Why? Because the <blockquote>s look shit. Possibly a shaded background? Gradient?
*/

blockquote
{
margin: 20px;
border-top: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}

code
{
font-family: Monaco, ProFont, "Bitstream Vera Sans Mono", "American Typewriter", "Andale Mono", monospace;
font-size: 12px;
color: #666;
}

/*
Links
*/

a:link
{
color: #C30;
text-decoration: none;
}

a:visited
{
color: #369;
text-decoration: none;
}

a:hover
{
color: #C30;
background-color: #F96;
}

a:active
{
text-decoration: underline;
}

/*

SORT THIS RULE OUT!

#main-content img a
{
text-decoration: none;
background-color: #FFF;
}

*/

/*
Area Specific Typography
*/

/*
Group the different div specific stylings together to make maintenance easier, e.g. all sidebar in one cluster, all textnavigation in one cluster, etc.
*/

/*
Take a look at the whole #sidebar h3s, there are three different rules, these could be streamlined.
*/

#sidebar h3
{
margin-top: 40px;
}

#sidebar .first
{
margin-top: 17px;
}

#sidebar ul
{
list-style-type: none;
padding: 0;
}

#sidebar .text li
{
background: url("../assets/furniture/list_pdf.gif") no-repeat 0 0.5em;
padding-left: 15px;
font-size: 11px;
line-height: 1.7; /* 1. Lose this 1.7? It's specified in body. 2. Do we need to specify the font-size at 11px? */
}

#sidebar li a
{
text-decoration: none;
}

#sidebar p /* Shift this up, then drop a few rules styling sidebar type. */
{
font-size: 11px;
color: #333;
}

#textnavigation p
{
font-size: 11px;
line-height: 1.8em;
color: #333;
}

.labelformat, cite
{
font-size: 11px;
color: #666;
font-style: normal;
}

.smallprint /* Merge with the above with a comma... */
{
font-size: 11px;
color: #333;
}


/*
Images
*/

/*
Take a look at all these image rules, they could possibly be simplified and common elements combined, e.g. border, float-left, etc.
*/

.floatimageleft
{
float: left;
padding: 5px;
margin: 6px 10px 5px 0;
border: 1px solid #CCC;
}

.promo
{
float: left;
padding: 5px;
margin: 5px 0 30px 0;
border: 1px solid #CCC;
}

.preview_img
{
float: left;
padding: 5px;
margin: 5px 10px 20px 0;
border: 1px solid #CCC;
}

.array_img	
{
float: left;
padding: 5px;
margin: 5px 10px 0 0;
border: 1px solid #CCC;
}

.imbecil
{
margin: 15px 0 15px 0;
}

.giclee
{
float: left;
margin: 5px 0 20px 0;
}

.uf
{
float: left;
margin: 7px 0 22px 0;
padding: 5px;
border: 1px solid #CCC;
}


/*
Lists
*/

ul
{
list-style-type: none;
padding: 10px;
}

ol
{
list-style-type: decimal-leading-zero;
}

#main-content ul
{
padding: 0;
}

ul li
{
background-color: #FFF; /* Is this necessary? */
}

#sidebar ul
{
list-style-type: none; /* Styled 11 lines above. */
padding: 0;
background-color: #FFF; /* Is this necessary? */
}

#sidebar ul li
{
background-color: #FFF; /* Is this necessary? */
background: url("../assets/furniture/list_cd.gif") no-repeat 0 0.5em;
padding-left: 15px;
font-size: 11px;
line-height: 1.7; /* Is this necessary? */
color: #333;
}
	
#designs ul
{
background-color: #FFF; /* Is this necessary? */
}

#designs li 
{
background-image: url(tinypage.gif);
background-position: 0 0.5em;
background-repeat: no-repeat;
padding-left: 20px;
/*
Replace the first three lines with this:
background: url("tinypage.gif") no-repeat 0 0.5em;
Also, where is this used?? I don't recall a #designs div.
*/
}


/*	
Navigation
*/

#nav
{
border-top: #333 solid 3px;
margin: 0 auto;
padding: 0;
text-align: left;
width: 692px;
height: 123px;
background-color: #000;
overflow: hidden;
}

#fallt_brand
{
padding: 0 0 0 26px;
margin: -11px 0 0 0;
float: left;
border: 0;
}

#nav li
{
margin: 0;
padding: 0;
overflow: hidden;
height: 19px;
background-color: #000;
}

#nav>ul
{
float: left;
text-align: left;
list-style: none;
margin: 0;
padding-top: 24px;
width: 66px;
}

#nav ul#zero
{
margin-left: 44px;
}

/* 
Thank you to Mr Leahy and Mr Langridge.
*/

#nav a,
#nav #nav_overview,
#nav #nav_works,
#nav #nav_resources,
#nav #nav_shop,
#nav #nav_register,
#nav #nav_404 
{
display: block;
padding: 19px 0 0 0;
background-repeat: no-repeat;
height: 0 !important;
height /**/:19px; /* For IE5/Win */  /* !! FIND OUT HOW/WHY THIS WORKS, KOVE ADDED IT.*/
}

#nav #nav_overview,
#nav #nav_works,
#nav #nav_resources,
#nav #nav_shop,
#nav #nav_register,
#nav #nav_404
{
background-position: 0 0;
/*border:1px solid #fff;*/  /* !! <- DELETE THIS? */
}

#nav a
{
background-position: 0 -19px;
}

#nav a:hover,
#nav a:active, 
#nav a.selected /* ???? */
{
background-position: 0 0;
background-color: #000;
}

#nav_overview
{
background-image: url(/assets/navigation/overview.gif);
}

#nav_artists a
{
background-image: url(/assets/navigation/artists.gif);
}

#nav_history a
{
background-image: url(/assets/navigation/history.gif);
}

#nav_press  a
{
background-image: url(/assets/navigation/press.gif);
}

#nav_works
{
background-image: url(/assets/navigation/works.gif);
}

#nav_catalogue a
{
background-image: url(/assets/navigation/catalogue.gif);
}

#nav_resources
{
background-image: url(/assets/navigation/resources.gif);
}

#nav_array a
{
background-image: url(/assets/navigation/array.gif);
}

#nav_audio a
{
background-image: url(/assets/navigation/audio.gif);
}

#nav_visual a
{
background-image: url(/assets/navigation/visual.gif);
}

#nav_shop
{
background-image: url(/assets/navigation/shop.gif);
}

#nav_indirect a
{
background-image: url(/assets/navigation/indirect.gif);
}

#nav_direct a
{
background-image: url(/assets/navigation/direct.gif);
}

#nav_register
{
background-image: url(/assets/navigation/register.gif);
}

#nav_subscribe a
{
background-image: url(/assets/navigation/subscribe.gif);
}

#nav_404
{
background-image: url(/assets/navigation/404.gif);
}

#nav_sitemap a
{
background-image: url(/assets/navigation/sitemap.gif);
}

#nav_href a
{
background-image: url(/assets/navigation/href.gif);
}


/*
Artists
*/

.artistslist
{
display: block;
width: 210px;
margin: 0;
padding: 0;
float: left;
}

.artistslist li
{
list-style: none;
margin: 0;
padding: 0;
font-size: 11px;
line-height: 1.5;
}


/*
HREF
*/

#hreflist
{
margin: 0;
padding: 0;
}

#hreflist li
{
margin: 0 24px 25px 0;
display: inline;
float: left;
list-style: none;
padding: 0;
}

#hreflist a img
{
border: 0;
}

#hreflist a:hover
{
background-color:#fff;
}


/*
Subscribe
*/

#subscribe
{
background-color: #f0f0f0;
padding: 10px 10px 15px 10px;
}

#submit
{
margin-top: 10px;
}

label
{
display: block;
}

#subscribe p
{
line-height: 1.3em;
}


/*
Sitemap
*/

.sitemap
{
width: 200px;
float: left;
margin-left: 10px;
}

.sitemap p
{
font-size: 11px;
}

.sitemap li
{
padding-left: 15px;
font-size: 11px;
background: #FFF url("/assets/furniture/bullet.gif") no-repeat 0 0.5em;
}

.last
{
margin-left: 0;
}


/*
Catalogue
*/

.catalogue_entry, .array_entry
{
margin-top: 40px;
clear: both;
height: 160px; /* This sets the height of both the catalogue and array entries. Try increasing it to add padding between items. */
}

#array_icons
{
clear: both;
margin-top: 40px;
}

#array_icons h2
{
margin-bottom:20px;
}

#array_icons .icon_img
{
float: left;
padding: 5px;
/* margin: 0 6px 5px 0; */ /* This was NK's w/ 10 icons across. */ 
margin: 0 12px 12px 0; /*This is CL's w/ 9 icons across. */
border: 1px solid #CCC;
}


/*
Sidebar Works
*/

/*
The following rules style the mini icons in the sidebar. Possibly shift them below the images section? Again, the 'float: left' and 'border: 1px solid #CCC' could be styled in one rule for all images with a border...
*/

#works
{
margin-bottom: 5px;
}

#works img
{
float: left;
margin: 0 10px 10px 0;
padding: 4px;
border: 1px solid #CCC;
}

#works .right
{
margin-right: 0;
}

#works a:hover img
{
background: #CCC;
border: 1px solid #999;
}


/*
Things to take a look at... All images should have a consistent border style (border: 1px solid #CCC;) and all images which are links should have a consistent hover state (background: #CCC; border: 1px solid #999;). These should all be style in one single rule.
*/

/*
All below added to style up the Fallt Direct page. Double check then merge with the above.
*/

/*
PayPal Styles
*/

#paypal
{
font-size: 12px;
line-height: 1.7;
color: #333;
}

#paypal h1
{
color: #000;
margin: 40px 0 20px 0;
padding-bottom: 1px;
border-bottom: 1px solid #CCC;
}

#paypal h2
{
margin: 0;
font-size: 11px;
line-height: 1.7;
font-weight: bold;
}

#paypal h3
{
font-size: 11px;
font-weight: normal;
margin: 0 0 10px 0;
border-top: 0;
border-bottom: 0;
}

#paypal a
{
margin: 20px 0 20px 0; /* Fix this! */
font-size: 11px;
text-decoration: none;
color: #C30;
}

#paypal a:link
{
color: #C30;
}

#paypal a:visited
{
color: #369;
}

#paypal a:hover
{
background-color: #F96;
}


/*
Array Styles
*/

#array
{
padding-top: 9px;
}

#array h1
{
font-weight: bold;
border-top: 1px solid #999;
padding-top: 4px;
border-bottom: 1px solid #999;
padding-bottom: 4px;
margin-bottom: 30px;
}

#array h2
{
font-size: 12px;
font-weight: bold;
color: #333;
}

#array h3
{
font-size: 11px;
font-weight: normal;
line-height: 0;
color: #999;
border: none;
}

#array ul
{
padding: 0;
}


/*
Smallprint
*/

#smallprint
{
margin-top: 25px;
border-top: 1px solid #CCC;
}

#smallprint p
{
font-size: 11px;
line-height: 1.8;
color: #333;
}