/*  =========================================================
Stylesheet für GRT Logistics
Datei:  styles.css
Media:  screen
Datum:  10. Juli 2014
Aufbau  1. Kalibrierung und allgemeine Styles 
        2. Styles für Layoutbereiche    
        3. Sonstige Styles 
========================================================== */

/* ====================================== 
   1. Kalibrierung und allgemeine Styles 
   ====================================== */

/* Kalibrierung der wichtigsten Abstände */
/*@import url("normalize.css");*/
/*@import url("gridpage.css");
@import url("genericons.css");*/


*{margin:0; padding:0;}
.clearing {clear:both;}

/* Allgemeine Selektoren */

html {overflow-y:scroll;} /* erzwingt Scrollbar im Firefox */
html {font-family:Helvetica, Arial, sans-serif; font-size:100%;}
body {font-size:14px; font-size:0.875rem; /*letter-spacing:1px; letter-spacing:0.0625rem;*/}
h1 {font-size:32px; font-size:2rem; font-weight:400; color:#999; line-height:120%; /*padding-top:1.5rem; padding-bottom:1.5rem;*/}
h2 {font-size:18px; font-size:1.125rem;font-weight:400; color:#666; line-height:120%;/*padding-top:1.5rem; padding-bottom:1rem;*/}
h3 {font-size:20px; font-size:1.25rem;}
p {font-size: 100%; font-weight:400; line-height:130%}
img {max-width:100%;height:auto;}
span {font-weight: 800;}

/* Hyperlinks */
a {text-decoration:none; outline:none;font-weight:400; font-size:100%;line-height:120%;} 
a:link {color:#666;} 
a:visited {color:#666;}
a:hover, a:focus{color:#B30B0E;}
a:active {color:#B30B0E}

/* Allgemeine Klassen und IDs */
.skiplink { 
   position: absolute; 
   left: -3000px; 
   top: -2000px; 
   width: 0px; 
   height: 0px; 
   overflow: hidden; 
   display: inline; 
}







@media screen and (min-width:769px) {
/*Version Desktop*/

nav[role="navigation"] {position: fixed; background-image:url(../images/grt_logo.gif); background-repeat: no-repeat; background-color:none; top: 0; left: 0; width: 148px;}
	
nav[role="navigation"] ul {margin:510px 0 0 0;	text-decoration: none;}

nav[role="navigation"] a { font-size:120%; text-decoration: none; outline: none; letter-spacing:0; padding:0 0 0 10px;} 
nav[role="navigation"] a:link {color:#999;} 
nav[role="navigation"] a:visited {color:#999;}
nav[role="navigation"] a:hover, a:focus {color:#F00;}
nav[role="navigation"] a:active  {color:#999;}

nav[role="navigation"] div.menubutton{display:none;}
nav[role="navigation"] ul#navlist_mobile {display:none;}


#buttonlist {
	position: fixed; background-color:none;
	top: 0;
	left: 0;
	width: 148px;
	height:100%;
	margin: 600px 0 0 0;
	padding:0 0 0 10px;
	}

#buttonlist li {display:inline;}

#infobox {
	position: fixed;
	top: 510px;
	right: -10px;
	width: 180px;
	background-color:#F00;
	border-radius: 10px;
	padding:10px;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 18px;
    font-style:normal;
	letter-spacing:+0,5px;
}


body{background:#FFF; background-image:url(../images/GRT_background.png); width:8000px; position:relative;}

header[role="banner"] {display:none;}
.wrap {}
main {}

section {
    float:left;
    height:514px;
    background:#FFF;
	margin-top:80px;
}

#start {width:208px; background:none;}

#oneprefix {width:283px; background:none; background-image:url(../images/start.gif); background-repeat:no-repeat; }

#one {width:800px;}
#one h1 {padding:50px 20px 25px 50px;}
#one p {font-size: 110%; font-weight:400; line-height:130%; padding-left:50px;width:500px;}
#one .imgpos {	padding:110px 0 0 250px; border-radius:10px;}

#twoprefix{width:283px; padding:0 0 0 217px; background-image:url(../images/europakarte500.png); background-repeat:no-repeat;}
#twoprefix h1{ padding:150px 10px 0 50px;}

#two {width:1300px;}
#two h1 {padding:50px 20px 25px 50px;}
.box{background-color:none; width:220px; padding:0; margin:70px 20px 0 0; float:left;}
.box_mov{background-color:none; width:448px; height:252px; padding:0 0 0 50px; margin:120px 20px 0 0; float:left;}

#two .box h2 {background-color:#ba9570; border-radius:10px; min-height: 70px; color:#FFF; font-size:140%; font-weight:400; padding:17px 0 17px 10px;}
#two .box p {padding:30px 0 0 10px;}

#threeprefix{width:283px; padding:0 0 0 217px; background-image:url(../images/section1.png); background-repeat:no-repeat;}
#threeprefix h1{ padding:350px 10px 0 50px;}
#three .box p {padding:30px 0 0 10px;}

#four {}
.box_kontakt{background-color:none; margin:70px 20px 0 0; float:left;}
.box_kontakt h1{ padding:70px 20px 0 250px; margin:0; max-width:300px;}
.box_kontakt p{padding:20px 20px 0 250px;margin:0;}



footer[role="contentinfo"] {background:#FFF; float:left; height:514px; margin-top:80px; color:#615E5E;	border-radius: 0 30px 30px 0;}
.footercontent {margin:70px 50px 0 0;}
.footercontent p {max-width:500px;}
/*Ende @media desktop*/
}





@media screen and (min-width:280px) and (max-width:768px) {
body{width:85%; max-width:none; background-image:url(../images/GRT_background.png); margin-right:auto; margin-left:auto; position:relative;}
h1 {line-height:110%;}

header[role="banner"] {/*box-shadow: 2px 2px 4px rgba(51,51,51,0.3);*/margin-top:12px; margin-bottom:12px;}
nav[role="navigation"] {position: fixed; background-color:#E7E2E2; top: 0; left: 0; width: 100%;}
nav[role="navigation"] ul  {text-decoration: none;padding:10px;}
nav[role="navigation"] li  {display:inline;}
nav[role="navigation"] a {font-size:120%; padding:10px 0 10px 10px; text-decoration: none; outline: none;} 

nav[role="navigation"] a:link {color:#999;} 
nav[role="navigation"] a:visited {color:#999;}
nav[role="navigation"] a:hover, a:focus {color:#F00;}
nav[role="navigation"] a:active  {color:#999;}

#navlist {display:none}

#buttonlist {position:fixed; top:50px; right:10px;}
#buttonlist li {texdecoration:none; display:inline;}

#infobox {position:fixed; bottom: 0; left:0; width: 100%; background-color:#F00; padding:10px; color:#FFF;font-size: 16px; font-style:normal; letter-spacing:+0.5px;}

section {background:#FFF;}

#oneprefix {display:none;}
#one {border-radius: 30px 30px 0 0; min-height:250px; background-image:url(../images/people_white_light.png); background-position:70% 0%; background-repeat:no-repeat; padding:20px;}
#one h1 {padding-top:130px; padding-bottom:17px;}
#one p {padding-bottom:10px;}

#twoprefix{min-height:250px; background-image:url(../images/europakarte_240light.png); background-position:80% 0%; background-repeat:no-repeat;}
#twoprefix h1 {padding:100px 20px 0px 30px;}

#two {padding:0px 20px 0 20px; }
#two h1 {padding:50px 20px 25px 50px;}
.box{}
.box_mov{max-width:100%; height:auto; padding:20px 0 20px 0;}

#two .box h2 {background-color:#ba9570; border-radius:10px; min-height:70px; color:#FFF; font-size:140%; font-weight:400; letter-spacing:0.5px; letter-spacing:0.03125rem; padding:17px 0 17px 10px;}
#two .box p {padding:10px 10px 20px 10px;}

#threeprefix{min-height:200px; padding:0px 20px 0 20px; background-image:url(../images/fussballer_light.png); background-position:70% 0%;  background-repeat:no-repeat;}
#threeprefix h1{padding:120px 20px 0px 30px;}

#three .box {padding:20px;}
#three .box p {padding:10px 0 0 10px;}

#four {border-radius: 0 0 30px 30px; margin-bottom:20px;padding-top:30px;}
.box_kontakt{padding:20px;}
.box_kontakt h1{ padding:20px 0 20px 0;}
.box_kontakt p{}

footer[role="contentinfo"] {}
.footercontent {margin:0 0 50px 0;}

} /*Ende @media mobile*/