Template:Sandbox/jimeee-test.css

/* == CSS used exclusively on Lore:Statues ==*/
.statue_table,
.statue_table--single {
    max-width: 900px;
    background-color: #EBE0C8;
    border: 7px double#d1c7b1;
    margin-bottom: 20px;
}

.statue_table--single .statue-detail {
    width:auto;
}

.statue-detail {
    vertical-align: top;
    border-right: 1px solid #CEC4AF;
}
.statue-detail {
    padding: 10px;
    margin: 0;
    background: #fdf2db;
    width:50%;
}
.statue-detail:last-child {
    border-right: 0!important;
}
.statue-detail p {
    margin: 0.4em 0 1.5em 0!important;
}

.statue-detail2 {
    text-align: center;
    font-weight: bold;
    padding: 5px;
}

.statue-detail2 img {
    height: 250px !important;
    width: auto !important;
    max-width: none !important;
}
th.statue-detail2 {
    padding: 5px 5px 5px 5px;
}

.statue-detail2.rightborder {
    border-right: 1px solid #CEC4AF;
}

.statue-detail2 a {
    display: block;
}

.statue-detail-heading {
    border-bottom: 2px solid #CEC4AF;
    padding: 10px;
    background: #e3d8c1;
}








/* == CSS used exclusively on Lore Library==*/

.lore-list_container {
position: relative;
    margin: 0 auto 15px auto;
    width: 95%;
    padding: 15px;
    border: solid 7px#fff5de;
    box-shadow: 0px 0px 60px -28px rgba(0,0,0,1);
    text-align: center;
    padding-top: 120px;
}

.lore-list_container:before {
    background-color: #141210;
    background-image: url(//images.uesp.net/f/f9/ON-concept-Aldmer_Facade.jpg);
    background-position: 0px 0px;
    background-repeat: round;;
    background-size: contain;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: -1;
    opacity: 0.6;
    background-position: 0 -213px;
}

ul.lore-list {
background: #e7e3d7;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 10px 0 10px;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    padding: 50px;
    width: auto;
    opacity: 0.9;
    box-shadow: 0px 0px 11px -1px#000000;
}

ul.lore-list:after {
    content: "";
    width: calc(100% - 35px);
    height: calc(100% - 35px);
    position: absolute;
    margin: 10px 0px 0px 10px;
    top: 0px;
    border: 7px double#cdc9be;
    left: 0;
    z-index: -1;
    opacity: 1;
}

/* ==================Intro==================*/
.lore-list_intro {
    font-size: 1rem;
    line-height: 1.7rem;
    margin: 0 10% 70px 10%;
    background: #faefd7;
    padding: 25px;
    opacity: 0.9;
    box-shadow: 0px 1px 11px -1px black;
    text-align: left;
    font-family: Georgia,serif;
    color: #666147;
}

.lore-list_wrapper p {
    margin: 0;
}

/* ==================List Items==================*/
ul.lore-list li {
display: block;
    position: relative;
    width: 365px;
    /*min-height: 300px;*/
    background: none;
    margin-right: 10px;
    margin-bottom: 10px!important;
    padding-bottom: 10px;
    box-shadow: 0px 1px 12px -2px#898989;
    background: #fbefd5;
}

ul.lore-list li:before {
    content: "";
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    position: absolute;
    margin: 12px 0px 0px 12px;
    top: 0px;
    border: 4px double#d7ccb5;
    left: 0px;
    z-index: 0;
    opacity: 1;
}

span.l-heading a {
    color: #000000;
    background: #e6dbc2;
    padding: 15px 0px 15px 0px;
    display: block;
    font-size: 22px;
    font-family: Georgia,serif;
    font-variant: small-caps;
    letter-spacing: 0.9px;
    font-weight: normal;
    transform: translateY(0px);
    text-shadow: 0px 1px#fff5de;
    text-decoration: underline;
}

span.l-heading a:focus,
span.l-heading a:hover {
    background: #cdc2ab;
    color: #6e654b;
    text-decoration: none;
    text-shadow: none;
}

span.l-heading {
    margin: 15px;
    display: block;
}

span.l-desc {
padding: 0px 10px 10px 20px;
    margin: 0 5px 0 5px;
    display: block;
    text-align: left;
    color: #868177;
    transform: translateY(0px);
    font-size: 0.9rem;
    line-height: inherit;
}


span.l-cat-title {
margin: 40px auto 0 auto;
    padding: 5px 50px;
    width: auto;
    display: inline-block;
    line-height: normal;
    font-family: Georgia,serif;
    font-variant: small-caps;
    background: #ddd9cd;
    letter-spacing: -1px;
    color: #6c644e;
    font-size: 3em!important;
    border: 6px double#d5d0c6;
    text-shadow: 0px 2px#fffaf0;
}

/* ==================Mini Index==================*/
.PageLetterMenu {
    border: 0px solid#c5bba7;
    margin: 0 25px 10px 25px;
    padding: 15px 0 0 0;
    /* background: #ffffff; */
    text-align: justify;
    transform: translateY(0px);
    /*position: absolute;*/
    /*bottom: 0;*/
    border-top: 1px double #cdc2ad;
    display: block!important;
}

.PageLetterMenu a:visited {
    color: #616161;
}

.PageLetterMenu a:link {
    color: #787070;
}

.PageLetterMenu a:link,
.PageLetterMenu a:visited
{
    background: #e6dbc2;
    padding: 14px 7px;
    display: inline-block;
    margin: 0px 0px 5px 0px;
    line-height: 0;
    border: 1px solid#c5bba7;
    letter-spacing: 0.9px;
    font-weight: normal;
}

.PageLetterMenu a:hover,
.PageLetterMenu a:focus{
    background: #ddd2ba;
    color: #121212;
    text-decoration:none;
}



/* ==================Index==================*/
.PageLetterMenu2 {
    border: 1px solid#c5bba7;
    margin: 0px;
    padding: 5px 5px 0px 5px;
    background: #fff3db;
}

.PageLetterMenu2 a:visited {
    color: #616161;
}

.PageLetterMenu2 a:link {
    color: #787070;
}

.PageLetterMenu2 a:link,
.PageLetterMenu2 a:visited
{
    background: #e6dbc2;
    padding: 14px 7px;
    display: inline-block;
    margin: 0px 1px 5px 1px;
    line-height: 0;
    border: 1px solid#c5bba7;
    letter-spacing: 0.9px;
    font-weight: normal;
}

.PageLetterMenu2 a:hover,
.PageLetterMenu2 a:focus{
    background: #ddd2ba;
    color: #121212;
    text-decoration:none;
}

/* ==================Container==================*/
.ll-list_container {
    position: relative;
    /*background:#ebe0c8;*/
    margin: 0 auto 15px auto;
    width: 90%;
    padding: 15px;
    /*border: double 7px #888888;*/
    border: solid 7px #fff5de;
    box-shadow: 0px 0px 60px -28px rgba(0,0,0,1);
    text-align: center;
    max-width: 1300px;
}
/* ==================Icons + Dragon 2==================*/
.ll-headerimg2,
.ll-headericon
{
    display:none;
}

.ll-headerimg{
    opacity: 0.6;
    margin: 20px 0 0 0;
}

.ll-book-wrapper {
    display: none;
}

/* ==================Dragon 1==================*/
.ll-headerimg img {
    height: 60px!important;
    width: 375px!important;
}

/* ==================Headings==================*/
.ll-title_main, 
.ll-title_author, 
.ll-title_desc {
    margin: auto;
    border: 0px solid red;
    line-height: normal;
    /*font-size: 3em!important;*/
    width: 100%;
    line-height: normal;
    font-family: Georgia, serif;
    letter-spacing: 0px;
    color: #6c644e;
}

.ll-title_main {
    margin: -9px auto 0px;
    font-variant: small-caps;
    line-height: normal;
    padding: 0;
    width: auto;
}

.ll-title_desc {
    margin: 0px auto 25px;
    font-style: italic;
    line-height: inherit;
}

.ll-title_author {
    display:none;
}

.ll-title_main span {
    font-size: 2.3em!important;
    border-top: 3px double#83795d;
    border-bottom: 3px double#83795d;
    text-shadow: 0px 2px #fffaf0;
}

.ll-title_desc span {
    font-size: 0.9em!important;
    padding: 0px 0px 0px 0px;
    border-bottom: 3px double#83795d;
    display: inline-block;
    margin: 5px 0 0px 0;
}

/* ==================Intro + Section Text==================*/
.ll-sectiontext {
    display: block;
    /* width: 100%;*/;
    padding: 15px;
    margin: 0px 0 25px 0;
    border: 4px double#e6dbc2;
    background: #fdf3dd;
}

.ll-intro {
    border:1px solid blue;
    padding: 15px;
    margin: 0px 0 25px 0;
    border: 4px double#e6dbc2;
    background: #fdf3dd;
}

.ll-intro p,
.ll-sectiontext p {
    font-family: Georgia,serif;
    color: #666147;
    /*background: #fdf3dd;*/
    font-size: 1rem;
    /*padding: 15px;*/
    line-height: 1.7rem;
    /*margin: 0px 0 25px 0;*/
    /*border: 4px double#e6dbc2;*/
    text-align:left;
}

.ll-letter {
    vertical-align: baseline;
    float: left;
    margin: 3px 5px 0 0;
    opacity: 0.6;
}

.ll-letter-hide {display:none;}

/* ==================Section Header==================*/
.ll-sectionheader {
    width: 100%;
    margin: 50px auto 25px auto;
    position: relative;
    background: #e6dbc2;
}

.ll-sectionheader:before {
    border-bottom: 2px solid#83795d;
    top: -12px;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: -1;
}

.ll-sectionheader span {
    background: #83795d;
    padding: 5px 25px;
    border: 2px solid#83795d;
    border-radius: 50px;
    font-family: Georgia,serif;
    font-size: 18px;
    font-variant: small-caps;
    letter-spacing: 3px;
    color: #f7ebd4;
    line-height: normal;
    box-shadow: 0px 4px 10px -4px#898989!important;
}

/* ==================Navigation==================*/
ul.ll-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 0px 0 0px;
    padding: 0px 0 0px 0;
}

ul.ll-list.toplinks {
    display: flex;
    flex-flow: inherit;
    justify-content: flex-start;
    padding: 0;
    margin: 10px 0 10px 0px;
    border: none!important;
}

.toplinks li:first-child {
    margin-right: 10px;
}

.ll-list li {
    display: block;
    width:100%;
    /* background: #e6dbc2; */
    background: none;
    margin-right: 0px;
    margin-bottom: 10px!important;
    box-shadow: 0px 5px 8px -4px #898989;
}

.ll-list a,
.ll-list a:visited {
    color: #666147;
    background: #e6dbc2;
    padding: 5px;
    display: block;
    border: 2px solid#fff5de;
    font-size: 17px;
    font-family: Georgia,serif;
    font-variant: small-caps;
    letter-spacing: 0.9px;
    font-weight: normal;
    /* -webkit-transform: translateY(0px);*/
    transform: translateY(0px);
    text-shadow: 0px 1px #fff5de;
}
.ll-list a:hover,
.ll-list a:focus {
    background: #cdc2ab;
    color: #6e654b;
    text-decoration: none;
    display: block;
    /* -webkit-transform: translateY(2px);*/
    transform: translateY(2px);
    text-shadow: none;
}
/* ==================Tables==================*/

table.ll-table-container_full {
    margin: 0 auto;
    padding: 0;
}

td.ll-table-container_half {
    margin: 0;
    border: 1px solid #a2a9b1;
    padding: 1px;
    vertical-align: top;
    background: #ebe0c8;
}

.ll-table-booklist {
    width: 100%;
    margin: 0!important;
    padding: 0;
    color: #666666!important;
    font-size: 0.75rem;
    vertical-align: top;
}

.ll-table-booklist em {
    font-size: 0.8rem!important;
}

.ll-table-booklist span {
    font-weight: bold;
    font-size: 13px;
}

/* ==================Table Card==================*/
table.wikitable.striped.ll-table-booklist td {
    margin: 0;
    padding: 0;
}

table.wikitable.striped.ll-table-booklist a {
    display: block;    
    font-weight: bold;
    padding: 0.2em 0.4em;
}
table.wikitable.striped.ll-table-booklist a:hover {
    text-decoration: none;
    background: #e5d5c1;
}

table.wikitable.striped.ll-table-booklist a em {
    color: #7a7a7a;
    font-weight: normal;
}

/* ==================Footer==================*/
.ll-footer {
    font-family: Georgia,serif;
    color: #c1b69e;
    background: #faefd6;
    font-size: 1em;
    padding: 10px 10px 10px 10px;
    line-height: 1.3em;
    margin: 30px 0 0 0;
    letter-spacing: 3px;
    font-variant: small-caps;
    border: 4px double#e6dbc2;
    text-shadow: 0px 1px #ffffff;
}

/* ========================================625px or more======================================== */
@media screen and (min-width: 625px) {

/* ==================Container==================*/
.ll-list_container:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0.09;    
    box-shadow: 0px 0px 90px 50px rgba(0,0,0,1) inset;
}

.ll-list_container:before {
    background-color: #ffffff;
    background-image: url("https://images.uesp.net/6/6b/MER-art-Arena_Anthology_Game_Map.jpg");
    background-position: -16px -46px;
    background-repeat: repeat;
    background-size: contain;
}

.ll-list_container:after {
    content: "";
    width: calc(100% - 35px);
    height: calc(100% - 35px);
    position: absolute;
    margin: 10px 0px 0px 10px;
    top: 0px;
    border: 7px double#777267;
    left: 0;
    z-index: -1;
    opacity: 0.2;
}

/* ==================Headings==================*/
.ll-title_main {
    margin: -6px auto 0px;
}

.ll-title_main span {
    font-size: 3em!important;
    border-top: 6px double#8d877a;
    padding: 0px 25px;
}

.ll-title_desc span {
    font-size: 1.2em!important;
    padding: 5px 15px 5px 15px;
    border-bottom: 6px double#83795d;
    margin: 5px 0 0px 0;
}

.ll-list li {
    width:auto;
    margin-right: 10px;
}

.ll-list a,
.ll-list a:visited {
    padding: 10px;
}

/* ==================Icons==================*/
.ll-headericon {  
    position: absolute;
    border: 7px double #786f6f;
    margin: 0px;
    display: block;
    padding: 0px;
    opacity: 0.6;
    background: #fff5de;
    border-radius: 50%;
    width: auto;
    z-index: 0;
}

.floatleft {
    left: 5px;
    top: 5px;
}
.floatright {
    right: 5px;
    top: 5px;    
}

.ll-headericon.floatleft img {
    width: 70px!important;
    height: auto;
}
.ll-headericon.floatright img {
    width: 70px!important;
    height: auto;
}
.ll-stamp {
    display:none;
}

/* ==================Intro==================*/
.ll-intro {    
    margin: 25px 25px 25px 25px;
    position: relative;
    border: 2px solid #4c4a45;
    background: transparent;
    box-shadow: inset 0px 1px 11px -1px #000000;
}

.ll-intro:before {
    background-color: #141210;
    background-image: url(//images.uesp.net/thumb/a/a0/ON-render-Books_on_a_Map.jpg);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 0;
    opacity: 0.7;
    background-position: 0 -80px;
}

.ll-intro p {
    font-size: 1rem;
    line-height: 1.7rem;
    /*margin: 25px;*/
    margin: 23% 0% 0% 0%;
    background: #faefd7;
    padding: 25px;
    opacity: 0.9;
    box-shadow: 0px 1px 11px -1px black;
}

.ll-sectiontext {
    margin: 0px 25px 25px 25px;
    padding: 15px;
}

.ll-sectiontext p {
    font-size: 1rem;
    line-height: 1.7rem;
}

/* ==================Section Header==================*/
.ll-sectionheader {
    width: calc(100% - 56px);
}

/* ==================Footer==================*/

.ll-footer {
    margin: 30px 25px 25px 25px;
}
}

/* ========================================1240px or more======================================== */

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

/* ==================Headings==================*/

.ll-title_main {
    margin: -12px auto 0px;
    line-height: normal;
}

.ll-title_desc {
    margin: 10px auto -18px;
    line-height: inherit;
}

.ll-title_main span {
    font-size: 4.3em!important;
    border-top: 6px double#8d877a;
    border-bottom: 6px double#83795d;
}

.ll-title_desc span {
    font-size: 1.4em!important;
    border-bottom: 6px double#83795d;
    padding: 5px 15px 5px 15px;
    margin: 0px;
    display: inline-block;
}

/* ==================Dragon 1 + 2==================*/
.ll-headerimg{
    margin-top: 30px;
    /*scale: 95% 70%;*/
}
.ll-headerimg2 {
    opacity: 0.6;
    transform: rotate(180deg);
    margin-bottom: 35px;
    display: block;
}
.ll-headerimg img {
    height: 85px!important;
    width: 700px!important;
}
.ll-headerimg2 img {
    height: 85px!important;
    width: 700px!important;
}

.ll-book-wrapper {
    background: #f1e4c9;
    display: block;
    border: 2px solid#7c776d;
    border-radius: 0px 0px 50% 50%;
    position: absolute;
    margin-top: -94px;
    padding: 3px;
    right: calc(50% - 39px);
}
.ll-book {
    background: #000000;
    border: 1px solid#000000;
    border-radius: 0px 0px 50% 50%;
    opacity: 0.47;
}

/* ==================Stamp==================*/
.ll-stamp {
    display: block!important; 
    right: 7%;
    bottom: 15%;
    transform: rotate(7deg);
    border: 0!important;
    z-index: -1;
    background: transparent;
}
.ll-headericon.ll-stamp img {
    height: 230px!important;
    width: 230px!important;
    opacity: 0.1;
}

/* ==================Icons==================*/
.floatleft {
    left: 35px;
    top: 35px;
}
.floatright {
    right: 35px;
    top: 35px;
}

/* ==================Intro + Section Text==================*/
.xxll-sectiontext p {
    margin: 0px 25px 25px 25px;
}

.ll-sectiontext {
    margin: 0px 25px 25px 25px;
}

/* ==================Section Header==================*/
.ll-sectionheader span {
    box-shadow: 0px 4px 10px -4px #898989!important;
}

.ll-sectionheader {
    background: transparent;
}

/* ==================Navigation==================*/
ul.ll-list {
    margin: 0 25px 0 25px;
}

ul.ll-list.toplinks {
    padding: 0;
    margin: 10px 0 20px 0px;
    border: none!important;
}

.ll-list li {
    width:auto;
}

.ll-list a,
.ll-list a:visited {
    padding: 13px;
    font-size: 1.44em;
}

.ll-footer {
    font-size: 1.3rem;
    line-height: 1.6rem;
    margin: 30px 25px 25px 25px;
}
}

/* ========================================1500px or more======================================== */
@media screen and (min-width: 1500px) {
.ll-headericon.floatleft img,
.ll-headericon.floatright img {
    width: 100%!important;
}
}