@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------------------------------------------*/
/* ----------------------CSS Reset------------------------------------------------- */
/*---------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration:none;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/*-----------------------------------------------------------------------------------*/
/* ----------------------Main------------------------------------------------- */
/*---------------------------------------------------------------------------------*/


a:link {
text-decoration:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
color: #444444;
}

a:visited {
text-decoration:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
color: #444444;
}

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

a img {
border: 0 none;
}

img {
height: auto;
}

img, object, embed {
max-width: 100%;
}


.hidden {
visibility:hidden;
line-height: 9999px;
overflow: hidden;
display:none;
}

body {
background-color: #fafafa;
padding: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 20px;
color: #444444;
margin: 0px;
overflow-y: scroll;
}

h1 {
margin-bottom:7%;
font-size: 30px;
}

h2 {
margin-left:-2px;
font-size: 30px;
}

h3 {
margin-bottom:5%;
font-size: 22px;
margin-left:-2px;
line-height:28px;
}

h4 {
margin-bottom:1%;
font-size: 16px;
}

p {
margin-bottom:6%;
margin-top:3%;
}

.adjust {
margin: 0 auto 0;
max-width: 1040px;
min-width: 628px;
overflow: hidden;
width: 100%;
}

/*-----------------------------------------------------------------------------------*/
/* ----------------------Header------------------------------------------------- */
/*---------------------------------------------------------------------------------*/

#header {
padding-left:40px;
padding-right:40px;
margin-bottom:2%;
}

header {
padding-left:40px;
padding-right:40px;
margin-bottom:2%;
}

.header_center {
padding-top: 15px;
padding-bottom: 15px;
}

#logo {
background-image:url(../img/logo_drugfacts.png);
height:40px;
width:190px;
float:left;
display:inline-block;
position:absolute;
opacity: 1;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}

#logo:hover {
background-image:url(../img/logo_drugfacts.png);
height:40px;
width:190px;
float:left;
display:inline-block;
position:absolute;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
 z-index: 0;
 background-position: left bottom;
}

#logo_hover {
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
 z-index: 100;
background-image:url(../img/logo_drugfacts.png);
height:40px;
width:190px;
float:left;
display:inline-block;
position:absolute;
background-position: left bottom;
}

#logo_hover:hover  {
-webkit-opacity: 0.80;
-moz-opacity: 0.80;
opacity: 0.80;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
 z-index: 100;
background-image:url(../img/logo_drugfacts.png);
height:40px;
width:190px;
float:left;
display:inline-block;
position:absolute;
background-position: left bottom;
}

/*

#logo:hover {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
opacity: 1;
background-position: left bottom;
}

*/

.clearfix {
clear: both;
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}

.navi {
padding-top:1%;
color:#949191;
}

.navi a {
color:#949191;
}

.navi a:hover {
color:#468295;
}

.navi > li {
float: right;
padding-left: 10px;
color:#949191;
}

.navi_active {
color:#468295;
}

/*-----------------------------------------------------------------------------------*/
/* ----------------------Content------------------------------------------------- */
/*---------------------------------------------------------------------------------*/

#content {
margin-left:40px;
margin-right:40px;
margin-top:10px;
}

#content_center {
margin-left:40px;
margin-right:40px;
margin-top:10px;
}

/*------------ Animation------------*/
@-webkit-keyframes hovering  {
0%		{top: -1.6em;}
50%		{top: 0em;}
100%	{top: -1.6em;}
}

@-moz-keyframes hovering  {
0%		{top: -1.6em;}
50%		{top: 0em;}
100%	{top: -1.6em;}
}

@-o-keyframes hovering  {
0%		{top: -1.6em;}
50%		{top: 0em;}
100%	{top: -1.6em;}}
}

@keyframes hovering  {
0%		{top: -1.6em;}
50%		{top: 0em;}
100%	{top: -1.6em;}
}


.drug_animation_heroin {
-webkit-animation: 3s ease 0s normal none infinite hovering;
-moz-animation: 3s ease 0s normal none infinite hovering;
-o-animation: 3s ease 0s normal none infinite hovering;
animation: 3s ease 0s normal none infinite hovering;
margin-top: 7%;
z-index: 999;
position: relative;
float:left;
margin-right:0.9%;	
width:17%;
}

.drug_animation_kokain {
-webkit-animation: 2s ease 0s normal none infinite hovering;
-moz-animation: 2s ease 0s normal none infinite hovering;
-o-animation: 2s ease 0s normal none infinite hovering;
animation: 2s ease 0s normal none infinite hovering;
margin-top: 8%;
z-index: 999;
position: relative;
float:left;
margin-right:0.9%;	
width:15%;
}

.drug_animation_alkohol {
-webkit-animation: 4s ease 0s normal none infinite hovering;
-moz-animation: 4s ease 0s normal none infinite hovering;
-o-animation: 4s ease 0s normal none infinite hovering;
animation: 4s ease 0s normal none infinite hovering;
margin-top: 8%;
z-index: 999;
position: relative;
float:left;
margin-right:0.9%;	
width:13%;
}

.drug_animation_amphetamine{
-webkit-animation: 5s ease 0s normal none infinite hovering;
-moz-animation: 5s ease 0s normal none infinite hovering;
-o-animation: 5s ease 0s normal none infinite hovering;
animation: 5s ease 0s normal none infinite hovering;
margin-top: 9%;
z-index: 999;
position: relative;
float:left;
margin-right:0.9%;	
width:11.5%;
}

.drug_animation_tabak {
-webkit-animation: 1.5s ease 0s normal none infinite hovering;
-moz-animation: 1.5s ease 0s normal none infinite hovering;
-o-animation: 1.5s ease 0s normal none infinite hovering;
animation: 1.5s ease 0s normal none infinite hovering;
margin-top: 10%;
z-index: 999;
position: relative;
float:left;
margin-right:0.7%;	
width:10.5%;
}

.drug_animation_cannabis {
-webkit-animation: 5.5s ease 0s normal none infinite hovering;
-moz-animation: 5.5s ease 0s normal none infinite hovering;
-o-animation: 5.5s ease 0s normal none infinite hovering;
animation: 5.5s ease 0s normal none infinite hovering;
margin-top: 11%;
z-index: 999;
position: relative;
float:left;
margin-right:0.9%;
width:9%;
}

.drug_animation_lsd {
-webkit-animation: 2.5s ease 0s normal none infinite hovering;
-moz-animation: 2.5s ease 0s normal none infinite hovering;
-o-animation: 2.5s ease 0s normal none infinite hovering;
animation: 2.5s ease 0s normal none infinite hovering;
margin-top: 12%;
z-index: 999;
position: relative;
float:left;
margin-right:0.9%;	
width:7.5%;
}

.drug_animation_ecstasy {
-webkit-animation: 1s ease 0s normal none infinite hovering;
-moz-animation: 1s ease 0s normal none infinite hovering;
-o-animation: 1s ease 0s normal none infinite hovering;
animation: 1s ease 0s normal none infinite hovering;
margin-top: 13%;
z-index: 999;
position: relative;
float:left;
width:6%;
}

.drugs_overview {
margin-bottom:7%;
}

/* ------------Heroin----------------*/

.overview_heroin {
background-color: #a12903;
margin-left:-40px;
margin-right:-40px;
}

/* ------------Kokain----------------*/

.overview_kokain {
background-color: #eb6003;
margin-left:-40px;
margin-right:-40px;
}

/* ------------Alkohol----------------*/

.overview_alkohol {
background-color: #e4c912;
margin-left:-40px;
margin-right:-40px;
}

/* ------------Amphetamine----------------*/

.overview_amphetamine {
background-color: #235379;
margin-left:-40px;
margin-right:-40px;
}

/* ------------tabak----------------*/

.overview_tabak {
background-color: #29273d;
margin-left:-40px;
margin-right:-40px;
}

/* ------------cannabis----------------*/

.overview_cannabis{
background-color: #007e49;
margin-left:-40px;
margin-right:-40px;
}

/* ------------LSD----------------*/

.overview_lsd{
background-color: #cd37cd;
margin-left:-40px;
margin-right:-40px;
}

/* ------------ecstasy----------------*/

.overview_ecstasy{
background-color: #00cdcd;
margin-left:-40px;
margin-right:-40px;
}

.overview {
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
 height: 200px;
 margin-top:0px;
 padding-top:0px;
 display:block;
 
}

.overview:hover {	
transition: all 0.5s ease-in-out;	
height: 240px;
margin-top:-10px;
padding-top:35px;
display:block;
}

.overview_content {
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
 width:100%;
}

.overview_content:hover {
transform: translate(3em,0);
-webkit-transform:translate(3em,0);
-moz-transform:translate(3em,0);
-ms-transform:translate(3em,0);
}

.overview_drug_info_name {
float:left;
display:block;
margin-top:7%;
margin-bottom:3%;
margin-left:2%;
margin-right:7%;
}

.overview_image{
float:left;
display:block;
margin-top:5%;
margin-bottom:5%;
}

.overview_image_number {
float:left;
display:block;
margin-top: 8%;
margin-left:6%;
}

.overview_image_number_2 {
float:left;
display:block;
margin-top: 8%;
margin-left:8.5%;
}

.overview_drug_info_name a{
color: #fafafa;
line-height: 40px;
}

.overview_drug_info_1 {
font-size:14px;
color: #5a1600;
float:left;
display:block;
margin-top:6.5%;
margin-bottom:3%;
margin-left:8%;
}

.overview_drug_info_1 li {
line-height:20px;
}

.overview_drug_info_2 {
font-size:14px;
color: #fafafa;
float:left;
display:block;
margin-top:6.5%;
margin-bottom:3%;
margin-left:2%;
}


.overview_text {
 margin-top:0px;
 padding-top:0px;
 display:block;
 background-color: #dedede;
 margin-left:-40px;
 margin-right:-40px;
}

.overview_text_1 {
 margin-top:0px;
 padding-top:0px;
 padding-bottom:4%;
 display:block;
 background-color: #e9e9e9;
 margin-left:-40px;
 margin-right:-40px;
}

.overview_text_col_1 {
width:51%;
float:left;
display:inline-block;
margin-top:7%;
margin-bottom:3%;
margin-left:2%;
margin-right:7%;
}

.overview_text_col_2 {
width:35%;
float:left;
display:inline-block;
margin-top:7%;
margin-bottom:3%;
margin-left:2%;
}

.overview_text_content {
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out;
 transition: 0.5s ease-in-out;
}

.overview_text_content:hover {
transform: translate(3em,0);
-webkit-transform:translate(3em,0);
-moz-transform:translate(3em,0);
-ms-transform:translate(3em,0);
}

.text_content_hl {
margin-top:10%;
}

.abgerufen {
color: #949191;
font-style:italic;
}


/*-----------------------------------------------------------------------------------*/
/* ----------------------Footer------------------------------------------------- */
/*---------------------------------------------------------------------------------*/

#footer {
bottom: 0;
width:100%;
position: fixed;
margin-top:4%;
margin-bottom:0px;
padding-left:40px;
padding-right:40px;
padding-top:20px;
padding-bottom:0px;	
background-color: #f4f4f4;
}

footer {
bottom: 0;
width:100%;
position: fixed;
margin-top:4%;
margin-bottom:0px;
padding-left:40px;
padding-right:40px;
padding-top:20px;
padding-bottom:0px;
background-color: #f4f4f4;
}

#footer_normal {
margin-top:4%;
margin-bottom:0px;
padding-left:0px;
padding-right:0px;
padding-top:20px;
padding-bottom:40px;	
background-color: #f4f4f4;
width:100%;
}

.footer_center {
min-width:890px;
}

#footer_text {
text-align: center;
font-size: 12px;
padding-top: 5px;
color: #bababa;
}

#footer_text a {
color: #bababa;
}

#footer_text a:visited {
color: #bababa;
}

#footer_links {
 text-align: center;
}

#drugfacts_info{
padding-left:4%;
}

.trenner {
margin-top:-10px;
width:1px;
background-color:#d5d4d4;
height:160px;
float:left;
}

#show_info {
display:inline-block;
background-image:url(../img/show_info.png);
height:27px;
width:32px;
margin-bottom:1.2%;
cursor:pointer;
}

#show_info:hover {
background-position: left bottom;
}

#info_text {
display:inline-block;
padding-top:40px;
line-height:18px;
font-size:14px;
padding-left:18%;
padding-bottom:0px;
color:#949191;
}


.col1 {
float:left;
}

.col2 {
margin-left:68%;
margin-right:7%;
}
.col2_property {
margin-left:58%;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
 .col2_property  { margin-left:145%; }
 .col2 { margin-left:150px; margin-right:30px;}
}

#buttons_show_sort {
padding-top:20px;
padding-left:5%;
padding-right:5%;
float:left;
}

#button_show_text{
background-image:url(../img/show_text.png);
margin-bottom:40%;
height:27px;
width:44px;
display:block;
}

#button_show_text:hover {
background-position: left bottom;
}

#button_sort_bubbles{
background-image:url(../img/sort_bubbles.png);
height:27px;
width:28px;
display:block;
margin-left:8px; 
}

#button_sort_bubbles:hover {
background-position: left bottom;
}

#drugs_choice {
padding-left:5%;
padding-right:5%;
float:left;
}

#drugs_choice_heroin {
background-image:url(../img/drug_numbers_1.png);
margin-bottom:10px;
height:27px;
width:91px;
display:block;
padding-left:33px;
background-repeat:no-repeat;
}

#drugs_choice_heroin:hover {
background-position: left bottom;
}

#drugs_choice_kokain {
background-image:url(../img/drug_numbers_2.png);
margin-bottom:10px;
height:27px;
width:91px;
display:block;
padding-left:33px;
background-repeat:no-repeat;
}

#drugs_choice_kokain:hover {
background-position: left bottom;
}

#drugs_choice_alkohol {
background-image:url(../img/drug_numbers_3.png);
margin-bottom:10px;
height:27px;
width:91px;
display:block;
padding-left:33px;
background-repeat:no-repeat;
}

#drugs_choice_alkohol:hover {
background-position: left bottom;
}

#drugs_choice_amphetamine {
background-image:url(../img/drug_numbers_4.png);
margin-bottom:10px;
height:27px;
width:91px;
display:block;
padding-left:33px;
background-repeat:no-repeat;
}

#drugs_choice_amphetamine:hover {
background-position: left bottom;
}

#drugs_choice_tabak {
background-image:url(../img/drug_numbers_5.png);
margin-bottom:8px;
height:27px;
width:28px;
display:block;
padding-left:33px;
background-repeat:no-repeat;
}

#drugs_choice_tabak:hover {
background-position: left bottom;
}

#drugs_choice_cannabis {
background-image:url(../img/drug_numbers_6.png);
margin-bottom:10px;
height:27px;
width:28px;
display:block;
padding-left:33px;
background-repeat:no-repeat;
}

#drugs_choice_cannabis:hover {
background-position: left bottom;
}

#drugs_choice_lsd {
background-image:url(../img/drug_numbers_7.png);
margin-bottom:10px;
height:27px;
width:28px;
display:block;
padding-left:33px;
background-repeat:no-repeat;
}

#drugs_choice_lsd:hover {
background-position: left bottom;
}

#drugs_choice_ecstasy {
background-image:url(../img/drug_numbers_8.png);
margin-bottom:10px;
height:27px;
width:28px;
display:block;
padding-left:33px;
background-repeat:no-repeat;
}

#drugs_choice_ecstasy:hover {
background-position: left bottom;
}

#drugs_properties {
padding-left:5%;
padding-right:5%;
float:left;
}

.drugs_property {
background-image:url(../img/property.png);
margin-bottom:10px;
height:27px;
width:91px;
display:block;
padding-left:33px;
background-repeat:no-repeat;
background-position: left bottom;
}

.drugs_property:hover {
background-position: left top;
}

.bubble_right {
padding-left:12%;
}

.bubble_content_max {
-webkit-animation: 3.5s ease 0s normal none infinite hovering;
-moz-animation: 3.5s ease 0s normal none infinite hovering;
-o-animation: 3.5s ease 0s normal none infinite hovering;
animation: 3.5s ease 0s normal none infinite hovering;
position: relative;
}

.bubble_content_pascal {
-webkit-animation: 3s ease 0s normal none infinite hovering;
-moz-animation: 3s ease 0s normal none infinite hovering;
-o-animation: 3s ease 0s normal none infinite hovering;
animation: 3s ease 0s normal none infinite hovering;
position: relative;
}

.bubble_content_nico {
-webkit-animation: 4s ease 0s normal none infinite hovering;
-moz-animation: 4s ease 0s normal none infinite hovering;
-o-animation: 4s ease 0s normal none infinite hovering;
animation: 4s ease 0s normal none infinite hovering;
position: relative;
margin-bottom:7%;
}

.bubble_profil {
margin-left:6%;
}

.bubble_profil_text {
float:left;
padding-left:6%;
display:inline-block;
padding-top:17%;
}

/*-----------------------------------------------------------------------------------*/
/* ----------------------1024x768------------------------------------------------- */
/*---------------------------------------------------------------------------------*/

@media handheld, only screen and (max-width: 1025px) {

	.content_center {
		-webkit-transform: scale(0.85);
		-moz-transform: scale(0.85);
		-ms-transform: scale(0.85);
		-o-transform: scale(0.85);
		transform: scale(0.85);
	}
	
	
}