/* System8D.css */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,
p, pre, a, code, em, img, strong,
dl, dt, dd, ol, ul, li,
table, caption, tbody, tfoot, thead, tr, th, td,
fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    }

/* @import url(https://fonts.googleapis.com/css?family=Lato:400,700); */
/* @import url(https://fonts.googleapis.com/css?family=Inconsolata); */

html {
    font-family:  "Lato", "DejaVu Sans", sans-serif;
    font-size: normal;
    line-height: 1.5;
    color: #002b36;
    background-image: url("../images/carton_bg.jpg");
    background-color: #f0f0f0;
    background-color: #eaeaea;
    }

body {
    max-width:1024px;
    margin: 0 auto;
    background-color: #fafafa;
    background-color: #f0f0f0;
    box-shadow: 0 0 10px rgba(50,50,50,.2);
    }

h1, h2, h3, h4, h5, h6 { font-weight: bold;}
h1 {font-size: 2em;  margin: 0.67em 0;}
h2 {font-size: 1.5em; margin: 0.83em 0;}
h3 {font-size: 1.17em; margin: 1em 0;}

p  {font-size: 1em;}

ol, ul {
    padding-left: 2.5em;
    }

code {
    font-family: "Inconsolata", monospace;
    }

strong {
	color: #6c71c4;
	color: #268bd2;
	color: #cb4b16;
	}


/* HTML5 elements */
header {
    height:84px;
    color: #fdf6e3;
    background-image: url(../images/logo_alpha.svg);
    background-position: left top;
    background-repeat: no-repeat;
    background-color: #073642;
    margin: 0px;
    }
    header ul {
        list-style-type: none;
        text-align: right;
        padding-right:50px;
        padding-top: 30px;
        }
    header li {
        display:inline;
        }
    img[alt=twitter] {
        color: #e1e8ed;
        width:48px;
        height:48px;
        }
    img[alt=twitter]:hover {
        opacity: 0.8;
        }

nav {
    margin: 0px 0px 20px 0px;
    padding: 5px 5px 5px 5px;
    }

    nav ul {
        list-style-type: none;
        padding: 0;
        }

    nav li {
        display: inline;
        }
    nav a {
        display:inline-block;
        text-decoration: none;
        font-family:  "Lato", "DejaVu Sans", sans-serif;
        font-size: normal;
        font-weight: bold;
        line-height: 1.2em;
        background-color: #fdf6e3;
        margin:2px 4px;
        padding: 0px 20px 2px 20px;
        border: 1px solid #c0c0c0;
        border-radius: 6px;
        }
        nav a:link, nav a:visited {
            color: #073642;
            }
        nav a:hover {
            color: #cb4b16;
            /*box-shadow: 0 0 2px rgb(50,50,50,.2);*/
            border: 1px solid #fba480;
            border-radius: 6px;
           }

    nav .selected a {
        background-color: #93a1a1;
        }
        nav .selected a:hover {
	    color: #073642;
            border: 1px solid #c0c0c0;
            }


footer {
	text-align: center;
	font-weight: bold;
	color: #fdf6e3;
	background-color: #073642;
	padding: 10px;
	}
/* ---- end HTML5 elements ---*/


.container {
    color:   #073642;
    background-color: #fafafa;
    margin:  40px 20px;
    padding: 20px 40px 20px 40px;
    border-radius: 20px;
    }
    .container>h1 {
        font-size: 1.2em;
        font-weight: bold;
        margin: .3em 0;
        border-bottom: 1px solid #a0a0a0;
        }
    .container>h2 {
        font-size: 1.2em;
        font-weight: bold;
        margin: .6em 0 .3em 0;
        }
    .container>p {
        text-align: justify;
        margin: 0 2em;
        }
    .container>img {
        float: right;
        }

/*-- Form --*/
form {
    }
form.contact_form {
    padding-top: 20px;
    padding-top: 28px;
    background: url("../images/letter.svg") 90%  0%  no-repeat;
    }
label {
    display: inline-block;
    width: 120px;
    vertical-align: top;
    margin:3px 0 0 0;
    text-align: right;
    padding-right: 8px;
    }
input, textarea {
    font-family:  "Lato", "DejaVu Sans", sans-serif;
    font-size: 1em;
    color: #204048;
    margin:3px 1px;
    border:1px solid #b0b0b0;
    padding: 1px 3px;
    border-radius: 3px;
    }
textarea {
    margin-top: 8px;
    width:64%;
    resize:vertical;
    }
input[type="submit"] {
    font-weight: bold;
    padding: 0 0 2px 0;
    margin-left: 132px;
    margin-right: 0px;
    border-radius: 4px;
    width: 512px;
    margin-top: 20px;
    /*box-shadow: 1px 1px 1px rgb(150,150,150);*/
    background-color: #f8f8f8;
    }
    input[type="submit"]:hover {
        color: #cb4b16;
        background-color: #fafafa;
        border: 1px solid #fba480;
        border-radius: 4px;
        /*box-shadow: 1px 1px 1px #fba480;*/
        box-shadow: 0px 0px 1px #fba480;
    }
#captcha_container {
    /* display: inline-block; */
    margin-left: 132px;
    margin-top: 5px;
    margin-bottom: 5px;
    }
#form_response {
    padding: 2em;
    min-height: 200px;
    }


/* enclosed */
.enclosed {
    text-align: justify;
    margin: 20px 0px;
    padding: 80px 140px;
    background-color: #fafafa;
    border: solid;
    border-color: #999;
    border-radius: 16px;
    border-width: 1px;
	}
.enclosed h1 {margin: 20px 0px 40px 0px;}
.enclosed h2 {margin: 20px 0px 10px 0px;}

/* Figura */
.figure {margin: 20px 10px;}
.figure .frame {padding:10px; text-align: center;}
.figure .caption { font-style: italic;}

/* Figura Flotante */
.float_figure {margin:5px 20px; float: left;}
.no_solape {clear: left;}


/* Introduccion */

#introduction {
	margin:   40px 20px;
	padding:  10px 40px 20px 40px;
        padding-left: 4%;
        padding-right: 4%;
	color: #073642;
	background-color: #fdf6e3;
	background-color: #f8f8f8;
        background-color: #fafafa;
	border-radius: 20px;
	}

#introduction h1 {
	font-size: 1em;
	font-weight: bold;
	margin: 5px 0px;
	}

#introduction p {
	text-align: justify;
	margin: .24em 2em;
	}

div.navigation {	
	color: red;
	margin: 40px;
	text-align: center;
}


/*-- TABLE --*/

div#table-container {
    display: table;
	border-spacing: 10px;
    }
div#table-row {
    display: table-row;
    }
div#news, div.attention {
    display: table-cell;
    }

div#news {
    width: 50%;
    }

div.attention {
    width: 25%;
    }

section#news {
	/*display: table-cell;*/
	width: 60%;
	}

section#news > h1, div#news > h1 {
	text-align: center;
	/*background-color: #fdf6e3;
	background: rgba(#fdf6e3,0.10);*/
	margin: 5px 0px;
	padding: 5px;
	border: solid;
    border-width: 3px;
	border-radius: 16px;
	}

/*-- News articles --*/
article {
    line-height: 1.5;
	background-color: #fdf6e3;
	background-color: #eee;
	background-color: #f8f8f8;
	background-color: #fafafa;
	margin: 20px 0px;
	padding: 10px 20px 20px 20px;
	border-radius: 16px;
    border: solid;
    border-color: #999;
    border-width: 1px;
	}

article h1 {
	font-size: 1.2em;
	font-weight: bold;
	color: #509010;
	margin: 5px 0px 5px 0px;
	}

p.note {
	font-size: .8em;
	text-indent: 0;
	margin: -2px 0px 14px 0px;
	}

article p {
	text-align: justify;
	text-indent: .4em;
	margin: .4em .2em;
	}

time {
	float: right;
	padding: 8px 8px 4px 8px;
	margin: -4px -12px 4px 4px;
	color:white;
	background-color: #268bd2;
	text-align: center;
	font-weight: bold;
	border-radius: 10px;
	}
time .year {
	font-size:.7em;
	}

aside#index {
	display: table-cell;
	width: 25%;
	padding: 0px 40px;
	}
aside#others {
	display: table-cell;
	width: 25%;
	}

/*  --- NOTA ---  */

div.tablenote {
	display: table;
	}
div.tablenote_row {
    display: table-row;
	}
div.tablenote_image {
	display: table-cell;
	vertical-align: top;
	}
div.tablenote_note {
	display: table_row;
	vertical-align: top;
	margin: 0 1em;
	}

/* ---- CODE ---- */

pre.code_area {
	margin: 1em 4em;
	padding: 1em;
	background-color: #eee8d5;
	}

pre.code_area code {
	font-family: "Ubuntu Mono", monospace;
	color: #444;
	font-size: 1.34em;
	line-height: 1.1;	
	}

code.sketch .comment {
	color: green;
	}
code.sketch .statement {
	color: darkorange;
	}
code.sketch .function {
	color: darkorange;
	font-weight: bold;
	}
code.sketch .constant {
	color: black;
	}
code.identifier {
	color: black;
	}
code.statement {
	color: black;
	}
code.preproc {
	color: black;
	}
code.type {
	color: black;
	}
code.type {
	color: black;
	}
code.type {
	color: black;
	}

.center {
	
	}

img.float_left {
	float: left;
	}

/* Responsive Web Design */

@media screen and (min-width:760px) {
  body {
    min-width:760px; /* automatic satisfaced*/
    }
  }

@media screen and (max-width:639px) {
    header {
        height: 64px; 
        background-size: contain;
        }
    header ul {
        display: block;
        padding-right:5%;
        padding-top: 3%;
        }
    nav li {
        display: block;  
        }
    div#news, div.attention {
        display: table-row;
        }
    }
  }