/*
 * cascading style sheet for symecon.com, lakist (at) symecon.com
 * $Revision: 1.14 $
 */

* {
    box-sizing: border-box;
}

html{
    background-image: url('./ad.png'), url('./bg.jpg') ;
    background-repeat: no-repeat, repeat;
    background-attachment: fixed, fixed;
    background-size: 0 0, auto;
    background-position: left bottom, left top;
    font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
}


.header{
    padding:15px;
    text-align:center;
}

.espaheader a{
    display:block;
    height:61px;
    max-width:400px;
    margin:auto;
    background-image: url('./espah.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50% 0%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.header h2, h3{
    color: #2F4F4F;
}

.toc{
    background-image: url('./logo.png');
    background-repeat: no-repeat; 
    background-position: 50% 0%;
    float:left;
    padding:15px;
    padding-top:50px;
    width:100%;

}

.toc a:link {
    display:block;
    text-decoration:none ;
    color: white;
    text-align:center;
    padding:7px;
    border-radius : 3px;
    border-color: black;
}

.toc ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.toc li {
    margin-bottom: 7px;
    background-color :blue;
    border-radius : 3px;
    box-shadow: 2px 2px 3px gray;
}

.toc a:active {
    box-shadow: 0px 0px 3px black;
    transform: translateY(2px);
}

li a:hover{
    box-shadow: 4px 4px 3px gray;
}


.body{
    float:left;
    padding:15px;
    width:100%;
    border-style: solid;
    border-width: 1px;
    border-color: #d3d3d3;
    border-radius : 7px;
    margin-bottom: 15px;
    background-color: #FEFCFF;
}
.body img {
    padding:20px;
}

.body a:link, .body a:visited {
    background-color :blue;
    color: white;
    padding: 0px 15px;
    text-align: center;	
    text-decoration: none;
    display: inline-block;
    border-radius : 3px;
    margin:1px
}



.body li {
    padding-bottom:10px;
}

.section{
    margin-bottom: 10em;
    padding: 1em;
}

pre {
    font-size: 2vw;
}

:target {
    background-color: #ece5b6;
    background-color: lightgray;
    background-image: none;
    color: black;
    border-radius : 7px;
    -webkit-transition: 500ms; /* Safari */
    transition: 500ms;

}

:target h3, :target hr {
   color: blue;

}

:target ul li {
   color: #2b1b17;
   font-weight: bold;

}

:target ul li li {
   font-weight: normal;

}

@media screen and (min-width: 720px) {

    .header{
        float:right;
        width:70%;
        margin-bottom: 1em;
        border-style: solid;
        border-width: 1px;
        border-color: #d3d3d3;
        border-radius : 7px;
        background-color: #FEFCFF;
        font-size: 1.3vw;
    }

    .espaheader{
        background-position: 50% 10%;
        background-size: initial;
        background-size: 70%;
    }

    .body{
        float:right;
        width:70%;
    }

    .toc{
        background-image: url('./logo.png');
        background-repeat: no-repeat; 
        background-position: 50% 15px;
        padding-top:65px;
        width:30%;
    }

    .toc a:link {
        text-align:left;
    }

    pre {
        font-size: 10px;
    }

}

@media screen and (min-width: 720px) and (min-height: 510px) {

    .toc {
        position: fixed;
    }
}

@media screen and (min-width: 1100px) {

    .header{
        padding-top:15px;
        padding-right:35px;
        font-size: 15px;
    }

    .header h1 h2 h3{
        float: left;
    }
    .espaheader a{
        background-image: url('./espav.jpg');
        float: right;
        height:152px;
        width:280px;
    }

    .body, .header{ width:80%; }

    .toc{ width:20%; }

    .section:target {
        background-image: url('./logo.png');
        background-repeat: no-repeat; 
        background-position: 98% 20px;
        background-blend-mode: overlay;
    }

}