/* MajigMedia.com 2019 */
   /* @import url('./layout.css');    
    @import url('./toolbar.css');    
    @import url('./menus.css');
   */
:root {
  --primary: #e1ae00; /* #d4a82d */
  --primary-alt: #e59600;
  --secondary: #4f4f4f;
    
    
  --primary-bg:  #131217;
  --secondary-bg:  #1b1d1f; 
    
  --primary-txt: #f2f2f2; //#ffffff;
  --secondary-txt: #a3a3a3; //silver;
    
        /* color: #474344; /* darkgray 
    color: #a3a3a3;  /* silver */
}

html, body {
    height: 100%; 
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/*
// gold #d4a82d

*/

body {
    background: #000 url('../images/frame/bg2.png') no-repeat fixed top center; 

    /* color: #474344; /* darkgray */
    color: var(--secondary-txt);  /* silver */
    font-family: Open Sans, Verdana, Arial, Helvetica, sans-serif;
    border-top: 0px;
    border-collapse: collapse;
    padding-bottom: 6rem; 
    font-size: 14px; 
  
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    color: var(--primaryTxt); 
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 600;
}

h1 { font-size: 1.6rem;  line-height: 16px; letter-spacing: 0.4px; 
    margin-bottom: 20px;}
h2 { 
    display: block;
    clear: left;
    padding: 5px;
    font-size: 1.2rem;
    font-style: italic;
    text-transform: none;
    color: var(--secondary-txt); 
    letter-spacing: 0.4px; 
}
h3 { 
    display: block;
    clear: left;
    font-size: 1.7rem;
    text-transform: none;
   color: var(--primary); 
    letter-spacing: 0.4px; 
}
hr {

    clear: left;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
    border-top: 1px solid #1b1d1f;

}
a {   color: var(--primary); text-decoration-line: none; }

.scale-with-grid, .scale , .scalable { 
    width: 100%;
    max-width: 100%; 
}

.nopadding { padding: 0; }

.float-left{ float: left; }
.float-right{ float: right; }

.text-left{ text-align: left; }
.text-right{ text-align: right; }

.text-center{ text-align: center; }

.image-left, .alignleft { display: block; float: left;  margin: 0px 15px 10px 0px; }
.image-right, .alignright { display: block; float: right; margin: 0px 0px 10px 15px; }
.image-center, .aligncenter { display:block; margin:0 auto; }

.primary { color: var(--primary); }
.secondary { color: var(--secondary); }

.hilite {
    font-style: italic;
    color: var(--primary);
    text-decoration: underline;
}
.wrapper {
    width: 100%;
    min-height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    background: none; 
    border-width: 0px;
}
/* Larger than mobile */
@media (min-width: 400px) {

}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
    .wrapper { width: 100%; margin: 0 auto; }
}
/* Larger than tablet */
@media (min-width: 750px) {
    .wrapper { width: 95%; max-width: 900px; }
}
/* Larger than desktop */
@media (min-width: 1000px) {
   // .wrapper { width: 90%; }
    
}
/* Larger than Desktop HD */
@media (min-width: 1200px) {
    //.wrapper { width: 80%; }
}

/* a warning div for out of date browsers */
.wrapper #browser { display: none; text-align: center; border-radius: 8px; padding: 5px; background-color: #fff; margin-bottom: 5px; }

/*
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


h2 { color: #fff; display: block; overflow: hidden;  font-size: 16px; font-weight: 400; text-transform: uppercase;  line-height: 24px; 
letter-spacing: 0.1px; padding: 0; margin: 0; 
}
h3 { color: #fff; font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: 22px; letter-spacing: 0.1px; padding: 0; margin: 0 0 10px; }

h4 { color: #fff; font-size: 12px; font-weight: 400; text-transform: uppercase; line-height: 22px; letter-spacing: 0.1px; padding: 0; margin: 0 0 10px; }

hr {
    clear: left; 
    margin-top: 3px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid #1b1d1f;
}

*/

#head{ padding: 0px;  }

#head #top {  padding: 15px 5px; text-align: right; color: var(--secondary-txt); font-size: 1.0rem;  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;  margin-bottom: 10px; }
#head #top a { font-weight: 600; 
    color: var(--secondary-txt);
    text-decoration: none; padding: 0 8px;  }
#head #top a.flat { color: var(--primary-txt);  }

.navbar { 
    text-align: center; 
    font-size: 1.2rem; 
    color: var(--primary-txt); 
    letter-spacing: 2.0px; 
    margin: 20px 0; 
    text-transform: uppercase; 
}

.navbar .logo {  
    float: left; 
    text-align: center;
    vertical-align: top;
    border: 0;
    padding:0;
    text-transform: uppercase;
}
.navbar .logo a{  
    padding:0;
    margin:0;
}

//div.head div.navbar {  padding-left: 220px; }
//div.head div.navbar .logo { margin-left: -210px;   } 

.navbar .menu { margin-bottom: 10px; overflow: hidden;  text-align: center;  }
.navbar .menu a {  color: var(--primary-txt); display: inline-block;text-decoration: none; padding:  3px 3px; margin: 5px 2px; overflow: hidden; font-weight: 600; 
    text-align: center; }
.navbar .menu a.active {  color: var(--primary);  border-bottom: 1px solid var(--primary-alt); }

.navbar .submenu { font-size: 1.1rem; color: #6c6c6c;  letter-spacing: 1.0px;  padding: 5px 0;}
.navbar .submenu a { color: #6c6c6c; text-decoration: none; padding:  0 2px 4px 4px; margin: 0 8px; text-transform: capitalize; }
.navbar .submenu a.active {  color: #fff;  border-bottom: 1px dashed #6c6c6c; }

.ui.menu { font-size: 20px; }
.navbar .menu ul {  } 
.navbar .menu ul li, .navbar .menu li { display: inline; overflow: hidden; padding: 0px 4px;}
.navbar .submenu ul {  } 
.navbar .submenu ul li, .navbar .menu li { display: inline;  }

.ui.vertical.tabular.menu { 
    color: var(--primary-txt); 
    margin-bottom: 20px;
    border: none;
    
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.0s;
    animation-name: fade;
    animation-duration: 1.0s;
    transition: background-color 0.6s ease; 
 }
.ui.vertical.tabular.menu .header{
    background: 0 0;
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    border-right: none;
    padding: .5em 1.33333333em;
    color: var(--secondary-txt);
    font-size: 1.1rem; 
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.ui.vertical.tabular.menu .item {
    font-size: 1.2rem; 
    color: var(--secondary-txt);
}
.ui.vertical.tabular.menu .item:hover {
    background: 0 0;
    border-color: 0 0 ;
}

.ui.vertical.tabular.menu .menu .item:hover {
    background: var(--primary-bg);
    border-color: var(--primary-bg) ;
}
.ui.vertical.tabular.menu .item.active, .ui.vertical.tabular.menu .item.active:hover {
    background: var(--secondary-bg);
    border-color: var(--secondary-bg);
}
.ui.vertical.pointing.menu .menu .item.active:after{
        background-color: var(--secondary-bg);
    border-top: 1px solid var(--secondary-bg);
    border-right: 1px solid var(--secondary-bg);
    
}

.ui.vertical.tabular.menu .item a{
    color: var(--secondary-txt);
}
.ui.vertical.tabular.menu .item.active a{
    color: var(--primary);
}

.ui.vertical.tabular.menu .item .label{ background: var(--secondary-bg); }
.ui.vertical.tabular.menu .item.active .label{ background: var(--primary-bg); }

/*
.ui.vertical.tabular.menu .item .label{ background: #000; }
.ui.vertical.tabular.menu .item .label:nth-of-type(odd){  background: #000; }

/*

#nav {  }
#nav.menu { 
    color: #fff;
    font-weight: 600; 
    line-height: 16px; 
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 20px; 
    padding: 10px 10px 50px 10px; 
    background: red;//#1b1d1f; 
    border-bottom: 2px solid #d4a82d;
    
}

#nav .menu .row { font-size: 1.2rem; padding: 4px 5px; margin: 2px -5px;  font-weight: 500; }
#nav .menu .row::first-letter { font-size: 1.6rem; }
#nav .menu .row:nth-of-type(1) { margin-top: 10px; }
#nav .menu .row:nth-of-type(odd) { background: #131217; }
#nav .menu .row a { color: #ccc; text-decoration: none; }
*/
#content { padding: 0 10px 10px; line-height: 16px; letter-spacing: 0.4px;}

#foot { margin: 15px 20px; color: var(--primary-txt);; font-size: 1.0rem; text-transform: capitalize; letter-spacing: 0.4px; font-weight: 400; }
#foot a { font-weight: 600; color: var(--secondary-txt); text-decoration: none; padding: 0 6px; font-size: 1.1rem;}
#foot div { margin-top: 10px; }
#foot .dark { color: var(--primary-bg); font-size: 0.9rem; } 
#foot div.debug { color: var(--secondary-bg); font-size: 1.0rem; text-align: center; font-weight: 400; }
#foot div.debug div { background-color: #ddd; color: #000000;  font-size: 1.0rem; text-align: left; font-weight: 400; }

#debug { font-family: monospace; font-size: 1.2rem; color: #fff; background: rgb(200, 100, 100); }
#debug blockquote { font-family: monospace; font-size: 1.2rem; color: #000; background: rgb(200, 100, 100); }

/*
div.content { 
    color: #8a8a8a;
    margin: 70px 40px 70px 20px;
    padding: 0 10px;
    overflow: hidden;
	max-width: 980px;
}


div.content #left { 
    float: left; 
    width: 200px;  
    font-size: 16px; 
    color: #fff; 
    text-transform: uppercase; 
    line-height: 24px; 
    letter-spacing: 0.1px; 
    float: left; 
 }
div.content #left .nav { 
    margin-bottom: 20px; 
    padding: 10px 10px 50px 10px; 
    background: #1b1d1f; 
    border-bottom: 5px solid #d4a82d;
}

div.content #left .row { font-size: 11px; padding: 2px 5px; margin: 0 -5px; }
div.content #left .row::first-letter { font-size: 1.3em; }
div.content #left .row:nth-of-type(1) { margin-top: 5px; }
div.content #left .row:nth-of-type(odd) { background: #131217;  }
div.content #left .row a { color: #ccc; text-decoration: none;  }
*/

/*
div.table { background: #131217; padding: 7px; margin: 5px 0 10px 0; clear: left; overflow: hidden; text-transform: uppercase; font-size: 11px; }
div.table div.row{ clear: left; float: left; height: 24px; }
div.table div.row:nth-of-type(odd){ background: #1b1d1f;   }
div.table div.row:nth-of-type(even){  background: #131217; }
div.table div.row:first-of-type{ font-weight: 800;   }
div.table div.no-head:first-of-type{ font-weight: 400;   }
div.table div.row div { padding: 4px 4px; float: left; }


div.table div.row div.name { width: 200px; }
div.table div.row div.name_short { width: 100px; }
div.table div.row div.icon { width: 10px; }
div.table div.row div.value { width: 40px; }
div.table div.row div.edit { width: 20px; float: right; }

*/

@-webkit-keyframes fade {
    from {opacity: .0}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .0}
    to {opacity: 1}
    }