/*   *****************************************************
 *
 *   PLASTICISLAND.ORG
 *   Site of the Plastic Island project 
 *   An initiative of Eilander Architects
 *
 *   Presentation layer for screen and projection media
 *   Main stylesheet for able web devices
 *
 *   This should comply with Dutch web guidelines and
 *   W3C CSS2.1 standards.
 *   See: http://www.webrichtlijnen.nl/
 *   
 *   location: /presentation/screen.css
 *   version:  1.0
 *   date:     27/08/2009
 *   author:   VIZI | VORM GEVEN AAN INHOUD
 *
 *   *****************************************************
 */



/*   *****************************************************
 *
 *   CODING CONVENTIONS
 *
 *   - indent property-value pairs using double spaces;
 *   - place selectors, opening and closing brackets and
 *     property-value pairs on their own, separate lines;
 *   - use a consistent property order (as shown below);
 *   - use shorthand for font, border, padding, margin
 *     and background properties whenever possible;
 *   - use full six digit hex codes for colours;
 *   - work from general to specific (in order of
 *     increasing specificity);
 *   - avoid use of !important (preferably limited to
 *     Internet Explorer stylesheets only!);
 *   - use percentages to declare relative font sizes;
 *   - omit units when declaring line-heights as not to
 *     break inheritance of relative line-height.
 *
 */


/*   *****************************************************
 *
 *   CLEAN START
 */
body, h1, h2, h3, h4, h5, h6, p, blockquote, 
ul, ol, li, 
table, tr, th, td, 
form, fieldset, legend, button, 
div, object, img
{
  margin: 0;
  border: 0;
  padding: 0;
  list-style: none;
  font: normal 100%/1.5 'lucida grande','lucida sans unicode','calibri','geneva',arial,sans-serif;
  text-align: left;
  vertical-align: top;
}
input, select, textarea, button
{
  font: normal 100% verdana,geneva,arial,sans-serif;
}
table, td, th {
  border-collapse: collapse;
}



/*   *****************************************************
 *
 *   BASE TYPOGRAPHY
 *
 */
html
{
  font-size: 12px;
}
body
{
}

h1
{
}

h2
{
  margin-bottom: 1em;
  padding: 0 10px;
  color: #999999;
  font-size: 200%;
  line-height: 1;
}
h3
{
  margin-top: 1em;
  color: #333333;
  font-size: 150%;
  line-height: 1;
}
h4
{
  margin: 1.2em 0 .2em;
  font-size: 120%;
  line-height: 1.2;
}

#slider-3 h3
{
  color: #92313F;
}
#slider-4 h3
{
  color: #3865A7;
}

p
{
  color: #333333;
}

a
{
  color: #000000;
  text-decoration: none;
}
a:hover
{
  color: #000000;
  text-decoration: underline;
}

.slider ol
{
  margin: .5em 0;
}
.slider ol li
{
  margin: 0 0 .3em 15px;
  color: #333333;
  list-style: decimal inside;
}



/*   *****************************************************
 *
 *   COMMON CLASSES & TYPOGRAPHY
 *
 */
p#skiplinks
{
  position: absolute;
  top: -100000px;
}
p.morelink
{
}
#slider-1 p.morelink
{
  font-size: 120%;
}
p.morelink a
{
}
p.lead
{
  margin: .4em 0;
  font-size: 120%;
}

p.meta
{
  margin: .4em 0 .2em;
  color: #666666;
}
p.meta img
{
  vertical-align: baseline;
}


/*   *****************************************************
 *
 *   MAIN LAYOUT: CENTERING
 *
 */
.centerbox
{
  width: 801px;
  margin: 0 auto;
}
.slider
{
  background: url(images/bg-dotted-stripe.gif) 0 -2px repeat-y;
}
.wrapper
{
  position: relative;
  padding: 0 9px 0 10px;
}



/*   *****************************************************
 *
 *   MAIN LAYOUT: HEADER
 *
 */
#header
{
  margin: 0 0 3em;
  padding: 0 1px 0 0;
  background: url(images/bg-dotted-stripe.gif) 100% 100% repeat-y;
}
#header .wrapper
{
  background: url(images/bg-dotted-stripe.gif) 0 100% repeat-y;
}
#header h1
{
  padding: 20px 0 15px;
}
#header .buttons
{
  bottom: 20px;
}



/*   *****************************************************
 *
 *   MAIN LAYOUT: HEADER
 *
 */
#main
{
  padding: 0 1px 0 0;
  background: url(images/bg-dotted-stripe.gif) 100% -2px repeat-y;
}
#main:after
{
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  color: #FFFFFF;
}


/*   *****************************************************
 *
 *   MAIN LAYOUT: FOOTER
 *
 */
#footer
{
  clear: both;
  margin-top: 3em;
  background: url(images/bg-dotted-stripe.gif) 100% -2px repeat-y;
}
#footer .wrapper
{
  padding: 5px 10px 20px;
  background: url(images/bg-dotted-stripe.gif) 0 100% repeat-y;
}
#footer p
{
  font-size: 90%;
}
#footer p a
{
  text-decoration: underline;
}





/*   *****************************************************
 *
 *   GENERIC CONTENT BLOCK WITH LOGOS
 *
 */
.content-logos p img
{
  margin-bottom: 13px;
}




/*   *****************************************************
 *
 *   SLIDERS: IMAGE FLOWING
 *
 */
.slider .visual
{
  margin-bottom: 20px;
}



/*   *****************************************************
 *
 *   LARGE TYPE CONTENT BLOCK
 *
 */
#content-item-big h3
{
  margin-top: .6em;
  color: #555555;
  font-size: 300%;
  line-height: 1;
}
#content-item-big p
{
  margin: .4em 0;
  color: #999999;
  font-size: 250%;
  line-height: 1.2;
}
#content-item-big p.morelink
{
  margin: 0;
  font-size: 150%;
  line-height: 1.8;
}



/*   *****************************************************
 *
 *   BUTTONS
 *
 */
.buttons
{
  width: 130px;
  position: absolute;
  right: 9px;
  bottom: 0;
}
.buttons a
{
  display: block;
  width: 130px;
  text-decoration: none;
  background: url(images/bg-button-bottom.gif) 0 100% no-repeat;
  color: #888888;
}
.buttons a span
{
  display: block;
  width: 100px;
  padding: .2em 10px .3em 20px;
  background-repeat: no-repeat;
  text-align: right;
}
.buttons a.button-donate span
{
  background-image: url(images/bg-button-donate.gif);
}
.buttons a.button-newsletter span
{
  background-image: url(images/bg-button-newsletter.gif);
}
.buttons a.button-discuss span,
.buttons a.button-comment span
{
  background-image: url(images/bg-button-discuss.gif);
}
.buttons a.button-stats span
{
  background-image: url(images/bg-button-stats.gif);
}