/* 
Title:		Main Stylesheet
Author: 	Pixelschupser - Mediendesign
URL:        http://www.pixelschupser-nw.de
*/

/* ==== Reset ==== */

* { padding : 0; margin : 0; }
html, body, div, h1, h2, h3, h4, p, a, span, ul, li {
    font-family : inherit;
    font-size : 100%;
    font-weight : normal;
    font-style : normal;
    text-align : left;
    text-decoration : none;
    list-style : none;
    background : transparent;
    padding : 0;
    margin : 0;
    border : 0 none;
    outline : 0 none;
    vertical-align : baseline;
}
:focus { outline : 0; }
::selection { color : #f5f1e9; background : #4d2b0f; }
::-moz-selection { color : #f5f1e9; background : #4d2b0f; }

/* ==== Base ==== */

html, body, #page {
    width : 100%;
    min-width : 960px;
    height : 100%;
}
body {
    font-family : 'MuseoSlab500', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background : #f5f1e9 url(../images/bg_white.jpg) repeat top center;
    position : relative;
    cursor : default;
}
body:before {
    content : "";
    width : 100%;
    height : 10px;
    position : fixed;
    top : -10px; left : 0;
    z-index : 100;
    box-shadow : 0px 0px 10px rgba(0,0,0,0.2);
    -webkit-box-shadow : 0px 0px 10px rgba(0,0,0,0.2);
    -moz-box-shadow : 0px 0px 10px rgba(0,0,0,0.2);
    -o-box-shadow : 0px 0px 10px rgba(0,0,0,0.2);
    -ms-box-shadow : 0px 0px 10px rgba(0,0,0,0.2);
}

/* ==== Typo Base & Related ==== */

@font-face {
    font-family : 'MuseoSlab500';
    src : url('../fonts/museo_slab_500-webfont.eot');
    src : url('../fonts/museo_slab_500-webfontd41d.eot?#iefix') format('embedded-opentype'),
          url('../fonts/museo_slab_500-webfont.woff') format('woff'),
          url('../fonts/museo_slab_500-webfont.ttf') format('truetype'),
          url('../fonts/museo_slab_500-webfont.svg#webfontZiSmpI8w') format('svg');
    font-weight : normal;
    font-style : normal;
}
@font-face {
    font-family : 'BebasNeueRegular';
    src : url('../fonts/BebasNeue-webfont.eot');
    src : url('../fonts/BebasNeue-webfontd41d.eot?#iefix') format('embedded-opentype'),
          url('../fonts/BebasNeue-webfont.woff') format('woff'),
          url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
          url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight : normal;
    font-style : normal;
}
@font-face {
    font-family : 'PacificoRegular';
    src : url('../fonts/Pacifico-webfont.eot');
    src : url('../fonts/Pacifico-webfontd41d.eot?#iefix') format('embedded-opentype'),
          url('../fonts/Pacifico-webfont.woff') format('woff'),
          url('../fonts/Pacifico-webfont.ttf') format('truetype'),
          url('../fonts/Pacifico-webfont.svg#PacificoRegular') format('svg');
    font-weight : normal;
    font-style : normal;
}
h1 { display : none; }
h2 {
    color : #f5f1e9;
    font-family : 'BebasNeueRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size : 72px;
    line-height : 72px;
    text-transform : uppercase;
    text-shadow : 0 1px 1px rgba(0,0,0,0.2);
    margin : 0 0 30px;
}
h3 {
    color : #4d2b0f;
    font-family : 'PacificoRegular', Georgia, Times, 'Times New Roman', serif;
    font-size : 36px;
    line-height : 42px;
    text-shadow : 0 1px 1px rgba(255,255,255,0.2);
    margin : 0 0 10px;
}
h4 {
    color : #f5f1e9;
    font-family : 'BebasNeueRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size : 36px;
    line-height : 36px;
    text-transform : uppercase;
    text-align : center;
    text-shadow : 0 1px 1px rgba(0,0,0,0.2);
}
p {
    color : #4d2b0f;
    font-size : 18px;
    line-height : 24px;
    text-shadow : 0 1px 1px rgba(255,255,255,0.2);
    margin : 0 0 20px;
}
a {
    transition : color .15s ease-in-out;
    -webkit-transition : color .15s ease-in-out;
    -moz-transition : color .15s ease-in-out;
    -o-transition : color .15s ease-in-out;
    -ms-transition : color .15s ease-in-out;
}

/* ==== Navigation ==== */

#navigation {
    position : fixed;
    top : 260px; left : 20px;
    z-index : 90;
}
#navigation li {
    margin : 0 0 20px;
    position : relative;
}
#navigation a {
    background : transparent url(../images/nav_bg.png) no-repeat 0 0;
    width : 20px;
    height : 20px;
    display : block;
    z-index : 10;
}
#navigation span { display : none; }
#navigation a .dot {
    width : 20px;
    height : 20px;
    position : absolute;
    top : 0; left : 0;
    z-index : 20;
}
#navigation a:hover .dot { display : block; }
#nav01 .dot { background : transparent url(../images/nav_blue.png) no-repeat center center; }
#nav02 .dot { background : transparent url(../images/nav_yellow.png) no-repeat center center; }
#nav03 .dot { background : transparent url(../images/nav_red.png) no-repeat center center; }
#nav04 .dot { background : transparent url(../images/nav_green.png) no-repeat center center; }
#nav05 .dot { background : transparent url(../images/nav_orange.png) no-repeat center center; }
#navigation .info {
    color : #f5f1e9;
    font-size : 14px;
    line-height : 20px;
    white-space : nowrap;
    background : #4d2b0f;
    height : 20px;
    padding : 5px 8px;
    position : absolute;
    top : -5px; left : 30px;
    z-index : 30;
    border-radius : 4px;
    -webkit-border-radius : 4px;
    -moz-border-radius : 4px;
    -o-border-radius : 4px;
    -ms-border-radius : 4px;
}
#navigation li:hover .info { display : block; }

/* ==== Sections Shared ==== */

.section {
    height : 1000px;
    position : relative;
    overflow : hidden;
}
.container {
    width : 960px;
    height : 600px;
    padding : 120px 0 0;
    margin : 0 auto;
    position : relative;
    z-index : 30;
}
.content { padding : 0 20px; }
.content p { width : 360px; }
.element { position : absolute; }
.circle {
    width : 240px;
    height : 160px;
    padding : 90px 0 0;
}
.blue { background : transparent url(../images/el_cycle_blue.png) no-repeat 0 0; }
.yellow { background : transparent url(../images/el_cycle_yellow.png) no-repeat 0 0; }
.red { background : transparent url(../images/el_cycle_red.png) no-repeat 0 0; }
.green { background : transparent url(../images/el_cycle_green.png) no-repeat 0 0; }
.sheet {
    background : #f5f1e9 url(../images/bg_white.jpg) repeat top center;
    width : 100%;
    height : 1000px;
    position : absolute;
    top : 720px; left : 0;
    z-index : 50;
    box-shadow : 0px 0px 10px rgba(0,0,0,0.2);
    -webkit-box-shadow : 0px 0px 10px rgba(0,0,0,0.2);
    -moz-box-shadow : 0px 0px 10px rgba(0,0,0,0.2);
    -o-box-shadow : 0px 0px 10px rgba(0,0,0,0.2);
    -ms-box-shadow : 0px 0px 10px rgba(0,0,0,0.2);
}
.button {
    width : 280px;
    height : 100px;
    padding : 40px 0 0;
    margin : 0 auto;
}
.button a {
    color : #f5f1e9;
    font-family : 'BebasNeueRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size : 24px;
    line-height : 32px;
    text-transform : uppercase;
    text-align : center;
    text-shadow : 0 1px 1px rgba(0,0,0,0.2);
    background : transparent url(../images/button.jpg) no-repeat 0 0;
    width : 280px;
    height : 30px;
    padding : 10px 0 20px;
    display : block;
}
.button a:hover {
    color : #4d2b0f;
    line-height : 34px;
    text-shadow : 0 1px 1px rgba(255,255,255,0.2);
}
.tip {
    color : #4d2b0f;
    font-family : 'PacificoRegular', Georgia, Times, 'Times New Roman', serif;
    font-size : 18px;
    line-height : 24px;
    text-align : center;
    background : transparent url(../images/button_tip.png) no-repeat 0 10px;
    height : 20px;
    padding : 10px 0;
}
.background {
    width : 100%;
    height : 100%;
    position : absolute;
    top : 0; left : 0;
    z-index : 10;
}

/* ==== First Section ==== */

#first { background : #29b1cc url(../images/bg_blue.jpg) repeat top center; }
#first .background { background : transparent url(../images/bg_first.png) no-repeat center 75px; }
#first .element {
    background : transparent url(../images/el_cycle_big.png) no-repeat 0 0;
    width : 480px;
    height : 400px;
    padding : 100px 0 0;
    top : 120px; left : 240px;
}
#first h2, #first h3, #first p { text-align : center; }
#first h3 { margin : 0 0 30px; }

/* ==== Second Section ==== */

#second { background : #e6af0b url(../images/bg_yellow.jpg) repeat top center; }
#second .background { background : transparent url(../images/bg_second.png) no-repeat center 110px; }
#second .green {
    top : 320px; left : 700px;
    z-index : 10;
}
#second .blue {
    top : 160px; left : 580px;
    z-index : 20;
}
#second .red {
    top : 340px; left : 500px;
    z-index : 30;
}

/* ==== Third Section ==== */

#third { background : #b32430 url(../images/bg_red.jpg) repeat top center; }
#third .background { background : transparent url(../images/bg_third.png) no-repeat center 100px; }
#third p {
    color : #f5f1e9;
    text-shadow : 0 1px 1px rgba(0,0,0,0.2);
}
#third .blue {
    top : 360px; left : 560px;
    z-index : 10;
}
#third .yellow {
    top : 260px; left : 720px;
    z-index : 20;
}
#third .green {
    top : 120px; left : 640px;
    z-index : 30;
}

/* ==== Fourth Section ==== */

#fourth { background : #99b31b url(../images/bg_green.jpg) repeat top center; }
#fourth .background { background : transparent url(../images/bg_fourth.png) no-repeat center 70px; }
#fourth .yellow {
    top : 330px; left : 480px;
    z-index : 10;
}
#fourth .blue {
    top : 250px; left : 680px;
    z-index : 20;
}
#fourth .red {
    top : 150px; left : 520px;
    z-index : 30;
}

/* ==== Fifth Section ==== */

#fifth { background : #e67417 url(../images/bg_orange.jpg) repeat top center; }
#fifth .background { background : transparent url(../images/bg_fifth.png) no-repeat center 0; }
#kontakt a {
    color : #4d2b0f;
    font-size : 14px;
    line-height : 20px;
    text-shadow : 0 1px 1px rgba(255,255,255,0.2);
    background : #e98f45;
    background : rgba(255,255,255,0.2);
    width : 220px;
    height : 40px;
    padding : 10px 0 10px 60px;
    margin : 0 0 20px;
    display : block;
    border-radius : 4px;
    -webkit-border-radius : 4px;
    -moz-border-radius : 4px;
    -o-border-radius : 4px;
    -ms-border-radius : 4px;
    transition : all .15s ease-in-out;
    -webkit-transition : all .15s ease-in-out;
    -moz-transition : all .15s ease-in-out;
    -o-transition : all .15s ease-in-out;
    -ms-transition : all .15s ease-in-out;
}
#kontakt a:hover {
    background : #eeb380;
    background : rgba(255,255,255,0.4);
}
#kontakt a, #kontakt a:hover {  background-repeat : no-repeat; }
#kontakt a#maps {
    background-image : url(../images/kontakt_maps.png);
    background-position : 14px 10px;
}
#kontakt a#mail {
    background-image : url(../images/kontakt_mail.png);
    background-position : 7px 12px;
}
#kontakt a#web {
    background-image : url(../images/kontakt_web.png);
    background-position : 8px 14px;
}
#socials li { float : left; }
#socials a {
    text-indent : -9999px;
    width : 40px;
    height : 40px;
    margin : 0 20px 0 0;
    display : block;
}
#socials #facebook { background : url(../images/kontakt_facebook.png) no-repeat 0 0; }
#socials #twitter { background : url(../images/kontakt_twitter.png) no-repeat 0 0; }