span.domain:before { color:#888; content:"@"; }
span.domain:after  { color:#888; content:".com"; }
#logo {
     padding:0;
     cursor:pointer;
}
#logo > * { height:2em; }

.panel-wrapper, .panel, #language-selector > a {
    -moz-transition:box-shadow linear 0.5s;-moz-transition:box-shadow linear 0.5s;-webkit-transition:box-shadow linear 0.5s;
    transition:box-shadow linear 0.5s;-moz-transition:box-shadow linear 0.5s;-webkit-transition:box-shadow linear 0.5s;
    -webkit-transition:box-shadow linear 0.5s;-moz-transition:box-shadow linear 0.5s;-webkit-transition:box-shadow linear 0.5s;
}
html {

    background:#eee;
}
body {
    
    
    color:#333;
    
    background:#eee;
}
#page-header {
    background:#fff;
    padding:0.2em;
    border-bottom: thin solid #DDD;
}

#page-header > *, #logo > svg, #logo > img {
    display:inline-block;
    vertical-align:middle;
}
#language-selector {
  margin:0;
  display:block;
  padding:0.25em;
  border-bottom: thin solid black;
}
#language-selector > a {
  color:#33f;
  text-decoration:none;
}
#language-selector > a, #language-selector > span {
  margin:0.25em;
  
  padding:0.1em 0.25em;
  border-radius:0.2em;-moz-border-radius:0.2em;-webkit-border-radius:0.2em;
}
#language-selector > a:hover {
  background:#fff;
  box-shadow: 0 2px 5px #777;-moz-box-shadow: 0 2px 5px #777;-webkit-box-shadow: 0 2px 5px #777;
}
#language-selector > .current {
    cursor: pointer
}
#language {
    display:inline;
    line-height:2em;
    font-size:80%;
    margin-right:0.25em;
}
#toc {
    margin:0;
    padding:0;
    display:inline;
    line-height:1.7em;
}
#toc > * {
    font-size:80%;
    padding-bottom:0.1em;
    margin:0 0.5em;
    border-bottom:0.4em solid transparent;
    transition:border-color 0.5s ease-out;-moz-transition:border-color 0.5s ease-out;-webkit-transition:border-color 0.5s ease-out;
    
    
}


#toc > .current {
    border-color:#DDD !important;
    color:black;
    
}
#toc > a:hover, #language-selector > a:hover {
    
    border-color: #D44;

    
}
#language-selector {
    border-bottom:thin solid #DDD;
}

#session {
    float:right;
}
#session input[type=password], #session p {
    display:none;
}
#session .login-popup input[type=password], #session .login-popup p {
    display:block;
}
.login-popup {
    display:inline-block;
    position:fixed; top:0; right:0;
    border:thin solid #000;
    background:#fff;
    box-shadow:0 0.2em 0.6em 0 #777;-moz-box-shadow:0 0.2em 0.6em 0 #777;-webkit-box-shadow:0 0.2em 0.6em 0 #777;
    padding:2em;
    width:20em;
}
.login-popup label {
    display:block;
}
.login-popup::after {
    content:"×"; cursor:default;
    position:absolute;top:0;right:0.25em;
    font-size:150%;
}
#login {
    
    display:none;
    position:relative;
}

#lightbox {
    position:fixed;
    top:0;bottom:0;left:0;right:0;
    background:rgba(0,0,0,0.80);
    display:none;
    opacity:0.0;
    transition:opacity 0.3s linear;-moz-transition:opacity 0.3s linear;-webkit-transition:opacity 0.3s linear;
}
#lightbox > div {
    position:absolute;
    top:0;bottom:0;left:0;right:0;
    overflow:auto;
}
#lightbox > div > table {
    width:100%;height:100%;
    margin:0;
    border:0;
}
#lightbox-content {
    width:100%;height:100%;
    margin:0;
    padding:0;
    border:0;
    vertical-align:middle;
    text-align:center;
}
#lightbox-content > img {
    box-shadow:0 0.5em 1em #000;-moz-box-shadow:0 0.5em 1em #000;-webkit-box-shadow:0 0.5em 1em #000;
    background:#fff;
    border:0.5em solid #fff;
}
#lightbox > button {
    position:absolute;
    top:1em;right:1em;
    font-size:200%;
    border-radius:1em;-moz-border-radius:1em;-webkit-border-radius:1em;
    border-color:#ddd;
    background:transparent;
    color:#ddd;
    text-shadow:0 0 0.1em #000;
}

.legal-notice {
    font-family:"Charis SIL", "Bitstream Charter", Georgia, STIXGeneral, serif;
}
footer a, footer a:visited, .legal-notice a, .legal-notice a:visited {
    color:#77F;
}

footer {
    padding:0.25em;
    clear:both;
    border-top:thin solid #DDD;
    font-family:"DejaVu Sans",FreeSans,Helvetica,Arial,sans-serif;
    font-size:80%;
    color:#777;
}
#timestamp {
    float:right;
    font-family:monospace;
    font-size:80%;
}
.separator {
    color:#CCC;
}



@media print {
    #page-header { border:none; border-bottom:thin solid #DDD; }
    #language-selector {
        font-size:80%;
        text-align:right;
    }
    #language, #language > * {
        float:right;
        border:none;
        background:transparent;
        font-size:inherit;
    }
}




#content { min-height:16em; }


.content {
    padding:0.5em 0 0 0.5em;
    
    text-align:center;
    
    font-family:"Charis SIL", "Bitstream Charter", Georgia, STIXGeneral, serif;
}
.panel-wrapper:hover {
    box-shadow:0 0.2em 0.5em #AAA;-moz-box-shadow:0 0.2em 0.5em #AAA;-webkit-box-shadow:0 0.2em 0.5em #AAA;
}
.panel-wrapper {
    box-shadow:0 0em 0em #eee;-moz-box-shadow:0 0em 0em #eee;-webkit-box-shadow:0 0em 0em #eee;
    display:inline-block;
    
    border-radius:0.2em;-moz-border-radius:0.2em;-webkit-border-radius:0.2em;
    margin:0 0.5em 0.5em 0;
    vertical-align:top;
}
.panel:hover {
    box-shadow:0 0em 0em #eee inset;-moz-box-shadow:0 0em 0em #eee inset;-webkit-box-shadow:0 0em 0em #eee inset;
}
.panel {
    position:relative;
    box-shadow:0 0.2em 0.5em #AAA inset;-moz-box-shadow:0 0.2em 0.5em #AAA inset;-webkit-box-shadow:0 0.2em 0.5em #AAA inset;
    
    border-radius:0.2em;-moz-border-radius:0.2em;-webkit-border-radius:0.2em;
    padding:1em;
    display:inline-block;
    vertical-align:top;
    background:#fff;
    text-align:left;
    max-width:30em;
}
.panel-toggle {
    position:absolute;right:1em;bottom:1em;
}
@media only screen and (max-width:68em) { .panel { max-width:38em; } }
.section-portfolio .panel-body {
    max-height:20em;
    overflow:auto;
    margin-bottom:2em;
}
.expanded > .panel-body {
    max-height:none;
}

div > h2:first-child {
    margin-top:0;
}
div > h1 {
    font-family:sans-serif;
    font-size:120%;
    font-weight:normal;
    margin:0 2em 0 2em;
}
.panel {
    line-height:1.2;
}
.panel > p, .panel > div {
    margin-bottom:0;
}
.panel > p > img {
    float:left;
    margin:0 0.5em 0.5em 0;
    max-width:14em;
}
.panel-body > img {
    display:block;
    margin:auto;
}
.panel:after {
    display:block;
    clear:both;
    content:"";
    height:0;
    visibility:hidden;
}
.panel h2 time {
    font-family:monospace;
    font-weight:normal;
    font-size:80%;
    color:#444;
    float:right;
}
ul.quick-links + .product-description { margin-top:0; }
.price { clear:both; }

#index, #editor {
    box-shadow:0 0 0.5em #f0f0f0;-moz-box-shadow:0 0 0.5em #f0f0f0;-webkit-box-shadow:0 0 0.5em #f0f0f0;
    
}
img.portrait {
    box-shadow:0 0.25em 0.5em #444;-moz-box-shadow:0 0.25em 0.5em #444;-webkit-box-shadow:0 0.25em 0.5em #444;
}

table.contact th, table.contact td {
    font-weight:normal;
    padding:0.1em 0.4em 0.1em 0.4em;
}
table.contact th {
    text-align:left;
    vertical-align:baseline;
}
table.contact td {
    font-family:monospace;
    text-align:right;
    vertical-align:baseline;
}

ul {
    padding-left:1.5em;
    list-style-type:square;
    overflow:hidden;
}
a { text-decoration:none; color:#33f; }
a:hover { color:#00f !important; }
a:visited { color:#00f; }
h2 > a { color:inherit !important; }
ul.quick-links {
    font-family:"DejaVu Sans",FreeSans,Helvetica,Arial,sans-serif;
    display:block;
    text-align:right;
    padding-right:1em;
    margin:0.5em 0 0.5em 0;
}
ul.quick-links > li {
    display:inline-block;
    margin-left:1em;
    font-size:90%;
}
img.portrait {
    width:15em;
    float:left;
    margin:1em 2em 2em 0 !important;
    padding:0 !important;
    border-radius:0.25em;-moz-border-radius:0.25em;-webkit-border-radius:0.25em;
}
.price-notes {
    font-size:80%;
    font-style:italic;
    text-align:right;
}

p:first-child { margin-top:0; }
p code, p kbd, p pre, p samp {
	font-size: 0.9em;
}

hr { border:thin solid #EEE; }

#feedback-area { min-height:4em; }






.button {
    display:inline-block;
    padding:0.0em 0.4em 0.0em 0.4em;
    vertical-align:middle;
}
.button, .popup {
    line-height:1.5em;
    font-family:"DejaVu Sans",FreeSans,Helvetica,Arial,sans-serif;
}
.popup {
    display:none;
    padding:0.25em;
    position:absolute;
    top:0;
    right:0;
    z-index:6;
}
.popup > * {
    display:block;
}

.button, .popup {
    border:thin solid transparent;
    text-align:center;
    padding-left:0.25em;
    padding-right:0.25em;
    border-radius:0.25em;-moz-border-radius:0.25em;-webkit-border-radius:0.25em;
    cursor:default;
    
    border:thin solid #EEE;
    border-color:#EEE #DDD #CCC #DDD;
    background:url("gradiente_vertical_corto.png") #FFF bottom repeat-x;
    color:#333;
}
.popup {
    box-shadow:0 0.25em 0.5em #444;-moz-box-shadow:0 0.25em 0.5em #444;-webkit-box-shadow:0 0.25em 0.5em #444;
    background:#FFF;
}
.button:hover, .popup > .button:hover {
    color:#000010;
    background-color:#EFEFFF;
}
.button[disabled], .disabled, .disabled:hover {
    color: #CCC !important;
    background: transparent !important;
}
.button.on {
    background: #EEE !important;
    border-color:#CCC #DDD #EEE #DDD;
}
.popup > .button {
    border-color:transparent;
    border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;
    background:transparent;
}