@import(url:'https://fonts.googleapis.com/css?family=Cutive+Mono');
@import
url(http://fonts.googleapis.com/css?family=Lora:300,400,400italic,700,700italic);



@font-face {
  font-family: 'Cutive';
  font-style: normal;
  font-weight: 400;
  src: url(./fonts/Cutive.ttf);
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(./fonts/Roboto.ttf);
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(./fonts/Roboto-Medium.ttf);
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url(./fonts/Roboto-Light.ttf);
}

html * {
    padding:0;
    margin:0;
    border:0;
    line-height:1.5em;
}

body{
    color: #555;
    font: normal 14px 'Lora', Cutive; // Roboto;
    background: #fafafa; //#F2F4F7; //#000 url('./back.jpg') 50% -200px no-repeat;
   // background-color: #D1BCC0;
}

a{
   color: #555;
}

#wrapper{
   margin-left:auto;
   margin-right: auto;
   width: 650px;
   min-height: 500px;
//   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
//   border: 1px solid #aaa;
//   border-top:0;border-bottom: -1px;
   margin-top:100px; 
   margin-bottom:0;
//   background-color: rgba(252,252,252,1); //#FCFCFC;
   position: relative;
}

#header{
    position: absolute;
    top:0;
//   background: #F1F1F1; 
    color: #9ED44B;
    font-size: 1.5em;
    width: 758px;
    padding: 10px;
    padding-left: 40px;
    padding-right:0;
    margin-left:2px;
}

#wrapper2{
    margin-left: 100px;
}

#main{
}

#sidebar{
    width: 100px;
    border-right: 1px solid #ccc;
    text-align: left;
    float: left;
    font: 300 18px Cutive; //Roboto;
    font-size: 18px;
    color: rgb(38,38,38);
    padding-top: 30px;
//    background:#FAF6EA; 
    margin-bottom:0;
    position: absolute;
    top:0; bottom:0; 
}

#sidebar img{
    width: 95px;
    padding: 0px;
    border: 1px solid #fff;
    border-radius: 3px;
    background: #ddd;
}

#photo{
    padding-right: 40px;
    margin-bottom: 20px;
}

#name{
    padding:5px;
    padding-right: 40px;
    margin-bottom: 30px;
    color: #555;
 //   background: #aaa; 
    text-transform: lowercase;
    font-size: 18px;
    //font-weight: bold;
  //  text-shadow: 1px 1px #777;
    writing-mode: vertical-lr;
    text-orientation: upright;
}

#name:hover{
//    text-shadow: 1px 1px #333;
}
#menu{
    list-style-type: none;
    text-align: right;
    padding-top: 30px;
    font-size: 0.8em;
}

#menu li{
    line-height: 1.5em;
    padding-right: 36px;
    border-right: 0px solid #fdfdfd;
    margin-top: 2px;
}

#menu li a{
    text-decoration: none;
    color: rgb(100, 100, 100);
}

#menu li a:hover, #menu li.active a{
    color: #000;
}

/*
#menu li.active_h, #menu li.h:hover{
    border-right: 4px solid #60D277;
}
#menu li.active_r, #menu li.r:hover{
    border-right: 4px solid #D26079;
}

#menu li.active_t, #menu li.t:hover{
    border-right: 4px solid #6068D2;
}

#menu li.active_v, #menu li.v:hover{
    border-right: 4px solid #F2AE50;
}

#menu li.active_l, #menu li.l:hover{
    border-right: 4px solid #C7739E;
}



#menu li.active_h a, #menu li.h:hover a{
    color: #60D277;
}

#menu li.active_r a, #menu li.r:hover a{
    color: #D26079;
}
#menu li.active_t a, #menu li.t:hover a{
    color: #6068D2;
}
#menu li.active_v a, #menu li.v:hover a{
    color: #F2AE50;
}
#menu li.active_l a, #menu li.l:hover a{
    color: #C7739E;
}
*/

#menu li.active_h a, #menu li.active_r a, 
#menu li.active_t a, #menu li.active_v a,
#menu li.active_l a{
    font-weight: bold;
}

#content{
    margin: 40px;
    margin-right: 100px;
    color: #666;
    font: 300 14px 'Lora', Roboto;
    padding-top: 40px;
    line-height: 1.25em;
}

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

#content .box{
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
}

#content a{
   font-weight: 300;
   color: #CA4D4D;
}

#content a.pdf{
    color: #666;
}

#content a:hover{
   color: red;
}

#content h2{
    border-bottom: 1px solid #dadada;
    padding-bottom: 5px;
    margin-bottom: 12px;
    margin-top: 1.8em;
    font-size: 16px;
    font-weight: bold;
    color: #777;
    margin-right: 20px;
}

#content p{
    margin-bottom: 0.5em;
    margin-right: 20px;
}

#content p.coauthors a{
   font: 300 14px 'Lora', Roboto;
   color: #666;
}

#content p.coauthors a:hover{
   color: #111;
}

#content ul{
   list-style-type: none;
}

#content ol{
    margin-top: 1.5em;
    margin-left: 4em;
}


#content ul, #content ol {
   margin-bottom: 0.5em;
}

#content li{
    margin-bottom: 0.5em;
}


/* subcontent */


#content b{
    font: 600 14px 'Lora', Roboto;
}
/*
#name .title_one{
    padding-left: 5px;
    background: #ccc;
    margin-right: -39px;
    padding-right: 39px;
    text-align: right;
}

#name .title_two{
    padding-right: 5px;
    background: #ccc;
    margin-left: -60px;
    padding-left: 60px;
    text-align: right;
}
*/

#content img.icon{
    width:40px;
    height:40px;
    margin-right:10px;
    margin-bottom: -15px;
}


/* -----
SVG Icons - svgicons.sparkk.fr
----- */

#content h2 svg.svg-icon {
  width: 2.5em;
  height: 2.5em;
  margin-bottom: -3px;
  margin-right: -50px;
  float: right;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #999;
}

.svg-icon circle {
  stroke: #999;
  stroke-width: 1;
}

div.cadre{
    padding: 10px;
    padding-left: 15px;
  //  background: #F5F5F5;
}

#wrapfoot{
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    margin-top: 4em;
    text-align: right;
}

#footer{
    margin-right: 0em;
    color: #A69285;
    text-transform: uppercase;
    font-size: 0.8em;
}

#footer span{
    padding: 5px;
    border-radius: 3px;
    border: 1px solid #ddd;
    background: #f7f7f7;
    position: relative;
    left: -12px; top: 7px;
}

img.links_img{
    width: 70px;
    float: left;
    border: 1px solid #999;
    padding:1px;
    margin-right: 10px;
    background: #fff;
}

#content .toggle h2{
    border-top: 1px solid #ddd;
    border-bottom:0;
    padding-top: 15px;
    margin-bottom:0;
    padding-bottom: 1px;
    margin-top: 15px;
}
.ten{
    color: #fff;
    padding: 7px;
    padding-top: 18px;
    padding-bottom: 20px;
    margin-right: 1em;
    display: inline;
    font-weight:normal;
    border-top: 1px solid #ddd;
    font-family: Cutive;
}

.one.ten{
    background: #00CC00;
}

.two.ten{
    background: #88CC00;
}

.three.ten{
    background: #CCCC00;
}
.four.ten{
    background: #CCAA00;
}
.five.ten{
    background: #CC6600;
}
.six.ten{
    background: #BB2200;
}
.seven.ten{
    background: #990000;
}
.eight.ten{
    background: #550000;
}
.nine.ten{
    background: #440000;
}
.teen.ten{
    background: #330000;
}

img.mathematician{
    width: 130px;
    float: right;
    margin-left: 3em;
    margin-top: -2em;
    margin-right: -4em;
    border: 1px solid #aaa;
    padding: 2px;
}

.cross{ opacity: 0.7;}