/**
 * CSS Document - Rieff
 * By Komma Mediadesign
 * Jan 2013
 */

html{ height: 100%; }
body{ margin: 0; height: 100%; font-size: 13px; line-height: 1.538461538461538em; background: #EEF0F0; color: #6D767D; font-family:'Helvetica W02 Roman',arial,sans-serif; text-align: center; }
header{ margin: 0 0 120px 0; width: 100%; text-align: left; }
header, section, footer{ display: block; }
h1,h2 { font-family:'Helvetica W02 Bold',arial,sans-serif; font-weight: 400; }
img{ border: none; }

/* Global */
.container{ position: relative; margin: 0 auto; width: 960px; z-index: 100; }
.streamer{ margin: 80px 0 0; font-size: 2.142857143em; font-family:'GeorgiaProW02-LightItal',serif; line-height: 30px; z-index: 10; position: relative;}
.substreamer{ margin: 0 0 80px 0; color: #C93664; font-size: 1.142857143em; font-weight: 400;line-height: 1em;}
.bottom_shadow{ position: absolute; left: 0; bottom: -30px; width: 100%; height: 30px; background: url('/images/structure/sprite_rieff.png') 0 -10px; }
.clear{ clear: both; }
.counter{ display: inline-block; margin: 20px 0 50px; height: 10px; width: auto; }
.count{ display: block; float: left; margin: 0 5px; width: 10px; height: 10px; background: url('/images/structure/sprite_rieff.png') -420px -80px; }
.count.active{ background-position: -400px -80px;  }
.count:hover{ background-position: -400px -80px;}
.shape{ position: absolute; z-index: -1; background: url('/images/structure/sprite_rieff.png') no-repeat; }


/* Header */
.logo{ margin-top: 60px; width: 140px; height: 70px; }
.payoff{ margin: 20px 0 0 0; font-size: .928571429em; font-style: normal; text-transform: uppercase;  color: #B6BABE; }
header .streamer{ position: absolute; top: 7px; left: 300px; margin: 0; font-size: 1.857142857em;  }
header .snf{ display: block; position: absolute; top: -11px; right: 0; width: 100px; height: 100px;}
header .snf img{ display: block; }

/* Banner */
.banner{ position: relative; width: 940px; height: 400px; border: 10px solid #fff; background: #B6BABE; margin-bottom: 50px;   }
.banner .bottom_shadow{ left: -10px; bottom: -40px; }
.banner .shape{ left: 320px; bottom: -100px; width: 330px; height: 100px; background-position: -100px -600px; }

/* Content */
.content{ position: relative; padding: 70px 140px 70px 140px; width: 680px; background: #fff; font-size: 1.071428571em;  }
.content p{ text-align: left;}
.content h1{ margin: 0 0 50px 0; color: #C93664; font-size: 1.066666667em; text-transform: uppercase; letter-spacing: 0.5em; }
.content .shape.left{ bottom: 80px; left: -160px; width: 160px; height: 160px; background-position: -450px -600px; }
.content .shape.bottom{ bottom: -260px; left: 40px; width: 510px; height: 280px; background-position: -630px -600px; }

.content p{ width: 300px; float: left; margin-bottom: 1.538461538461538em;}
.content p.leftSide{ margin-right: 80px; }
.content a{ color:#C93664; }

/* Projects */
.projects{ position: relative; margin: 0 0 100px 0; width: 100%; font-size: 1.071428571em; }
.projects .description{ position: relative; top: -10px; z-index: 100; float: left; padding: 50px 30px 50px 30px; width: 240px; min-height: 400px; background: #FAFBFB;  text-align: left; ;  }
.projects .description .type{ color: #C93664; font-size: 1.066666667em; font-family:'GeorgiaProW02-LightItal',serif; text-transform: uppercase;  }
.projects .description h1{ margin: 0 0 30px 0; color: #C93664; font-size: 1.066666667em; text-transform: uppercase;  }
.projects .description .triangle{ position: absolute; left: 0; bottom: -40px; width: 300px; height: 40px; background: url('/images/structure/sprite_rieff.png') -70px -80px; }
.projects .description .right_shadow{ position: absolute; top:0; right:-20px;  width: 20px; height: 520px; background: url('/images/structure/sprite_rieff.png') -10px -60px; }
.projects .image{ position: relative; float: left; width: 640px; height: 480px; border: 10px solid #fff; background: #B6BABE;  }
.projects .image .bottom_shadow{ left: -310px; bottom: -40px; width: 960px; }
.projects .image .counterHolder{ position: absolute; left: -10px; bottom: -40px; height: 40px; width: 660px; z-index: 10; }

.visie{ margin-bottom: 100px;}
.visie .shape.right{ bottom: 80px; right: -160px; width: 160px; height: 160px; background-position: -640px -890px; }
.visie .shape.bottom{ bottom: -330px; left: 330px; width: 560px; height: 330px; background-position: -70px -770px; }


/* Call to action */
.cta{ margin: 40px 0 80px 0; font-size: 1.571428571em; font-family:'GeorgiaProW02-LightItal',serif; }
.cta .red, .cta .red a{ color: #C93664; }

/* Footer */
footer{ position: relative; width: 100%; padding: 60px 0 0 0; height: 290px; background: #4B575F; text-align: left; color: #C9CDCF; line-height: 1.428571429em; }
footer .shadow{ position: absolute; top: 0; left:0; width: 100%; height: 10px; background: url('/images/structure/footer_shadow.png') repeat-x; }
footer strong{ color:#FEFEFE; font-family:'GeorgiaProW02-LightItal',serif; font-weight: 400;}
footer h2{ margin: 0 0 20px 0; font-size: 1.142857143em; font-family:'GeorgiaProW02-LightItal',serif; font-weight: 400; color: #FEFEFE; }
footer .dataBlock{ float: left; width: 70px; height: 20px; }
footer .dataBlock a{ color:#C9CDCF;}
footer .dataBlock a:hover{text-decoration: none;}
footer .dataBlock.alt{ width: 120px; }

/* Komma */
a.komma-mediadesign{	display: block; margin: 50px 0 0 0; color: #C9CDCF;	 width: 200px; text-decoration: none; line-height: 1.2em}
a.komma-mediadesign:hover{ color: #FEFEFE; }
a.komma-mediadesign .type{ display: block; float: left;  width: 30px; height: 30px; }
a.komma-mediadesign .data{ display: block; margin-left: 10px; float: left; font-size: 0.9em;}

img.komma-mediadesign{	display: block; position: absolute;  }
.hover-holder{			position: relative; width: 30px; height: 30px; }
.hover-holder .hover{	display: none; z-index: 10; }

/* Background */
.bg{ position: absolute; top: 0; left:0; z-index: 1; width: 100%; height: 100%; }
.bg .header{ position: absolute; left: -200px; width: 1400px; height: 410px; background: url('/images/structure/sprite_rieff.png') -90px -150px; }


#photoGalleryFrame{ position: relative; width: 640px; height: 480px; overflow: hidden; }
#photoGalleryFrame ul{ position: absolute; left:0; top:0; width: 4480px; padding: 0; margin:0; }
#photoGalleryFrame li{ position: relative; float: left; list-style: none;}

#photoGalleryMenu ul{ padding: 0; }
#photoGalleryMenu li{ cursor: pointer; }