body { background: #fff; font-size: 22px; padding: 0; margin: 0; text-align: center; }

a { text-decoration: none; color: #416d84; }
a strong { color: #000; }
a:hover strong { color: #d56037; background: #fff; letter-spacing: 1px; }

#menu li.selected a,
a:hover { background-color: #d56037; color: #fff; }
        
h1 { margin: 0; font-family: arial, sans-serif; background-color: #3c3a3a; color: #fff;  }

h1#lblTitle { padding: 1em 0 .3em 0;  }
h1#lblTitleSmall { font-size: 1.2em; margin-bottom: 1em; font-weight: normal; padding: .4em 0; }

h1#palabra { font-size: 4em; background-color: #fff; color: #000; }

h3 
{ 
   cursor: pointer;
   margin: 0;
   padding: 0.4em;
   font-family: Arial; 
   font-size: .8em;
   font-weight: normal;
   background-color: #1d1d1d;
   color: #fff;     
   background-repeat: no-repeat;
   background-size: auto 80%;
   background-position: right .2em center;
}

h3.off
{
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0ODkuOTM0IDQ4OS45MzQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4OS45MzQgNDg5LjkzNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik00ODUuOTY3LDIzMy42MTdjLTc0LTkxLTE1My45LTEzNy4yLTIzNy43LTEzNy4yYy0zMy4yLDAtNjYuOCw3LjQtMTAwLDIxLjljLTI2LjEsMTEuNS01MiwyNy40LTc2LjksNDcuMwoJCQljLTQyLjEsMzMuNy02Ni45LDY3LjMtNjcuOSw2OC43Yy00LjgsNi42LTQuNiwxNS42LDAuNSwyMmM3My45LDkxLjEsMTUzLjksMTM3LjIsMjM3LjcsMTM3LjJjMzMuMiwwLDY2LjgtNy40LDEwMC0yMS45CgkJCWMyNi4xLTExLjUsNTItMjcuNCw3Ni45LTQ3LjNjNDIuMS0zMy43LDY2LjktNjcuMyw2Ny45LTY4LjdDNDkxLjI2NywyNDkuMDE3LDQ5MS4wNjcsMjQwLjAxNyw0ODUuOTY3LDIzMy42MTd6IE0zOTUuMjY3LDI5Ni44MTcKCQkJYy0zNC44LDI3LjctODkuNiw2MC43LTE1My42LDYwLjdjLTY5LjEsMC0xMzYuNS0zNy45LTIwMC41LTExMi43YzEwLjEtMTEuOSwyOC42LTMxLjgsNTMuNC01MS42YzM0LjgtMjcuNyw4OS42LTYwLjcsMTUzLjYtNjAuNwoJCQljNjkuMSwwLDEzNi41LDM3LjksMjAwLjUsMTEyLjdDNDM4LjU2NywyNTcuMTE3LDQyMC4wNjcsMjc3LjExNywzOTUuMjY3LDI5Ni44MTd6IiBmaWxsPSIjZmZmZmZmIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMzExLjI2NywyMjcuMDE3Yy05LjksMC0xOCw4LjEtMTgsMThjMCwyNi43LTIxLjcsNDguNC00OC40LDQ4LjRjLTI2LjcsMC00OC40LTIxLjctNDguNC00OC40CgkJCWMwLTI2LjcsMjEuNy00OC40LDQ4LjQtNDguNGM5LjksMCwxOC04LjEsMTgtMThjMC05LjktOC4xLTE4LTE4LTE4Yy00Ni42LDAtODQuNCwzNy45LTg0LjQsODQuNHMzNy44LDg0LjQsODQuNCw4NC40CgkJCWM0Ni42LDAsODQuNC0zNy45LDg0LjQtODQuNEMzMjkuMjY3LDIzNS4xMTcsMzIxLjE2NywyMjcuMDE3LDMxMS4yNjcsMjI3LjAxN3oiIGZpbGw9IiNmZmZmZmYiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    text-align: left;
}

#layout { background: #fff; position: relative; }    
.width { margin: 0 20%;  }

div.off, p.off { display: none; }
#verbos ul.off li { color: #fff;  }

#verbos ul.off.pvw li { color: rgba(0,0,0,0.1); }

.orange { color: #d56037; }

li,
#topBar a,  
#topBar span,
#counter { color: #6d6d6d; } 

#body { border-bottom: 5px solid #f5f5f5; }

/**** ****/

#counter { margin: 0; }
    
#letras 
{ 
    margin: 0.4em 0; 
    font-size: 1.1em; 
}  

#letras a 
{ 
    display: inline-block; 
    padding: .2em .3em; 
    text-decoration: none; 
    font-size: 1.4em; 
}

#buscar { 
  border-radius: 1.4em; border: 2px solid #aeadad;
  text-align: left;
  display: inline-block;  
  overflow:hidden;
  margin: 0;
}

#buscar label, #buscar input { 
  display: inline-block; vertical-align: top;
  font-size: 1.2em; border: none; padding: 0.4em 0;   
}

#buscar label { text-align: center; width: 35%; }
#buscar input { width: 65%; background: #f5f5f5; text-indent: 0.5em; }


#ns__letras ul { margin: 0; padding: 0; }

ul#list-words,
ul#list-words.ajx ul { margin: 0; padding: 0; }

#list-words li { text-align: left; list-style: none; margin-bottom: 1em; }

#list-words a { display: block; padding: .4em .8em; color: #000; border: 1px solid #aeadad; border-radius: 2px; margin-bottom: 4px; }
#list-words a:hover { color: #fff; }

#list-words ul li { display: inline-block; vertical-align: top; margin: 0 4px 4px 0; }

.size1 li li { font-size: 150%; }
.size2 li li { font-size: 120%; }


#menu { border-top: 1px solid gray; padding: 0.3em 0; margin-top: 0.3em; }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu li { display: inline-block; vertical-align: top; }
#menu li a { display: block; padding: 0.3em 1em; }

#help { margin: 0; background: #f5f5f5; margin-top: 1em; padding: 1em;  }


#lbl404 { font-size: 2em; }
#lbl404 em { display: block; font-size: 1.4em; }


#verbos { padding-bottom: 2em; }

#verbos h2 { margin: 1em; } 

#verbos ul 
{ 
   text-align: left; 
   list-style: none; 
   margin: 0.4em .5em; 
   padding: 0; 
   line-height: 150%;
}

#verbos li { color: black; border-bottom: 1px solid #c7c7c7; padding: 0 0.5em; }
#verbos li:last-child { border-bottom: none; }

#verbos div { display: inline-block; vertical-align: top;  }
#verbos div div { border: 1px solid gray; border-radius: 2px; margin: 4px; }  


#ejemplo { border-top: 3px solid #639ebc; text-align: left; }
#ejemplo em { display: block; text-align: right; }
#ejemplo h2 { font-size: 2.6em; margin: 0; padding: 0.4em 0; }
#ejemplo p { background: #f5f5f5; padding: 1em; margin: 0 0 .3em 0; }
#ejemplo h2 span { font-size: 60%; } 


/* #topBar div, #topBar h1 { display: inline-block; vertical-align: middle; } */ 

#topBar { position: relative; text-align: center; }

#topBar div#prev,
#topBar div#next { position: absolute; top: 0; }

#topBar div#prev { left: 0; } 
#topBar div#next { right: 0; }

#topBar a { padding: .2em .2em .2em .2em; display: block; font-size: 3em; font-weight: bold; }
#topBar a:hover { color: #fff; }


#topBar span { width: 100%; display: block; }

#credits { padding: 2em 0 2em 0; }
#credits div.col { display: inline-block; vertical-align: top; margin: .4em; }

#colStats { text-align: center; padding: 0 2em 2em 2em; }
#colStats strong,
#colStats em { display: block; font-style: normal;  }
#colStats em { font-size: 4em; }

#stats { height: 216px; }

#edgering { background: #000; }
#edgering p { margin: 0; padding: 2em; }
#edgering img { display: block; margin: 0 auto; }
#edgering,
#edgering a { color: #fff; }

#populares { border-bottom: 2px solid #cfcfcf; border-top: 2px solid #cfcfcf; }

#popular { list-style: none; margin: 1em 0; padding: 0; }  
#popular li { display: inline-block; margin: 2px; }
#popular li a { display: block; padding: 0.2em 1em; border: 1px solid grey; border-radius: 2px; font-size: 1.2em; }

#adverbio { font-size: 1.4em;  }

#poctar,
#obrik 
{ 
   text-align: center; 
   height: 216px; 
   width: 150px; 
   border: 1px solid #CCCCCC;   
   position: relative;   
}

#poctar a,
#obrik a 
{ 
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   display: block;

   background-size: 100% auto;
   background-repeat: no-repeat;         
}

#obrik a
{
   background-image: url(mona-lisa-200.png);
}

#poctar a 
{ 
   background-image: url(poctar-200.png);
   background-color: #173f53;
}

#poctar span,
#obrik span
{
    position: absolute;
    bottom: 0;      
    display: block;
    font-family: Arial;
    line-height: 100%;
    font-size: .8em; 
    padding: .4em;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
}

#obrik span
{    
    /* background-color: rgba(0,0,0,0.6); */
}

#obrik a:hover
{
    background-color: transparent;
    background-image: url(mona-lisa-200-on.png);
}

#poctar a:hover
{    
    background-image: url(poctar-200-on.png);
}


#googleadds 
{ 
  min-width: 300px;
  min-height: 216px;
  background-color: #f5f5f5; 
} 

/** **/

.col { display: inline-block; vertical-align: top; }
.col strong { display: block; }

.col-50 { max-width: 50%; }

p.col { padding-left: 0; padding-right: 0; }

.col-50.col-l { max-width: 48%; padding-right: 2%; text-align: right; }
.col-50.col-p { max-width: 48%; padding-left: 2%; text-align: left; }


#ns__letras { padding-top: 1em; }

#ns__letras .col-l { width: 15%; padding-bottom: 1em; }
#ns__letras .col-l strong { display: block; font-size: 5em; font-family: Arial; }

#ns__letras .col-p { width: 80%; padding: .4em 0 1em 2.5%; }

#barBuscar { position: relative; } 

#lblVerbs { text-align: left; line-height: 100%; padding: .2em 0 0 .6em;}
#lblNum { font-size: 2em; padding-left: .2em; }  

#btnHome 
{ 
    display: inline-block;
    vertical-align: top;
    position: absolute;
    bottom: 0.2em; top: 0;
    width: 3em;
    
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUzOS4wNzcgNTM5LjA3NyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTM5LjA3NyA1MzkuMDc3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQ2MC40NjIsNTI3Ljg0NkgzMjUuNjkyYy02LjIwOCwwLTExLjIzMS01LjAyMy0xMS4yMzEtMTEuMjMxdi0xNDZoLTg5Ljg0NnYxNDZjMCw2LjIwOC01LjAyMywxMS4yMzEtMTEuMjMxLDExLjIzMQoJCQlINzguNjE1Yy02LjIwOCwwLTExLjIzMS01LjAyMy0xMS4yMzEtMTEuMjMxVjI5MmMwLTYuMjA4LDUuMDIzLTExLjIzMSwxMS4yMzEtMTEuMjMxYzYuMjA4LDAsMTEuMjMxLDUuMDIzLDExLjIzMSwxMS4yMzF2MjEzLjM4NQoJCQloMTEyLjMwOHYtMTQ2YzAtNi4yMDgsNS4wMjMtMTEuMjMxLDExLjIzMS0xMS4yMzFoMTEyLjMwOGM2LjIwOCwwLDExLjIzMSw1LjAyMywxMS4yMzEsMTEuMjMxdjE0NmgxMTIuMzA4VjMwMy4yMzEKCQkJYzAtNi4yMDgsNS4wMjMtMTEuMjMxLDExLjIzMS0xMS4yMzFjNi4yMDgsMCwxMS4yMzEsNS4wMjMsMTEuMjMxLDExLjIzMXYyMTMuMzg1CgkJCUM0NzEuNjkyLDUyMi44MjMsNDY2LjY2OSw1MjcuODQ2LDQ2MC40NjIsNTI3Ljg0NnogTTUyNy44NDYsMjkyYy0yLjg3MywwLTUuNzQ3LTEuMDk3LTcuOTQtMy4yOUwyNjkuNTM4LDM4LjM0M0wxOS4xNzEsMjg4LjcxCgkJCWMtNC4zODcsNC4zODctMTEuNDk0LDQuMzg3LTE1Ljg4MSwwYy00LjM4Ny00LjM4Ny00LjM4Ny0xMS40OTQsMC0xNS44ODFMMjYxLjU5OCwxNC41MjFjNC4zODctNC4zODcsMTEuNDk0LTQuMzg3LDE1Ljg4MSwwCgkJCWwyNTguMzA4LDI1OC4zMDhjNC4zODcsNC4zODcsNC4zODcsMTEuNDk0LDAsMTUuODgxQzUzMy41OTMsMjkwLjkwMyw1MzAuNzIsMjkyLDUyNy44NDYsMjkyeiBNNDM4LDEzNC43NjkKCQkJYy02LjIwOCwwLTExLjIzMS01LjAyMy0xMS4yMzEtMTEuMjMxVjU2LjE1NGgtNjcuMzg1Yy02LjIwOCwwLTExLjIzMS01LjAyMy0xMS4yMzEtMTEuMjMxczUuMDIzLTExLjIzMSwxMS4yMzEtMTEuMjMxSDQzOAoJCQljNi4yMDgsMCwxMS4yMzEsNS4wMjMsMTEuMjMxLDExLjIzMXY3OC42MTVDNDQ5LjIzMSwxMjkuNzQ2LDQ0NC4yMDgsMTM0Ljc2OSw0MzgsMTM0Ljc2OXoiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    background-size: auto 70%;
    background-repeat: no-repeat;
    text-indent: -6667px;
    background-position: center center;         
}

#btnHome:hover { background-color: #f5f5f5; }

#buscar 
{ 
   margin-left: 4em; 
}

.ns__intro #buscar { margin-left: 0; } 

#credits2 
{
   font-family: Arial;
   border-top: 5px solid #f5f5f5;   
   border-bottom: 1px solid #cfcfcf;
} 

#credits3 { padding: .2em 0 2em 0; }

#credits2 p
{
  margin: 0; padding: 1em 0;
  border-top: 2px solid #cfcfcf;
}

#credits2 a 
{ 
    background-color: #416d84; 
    color: #fff; 
    display: inline-block; 
    padding: .4em 1em;     
}

#credits2 .col
{
    vertical-align: middle;
    margin: 0 .3em;
}

#credits2 .col.mid { font-size: .85em; text-align: left; }

#credits2 a:hover
{
    background-color: #d56037; color: #fff;
}

#lblOverview { line-height: 150%; } 

p#lblBookMark { margin: 0; background: #f5f5f5; font-family: Arial; font-size: .8em; padding: .4em 0 .2em 0; }
p#lblBookMark a { text-decoration: underline; }
p#lblBookMark a:hover { background-color: transparent; color: #000; }
p#lblBookMark, p#lblBookMark a { color: #4c4c4c; }

/* =========================================== 
    MEDIA QUERIES 
   =========================================== */    

@media all and (max-width: 1880px) {
   .width { margin: 0 14%; }
}

@media all and (max-width: 1680px) {
   .width { margin: 0 12%; }
}

@media all and (max-width: 1440px) {
   .width { margin: 0 10%; }
}

@media all and (max-width: 1024px) {   
   body { font-size: 18px; }
   .width { margin: 0 5%; }   
}


@media all and (max-width: 800px) {
   body { font-size: 16px; }
   .width { margin: 0 4%; }
}

@media all and (max-width: 425px) {
    
    h1 span { display: block; }
    h1#lblTitleSmall { font-size: 1em; }
    
    #credits div.col#googleadds { width: 100%; margin: 1em 0 0 0; }
    #credits div.col#obrik { display: none; }
    
    #buscar { margin-left: 0; width: 100%; margin-bottom: .4em; }
    
    #btnHome 
    { 
       height: 2.8em; 
       width: 3em;
       top: 2.8em;       
       position: absolute; 
    }
    
    .col-50.col-p,
    .col-50.col-l { width: 100%; padding: 0; max-width: 100%; text-align: center; }
    
    p.col-50 { margin: 0.4em 0; }
    #introTxt { padding: .8em 0; }
            
    #credits2 a, 
    #credits2 .col,
    #credits2 .col.mid { display: block; text-align: center; padding: .4em 0; }
    
    .size1 li li { font-size: 120%; }
    .size2 li li { font-size: 110%; }
    
    #ns__letras .col-l strong { font-size: 4em; }
    #ns__letras .col-l { width: 20%; }
    #ns__letras .col-p { width: 75%; }
    
    #colStats p,
    #colStats { width: 100%; margin: 0; padding: 0; }
    
    #colStats p { font-size: 2em; }
    #letras a { padding: .2em .4em; }
    
    #list-words li { margin-bottom: .4em; }
    #letras { border: 1px solid #aeadad; padding-top: .4em; padding-bottom: .4em; }
    
    ul#list-words.ajx 
    { 
        position: absolute; 
        top: 3.2em;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;   
        z-index: 6666;
    }
   
   h1#palabra { font-size: 3em; padding-top: 0.2em; padding-bottom: 0.2em; }
}