html {
 width:96%;
 max-width:900px;
 margin:0 auto;
 font-size:100%;
}
body {
 /*
 background:linear-gradient(#F0FFFF, #FFFFF0, #E0FFFF, #ffffff);
 */
}

.beautiful {
 font-family: 'Tangerine', serif;
 font-size: 40px;
}

.h-align-left{
 text-align:left;
}
.h-align-right{
 text-align:right;
}
.h-align-center{
 text-align:center;
}
.h-color-white{
 color:#ffffff;
}
.h-color-teal{
 color:teal;
}

.trirong {
 font-family: 'Trirong', serif;
 font-size: 18px;
}

a {
 text-decoration:none;
}
a:hover {
 text-decoration:underline;
}

#header {
 background:url(../img/lamps_white.png); 
 background-repeat:no-repeat; 
 background-position:right;
 background-size: 300px 190px;
 height:auto; 
 min-height:100px;
 text-align:left;
}

#header.bg2 {
 background:url(../img/caffeine2.png); 
 background-repeat:no-repeat; 
 background-position:right top;
 background-size: 250px 190px;
 height:auto; 
 min-height:100px;
 text-align:left;
}

#header.bg3 {
 background:url(../img/chromatogram2.png); 
 background-repeat:no-repeat; 
 background-position:right top;
 background-size: 350px 190px;
 height:auto; 
 min-height:100px;
 text-align:left;
}

#header.bg4 {
 background:url(../img/europe.png); 
 background-repeat:no-repeat; 
 background-position:right top;
 background-size: 240px 190px;
 height:auto; 
 min-height:100px;
 text-align:left;
}

#header.bg5 {
 background:url(../img/pavel_dallakian.png); 
 background-repeat:no-repeat; 
 background-position:right top;
 background-size: 150px 190px;
 height:auto; 
 min-height:100px;
 text-align:left;
}

#header.bg6 {
 background:url(../img/apple2.png); 
 background-repeat:no-repeat; 
 background-position:right top;
 background-size: 260px 190px;
 height:auto; 
 min-height:100px;
 text-align:left;
}

#header.bg7, div.bg7 {
 background:url(../img/graphical_abstract.png); 
 background-repeat:no-repeat; 
 background-position: right;
 background-size: 30%;
 height:auto; 
 min-height:220px;
 text-align:left;
 padding-right:32%;
}

/*
#header:hover{
 background-position:left;
 text-align:center;
}
*/
#header span {display:block;}

div.sort{
 background:url(../img/sort.png); 
 background-repeat:no-repeat; 
 background-position:left;
 background-size: 150px 125px;
 text-align:right;
 padding-left:100px;
}

div.about{
 background:url(../img/apple.png); 
 background-repeat:no-repeat; 
 background-position:left;
 background-size: 25%;
 text-align:right;
 padding-left:25%;
}

div.about2{
 background:url(../img/apple.png); 
 background-repeat:no-repeat; 
 background-position:right;
 background-size: 250px 200px;
 text-align:left;
 padding-right:250px;
}

div.aboutFlame{
 background:url(../img/jchi.png); 
 background-repeat:no-repeat; 
 background-position:right;
 background-size: 20%;
 text-align:justify;
 padding-right:25%;
}

div.networking{
 background:url(../img/networking.png); 
 background-repeat:no-repeat; 
 background-position:left;
 background-size: 30%;
 text-align:right;
 padding-left:30%;
}

div.tools{
 background:url(../img/lamps.png);
 background-repeat:no-repeat; 
 background-position:right;
 background-size: 30%;
 text-align:left;
 padding-right:30%;
}

div.oncourse{
 background:url(../img/map.png); 
 background-repeat:no-repeat; 
 background-position:right;
 background-size: 30%;
 text-align:left;
 padding-right:30%;
}

div.cheminformatics{
 background:url(../img/caffeine.png);
 background-repeat:no-repeat; 
 background-position:left;
 background-size: 30%;
 text-align:right;
 padding-left:30%;
}

div.gcms{
 /* background:url(../img/gcms.png); */ 
 background:url(../img/chromatogram.png); 
 background-repeat:no-repeat; 
 background-position:right;
 background-size: 40%;
 text-align:left;
 padding-right:40%;
}

div.twt{
 background:url(../img/twt.png);
 background-repeat:no-repeat; 
 background-position:left;
 background-size: 15%;
 text-align:right;
 padding-left:30%;
}

div.new{
 background:url(../img/twtjs.png);
 background-repeat:no-repeat; 
 background-position:right;
 background-size: 15%;
 text-align:left;
 padding-right:15%;
}

div.links{
 background:url(../img/apple.png);
 background-repeat:no-repeat; 
 background-position:left;
 background-size: 30%;
 text-align:right;
 padding-left:30%;
}

div.twitter{
 background:url(../img/twitter.png); 
 background-repeat:no-repeat; 
 background-position:left;
 background-size: 150px 150px;
 text-align:right;
 padding-left:50%;
 height:400px;
 /* https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/ */
 overflow-y:scroll;
 -webkit-overflow-scrolling: touch;
}


div.project {
 display:inline-block;
 width:400px;
 vertical-align:top;
}

#projects {
		
}
span.info {
 background:url(../img/con_info.png);
 background-repeat:no-repeat;
 background-position:left;
 padding-left:22px;
}
ul.spirale {
 list-style-image: url('../img/spirale.png');
}
img#dragMe{

}
.spacex{
 margin-right:10px;
}

/* http://stackoverflow.com/questions/22492498/css-resize-zoom-in-effect-on-image-while-keeping-dimensions */
.img-wrapper{
 display:inline-block;
 overflow:hidden;
}
.img:hover{
 transform:scale(1.5,1.5);
}