@bg-color:#213E4A;
@bg-bg-color : #355664;
@fg-color: #fcfcfc;
@shd-color: #333;
@a-color: #0196e3;

@aradius: 20px;
@fradius: 10px;
@slradius: 3px;
/* @gradient-top: #dadada; */
@gradient-top: #ccc;
@gradient-bottom: #eee;


@qt-color: desaturate(spin(@a-color, -60), 50%);

*{
    /* Universal reset: */
    margin:0;
    padding:0;
}

header,footer,
article,section,
hgroup,nav{
    /* Giving a display value to the HTML5 rendered elements: */
    display:block;
}

body{
    /* Setting the default text color, size, page background and a font stack: */
    color: @fg-color;
    background-color:@bg-bg-color;
    font-family: "Praxis LT", "Linux Biolium",  sans-serif;

    :lang(ja) {
        font-family: "IPAPGothic", "IPAGothic", "IPAPMincho", "IPAMincho", "Kochi Mincho", "東風明朝", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", "MS Mincho", "ＭＳ 明朝",  sans-serif;
    }
}

/* Hyperlink Styles: */

a, a:visited {
    color:@a-color;
    text-decoration:none;
    outline:none;

  img{
      border:none;
  }
  &:hover{
    text-decoration:underline;
  }

}


/* Headings: */

h1,h2,h3,h4{
    font-family: "Praxis LT", "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
    text-shadow:0 1px 1px black;
  a, a:visited {color: @fg-color;}


}

h1{

    /* The logo text */

    font-size:3.5em;
    padding:0.5em 0 0;
}

header
{
    padding-top: 20px;
    h1{}
    h3{
        margin:0 0 1em;
    }
    h2{
    letter-spacing:0.01em;
    }
}


h2{
    font-size:2.2em;
    font-weight:normal;
}

h3{
    /* The slogan text */
    font-size:2em;
    font-weight:normal;
}

h4{
    font-size:1.2em;
    font-weight:normal;
}

p{
    line-height:1.5em;
    padding-bottom:1em;
}

.line{
    /* The dividing line: */
    height:1px;
    background-color:#24404c;
    border-bottom:1px solid #416371;
    margin:1em 0;
    overflow:hidden;
}

article .line{
    /* The dividing line inside of the article is darker: */
    background-color:#15242a;
    border-bottom-color:#204656;
    margin:1.3em 0;
}

footer .line{
    margin:2em 0;
}

nav{
    /* fallback */
    background-color: @gradient-top;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
                                 from(@gradient-top), to(@gradient-bottom));
    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, @gradient-top, @gradient-bottom);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, @gradient-top, @gradient-bottom);
    /* IE 10 */
    background: -ms-linear-gradient(top, @gradient-top, @gradient-bottom);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, @gradient-top, @gradient-bottom);

    top:4em;
    top-margin:4em;

    border:1px solid @fg-color;

    -moz-box-shadow:0 1px 1px @shd-color;
    -webkit-box-shadow:0 1px 1px @shd-color;
    box-shadow:0 1px 1px @shd-color;

    ul li{
        display:inline;
        a, a:visited, span{
            color:#565656;
            display:block;
            float:left;
            font-size:1.25em;
            font-weight:bold;
            margin:5px 2px;
            padding:7px 10px 4px;
            text-shadow:0 1px 1px white;
            &:hover{
                text-decoration:none;
                background-color:#f0f0f0;
            }
        }
    }

}

/* The clearfix hack to clear the floats: */

.clear:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* The navigation styling: */

nav, article, nav ul li a, nav ul li span{
    /* Applying CSS3 rounded corners: */
    -moz-border-radius:@aradius;
    -webkit-border-radius:@aradius;
    border-radius:@aradius;
}


/* Article styles: */

#page{
    width:85%;
    min-width:400px;
    max-width:900px;
    margin:0 auto;
    position:relative;
}

article{

    background-color:@bg-color;
    margin:3em 0;
    padding:20px;

    h3{
        font-size:1.6em;
        padding-left: 0.5em; /* 1.5 * 0.5 = 0.54 */
    }
    h4{
        font-size:1.2em;
        padding-left: 1.67em; /* Should be twice the length for h3 */
    }



}

figure{
    display: table;

    border:3px solid #142830;
    float:right;
    /* max-width:500px; */
    /* max-height:300px; */
    margin-left:15px;
    /* overflow:hidden; */
    overflow:hidden;
        /*max-width:620px;*/
    max-width:75%;
    vertical-align: middle;
    -moz-border-radius:@fradius;
    -webkit-border-radius:@fradius;
    border-radius:@fradius;

    img{
        margin-bottom: -0.5 * @fradius;
        display: table-row;
    }
    figcaption{
        margin-top: 0.5 * @fradius;
        margin-bottom: 0.5em;
        margin-left: @fradius;
        display: table-caption;
        caption-side: bottom ;
    }
    &:hover{
        -moz-box-shadow:0 0 2px #4D7788;
        -webkit-box-shadow:0 0 2px #4D7788;
        box-shadow:0 0 2px #4D7788;
    }

    &.abstract{
        display: block;
    img{
        margin-bottom: -0.5 * @fradius;
        display: block;
    }

        /* max-width:300px; */
        /* max-height:150px; */
        max-width:300px;
        max-height:150px;
    }
}



figure img{
/*  margin-left:-60px; */
}

/* Footer styling: */

footer{
    margin-bottom:30px;
    text-align:center;
    font-size:0.825em;



  p{
      margin-bottom:-2.5em;
      position:relative;
  }

  img {
      vertical-align:text-top;
  }
  a, a:visited{
      color:#cccccc;
/*      background-color:#213e4a; */
/*      display:block;*/
      padding:2px 4px;
      z-index:100;
      position:relative;
      &:hover{
      text-decoration:none;
      background-color:#142830;
      }
  }
  .by{
      float:left;
  }
  .tmpl{
      float:right;
  }
}



blockquote {
    margin: 1em 2em;
    padding-left: 1em;
    display: table;
    &:not(.lsting) p:first-letter {
        float: left;
        margin: .2em .3em .1em 0;
        font-size: 220%;
        font-weight: bold;
    }
    &:hover{
        -moz-box-shadow:1px 2px 2px #4D7788;
        -webkit-box-shadow:1px 2px 2px #4D7788;
        box-shadow:1px 1px 2px #4D7788;
    }

    span.warn{
        float: left;
        margin: .2em .3em .1em 0;
        font-size: 220%;
        font-weight: bold;
    }

    &.nb:before {
        content:"N.B.:";
        float: left;
        margin-right: .2em;
        font-size: 220%;
        font-weight: bold;
    }

}


ul {
    margin: 0.2em 0.1em;
    padding-left: 1.5em;
}

.qtbase {
    /* color:@qt-color; */
    &:after {
        content : "*";
        position: relative;
        bottom: 2 rem;
        vertical-align: baseline;
    }

    &:hover {
    text-decoration: underline;
        color: @qt-color;
    }
}


q { quotes: '“' '”' '‘' '’' }
q:lang(fr) { quotes: '« ' ' »'}
q:lang(fr_CH) { quotes: '«' '»' '‹' '›' }
q:lang(de) { quotes: '»' '«' '›' '‹' }
q:lang(de_CH) { quotes: '«' '»' '‹' '›' }
q:lang(en) { quotes: '“' '”' '‘' '’' }
q:lang(en_GB) { quotes: '‘' '’' '“' '”' }
q:lang(ja) { quotes: '「' '」' '『' '』' }

.ui-tooltip-default{
border-color: @bg-color;
background-color: @bg-bg-color;
color: @fg-color;

}
.ui-tooltip-default .ui-tooltip-titlebar{
background-color: @bg-bg-color;
}


.ui-tooltip-content {
    color: @fg-color;
    background-color: @bg-color;
}

.ui-tooltip-tip, .ui-tooltip-title, .ui-tooltip-titlebar  {
    color: @fg-color;
   background-color: @bg-bg-color;
}

.status_light {
    padding: 0.2em 0.2em;

    -moz-border-radius:@slradius;
    -webkit-border-radius:@slradius;
    border-radius:@slradius;


        &:hover{
        -moz-box-shadow:1px 2px 2px #4D7788;
        -webkit-box-shadow:1px 2px 2px #4D7788;
        box-shadow:1px 1px 2px #4D7788;
        }

}