/* 2012 - Basic Page Setup for my main pages during the conversion to HTML5 and CSS3 */
/* this stylesheet contains page01, header, nav's, footer, content01,02,03 and table01,02,03,04,05 etc.. */
/* this is a copy of /landistwo.com/stylebasic2012.css and defines the div ID positioning - 2019.03 */

/* trying color from 'coding.php', a little darker (mycss3 was #faf9f6) - 10.12.13 - Landis */
/* moved body-bg-color to style-code.css - 2019.03.12 
body {
    background-color:rgba(240,240,240,1.0);
    background-color: rgba(200,200,200,.2);
    background-color: rgba(72,72,72,0.9);
}*/

/* box-shadow values: offset (right) width blur radius - NOT: top,right,bottom,left */ 

/* ###### 2019.03.21, had to change right nav to scroll as it was getting long in some sections and because it's fix, bottom items under browser bottom edge */
/* Works! got from: https://stackoverflow.com/a/23235794/768246 */
/* But,,, it also affects the dom (browser) scrollbar in Vivaldi (chromium) 2019.03.21 */
/* Added to the nav box like any other pseudo selector works */

  /*-webkit-border-radius: 80px; */
  /*rgba(0, 0, 0, 0.09);*/

/* ::-webkit-scrollbar {
  width: 6px; 
   background-color: rgba(96,96,96,1.0);
  -webkit-border-radius: 8px;
}
::-webkit-scrollbar:hover {
  background-color: rgb(0,137,153);
}

::-webkit-scrollbar-thumb:vertical {
  background: rgba(96,96,96,0.61);
  -webkit-border-radius: 8px;
}
::-webkit-scrollbar-thumb:vertical:active {
  background: rgba(96,96,96,0.61);
  -webkit-border-radius: 8px;
} */

/* ###### End scroll change ###### */

/* ###### Div ID's ####### */

#page01 {
    position: relative;
    z-index: 20;

    width: 960px;
    height: auto;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 4px;
    margin-left: auto;

    border: 1px solid gray;
    /*border:1px solid pink; */
    border-radius: 4px;
    background-color: rgba(128,128,128,1.0); /*equivalent 0,0,0,0,0.5*/
    box-shadow: 2px 2px 2px #666666;
}

#header {
    position: relative; /*position based on 'body'*/
    z-index: 10;
    /*border:10px solid green; */

    width: 960px;
    height: 165px;
    padding: 2px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: 0px; /* 20.04.13, was auto; */

    text-align: center;

    border: 1px solid gray;
    border-radius: 4px;
    background-color: rgba(255,255,255,1.0);
    box-shadow: 1px 1px 2px #888888;
    /* box-shadow was 4px for years - changed 2019.03*/
}

/*positioned based on 'body'*/
/*absolute makes page01 'go away'*/
#navleft {
    position: absolute;
    z-index: 7;

    width: 160px;
    height: auto;
    margin-top: 0px;
    margin-left: 0px;

    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background-color: rgba(255,255,255,1.0);
}

/* position should be positioned based on header*/
#navright {
    position: absolute;
    z-index: 8;

    width: 160px;
    height: auto;
    margin-top: 2px; /* was 0, changed to match coding.landistwo 2019.03.14 */
    margin-right: 0px;
    margin-left: 804px; /* was 800, changed to match coding.landistwo */

    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background-color: rgba(255,255,255,1.0);
}

/* nav right, on music.php. normal nav right covers right column of music table 2019.03.16 */
/* made more narrow to make room for right column of the list on music.php */
#navrightnarrow {
    position: absolute;
    z-index: 8;

    width: 120px;
    height: auto;
    margin-top: 2px; /* was 0, changed to match coding.landistwo 2019.03.14 */
    margin-right: 0px;
    margin-left: 804px; /* was 800, changed to match coding.landistwo */

    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background-color: rgba(255,255,255,1.0);
}

/*positioned based on 'body'*/
/*absolute makes page01 'go away'*/
#navleftNoRight {
    position: absolute;
    z-index: 7;

    width: 160px;
    height: auto;
    margin-top: 0px;
    margin-left: 0px;

    text-align: left;

    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background-color: rgba(255,255,255,1.0);
}

/* position should be positioned based on header*/
#navright-abs {
    position: absolute;
    z-index: 8;

    width: 160px;
    height: auto;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 800px;

    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background-color: rgba(255,255,255,1.0);
}

/* should be fixed position based on header*/
/* 2019.03, getting more links, had to scroll the nav_r in MyCSS and SepcialChars sections */
#navright-fix {
    position: fixed; 
    z-index: 8;

    width: 160px;
    /*height: auto;*/
    max-height: 484px;
    overflow-y: auto;
    overflow-x: hidden;

    margin-top: -1px;
    margin-right: 0px;
    margin-left: 804px;

    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background-color: rgba(255,255,255,1.0);
    /* TEST background-color: red !important; */
    box-shadow: 1px 2px #888888;
}

/* 2019.03.21 - in SpecialCharacters, the nav-right was gettin long with links so i forced scroll above.
  ::-webkit-scrollbar allowed me to change width of scrollbar in div */
/*#navright-fix::-webkit-scrollbar {
  width: 6px; 
   background-color: rgba(96,96,96,1.0);
  -webkit-border-radius: 8px;
}*/

/* Nav-Right using DL, dt, dd - starting with coding.landistwo/index.php?id=code 2019.03.28 */
/* margin does nothing in dl for moving list up */
/* had to put in a div and -8px on it to get tucked under header */
#Nav-Right dl {
    list-style-type: none;

    width: 85%;
    margin: 0px 0px 0px 0px;
    padding: 0px;

    font-family: 'DejaVu Sans', 'FreeSans', 'Droid Sans', Verdana, Helvetica, Arial, Lucida; color:black;
    font-size: inherit;
    font-weight: 500;
    color: red !important; /* for testing */

    /* moved to li: box-shadow: 1px 1px grey; */
}

    /* Menu items used in new fixed menu */
    /* doesn't work here: border-collapse: separate; */
    /* Why is this width different than dt? doesn't make sense - I had different padding*/
#Nav-Right dd {
    list-style-type: none;

    width: 154px;
    margin: 0px -2px 4px 2px;
    padding: 2px 0px 4px 1px;

    box-shadow: 1px 1px grey;

}

/* Menu using dt (title) like ul/li:first-child */
#Nav-Right dt {
    list-style-type: none;
    /*background-color: #e0e0e0;*/

    width: 154px;
    height: auto;
    min-height: 16px;
    margin: 0px -2px 4px 2px;
    padding: 2px 0px 4px 1px;
    overflow: hidden;
  
    border: 0px solid #303030;
    border-radius: 1px;
    box-shadow: 1px 1px grey;
    
    font-family: "DejaVu Sans", "Open Sans", "FreeSans", Helvetica, Arial, "Philosopher", Tahoma;
    font-size: 14px;
    font-weight: 400;
    color: black !important;
    text-align: center;
    /*background-image: linear-gradient(to right, rgba(224,224,224,0.8), rgba(192,192,192,0.9), rgba(224,224,224,0.8));*/ /* Standard syntax (must be last) */
    background-image: linear-gradient(to right, rgba(192,192,192,0.9), rgba(254,254,254,0.7), rgba(192,192,192,0.9));
}

/* Nav-Right UL/li 'menu' for coding.landistwo.com starting with index.php replacing table nav_r.html- 2019.03.28 */
/* Decided to go with dl,dt,dd - 2019.03.28 */
/* width draws right margin (border) IN from right, leaving left margin (border) in place */
#Nav-Right ul {
    list-style-type: none;

    width: 86%;
    margin: 4px 3px 2px 13px;
    padding: 2px;

    font-family: 'DejaVu Sans', 'FreeSans', 'Droid Sans', Verdana, Helvetica, Arial, Lucida; color:black;
    font-size: inherit;
    font-weight: 500;
    color: red !important; /* for testing */

    /* moved to li: box-shadow: 1px 1px grey; */
}

#Nav-Right li {
    /* doesn't work here: border-collapse: separate; */
    list-style-type: none;

    width:160px;
    margin: 1px -4px 0px -8px;

    box-shadow: 1px 1px grey;

}

#Nav-Right li:first-child {
    list-style-type: none;
    background-color: #e0e0e0;
  
    width: 160px;
    height: 18px;
    margin: -2px -4px 4px -12px;
    padding: 2px;
  
    border: 1px solid #303030;
    border-radius: 1px;
    
    color: black !important;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

/*div just above nav_r - notice that fixed nav_r is on purpose as a test*/
#navrighttop {
    position: fixed; 
    z-index: 9;

    width: 156px;
    height: auto;
    margin-top: -20px;
    margin-right: 2px;
    margin-left: 800px;
    padding: 2px; 

    font-size: 10px; 
    color: white; 
    text-align: center; 
    line-height: 14px; 

    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background-color: rgba(255,255,255,1.0);
    /*background-color: gray; */

}

/* 04.04.13 - margin-left was 178px, but i changed while working on Video Aspect Ratio page */
#footer {
    position: static;
    z-index: 11;

    width: 795px;
    height: auto;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: 180px;

    font-size: .7em;

    text-align: center;

    border: 1px solid #e0e0e0;
    border-radius: 2px;
    background-color: rgba(255,255,255,.2);
    box-shadow: 4px 4px 4px #888888;
}

#footercenter {
    position: static;
    z-index: 11;
    /*width:960px; */
    /*was 644 30.03.13 */

    width: 620px;
    height: auto;
    padding: 3px;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;

    font-size: .7em;

    text-align: center;

    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: rgba(255,255,255,.2);
    box-shadow: 2px 2px 2px #888;
    /* box-shadow was 4px for years - changed 2019.03*/
}

#search {
  width: 92%;
  height: 480px;
  padding: 12px 24px;
  border: 1px solid rgb(0,137,157);
  border-radius: 24px;
  background-color: rgb(128,128,128);
}

/* ###### Classes ###### */

/*position based on 'body', 'wraped' from previouse content*/
.content01 {
    position: inherit;
    z-index: 7; /*was 5*/

    width: 640px;
    height: auto;
    padding: 4px; /*was 0*/
    margin-top: -4px; /*was -5*/
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: 164px;

    border: 1px solid #999999;
    border-radius: 4px;
    /*border-radius: 4px;*/
    background-color: rgba(255,255,255,1.0);
    box-shadow: 2px 2px 2px #909090;
}

/*position based on 'body', 'wraped' from previouse content, used w/o right nav as in mozillabookmarks.php*/
.content02 {
    position: inherit;
    z-index: 5;

    width: 790px;
    height: auto;
    padding: 0px 0px 0px 10px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: 164px;

    border: 1px solid #999;
    border-radius: 4px;
    background-color: rgba(255,255,255,1.0);
    box-shadow: 2px 2px 2px #909090;
}

/*position based on 'body', 'wraped' from previouse content, used w/ right nav and narrow content ie mozillaHowTo*/
.content03 {
    position: inherit;
    z-index: 5;

    width: 624px;
    height: auto;
    padding: 0px 4px 0px 4px;
    margin-top: -4px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: 164px;
    /*background-color:pink; test where is */

    border: 1px solid rgb(96,86,119);
    border-radius: 4px;
    background-color: rgba(255,255,255,1.0);
    box-shadow: 2px 2px 2px #909090;
}

/*position based on 'body', 'wraped' from previouse content, used w/ right nav and narrow content ie ToDo 10.04.13*/
.content04 {
    position: inherit;
    z-index: 5;

    width: 624px;
    height: auto;
    padding: 0px 4px 0px 8px;
    margin-top: -4px;
    margin-right: auto;
    margin-bottom: 5px;
    margin-left: 164px;
    /*background-color:pink; test where is */

    border: 1px solid rgb(96,86,119);
    /* border:3px solid red; */
    border-radius: 4px;
    background-color: rgba(255,255,255,1.0);
    box-shadow: 2px 2px 2px #909090;
}

/*position based on 'body', used on MyCSS3.php page 23.04.13 */
.content05 {
    position: inherit;
    z-index: 5;

    width: 626px;
    height: auto;
    padding: 0px 4px 0px 4px;
    margin-top: 2px;
    margin-right: auto;
    margin-bottom: 2px;
    margin-left: 162px;
    /*background-color:pink; test where is */

    border: 1px solid rgb(96,86,119);
    border-radius: 4px;
    background-color: rgba(255,255,255,1.0);
    box-shadow: 2px 2px 2px #909090;
}

.fuckoff01 {
    font-size: 18px;

    color: red;
}

/* ###### Tables ###### */

table,
th,
td.table01 {
    width: 640px;
    margin-right: auto;
    margin-left: auto;

    font: 100%;
    font-family: Arial, Tahoma, Helvetica, sans-serif;
    /*    font-size: 12px; Trying to 'normalize' for html5 validator, a few unicode characters. 27.04.13 */
    font-size: inherit;
    font-stretch: semi-condensed;
    line-height: 18px;
    border-spacing: 0px;
    border-collapse: separate;

    text-align: center;

    color: black;
    border-width: 1px;
    border-style: outset;
    border-color: gray;
    background-color: white;
}

/* 04.2012, experimented with combining the following separate table, th, tr, td definitions into one above, copied font def from my p */
/*th,td.table01 {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: #e0e0e0;
    background-color: white;
    text-align:center;
    -moz-border-radius: ;
    font-family: Arial, Tahoma, Helvetica, sans-serif; 
    font-size: 12px;  
    font-stretch: semi-condensed; 
    color:black;
}
*/

/*copied from my p */
/*td.table01 {
    border-width: 1px;
    padding: 1px;
    border-style: inset;
    border-color: #e0e0e0;
    background-color: white;
    text-align:center;
    -moz-border-radius: ;
    font-family: Arial, Tahoma, Helvetica, sans-serif; 
    font-size: 12px;  
    font-stretch: semi-condensed; 
    color:black;
}
*/

/* not passing validation - 26.04.13 */
/*copied from my p */
/*table.table01 td.l {
    border-width: 1px;
    padding:1px;
    padding-left:40px;
    border-style: inset;
    border-color: #e0e0e0;
    background-color: white;
    text-align:left;
    -moz-border-radius: ;
    font-family: Arial, Tahoma, Helvetica, sans-serif; 
    font-size: 12px;  
    font-stretch: semi-condensed; 
    color:black;
}
*/

/* '.table02' styled specifically for firefox version table on 'MozillaBookmarks.php' 04.2013 */
table,
td,
th.table02 {
    /*margin:1px ; */
    padding: 0px;

    border-spacing: 3px 2px;
    border-collapse: separate;
    /* border:1px solid rgb(96,96,96); */

    border-top: 0px solid rgb(96,96,96);
    border-right: 1px solid rgb(96,96,96);
    border-bottom: 1px solid rgb(96,96,96);
    border-left: 0px solid rgb(96,96,96);
}

img.table02 {
    width: 40px;
    margin: auto;

    border: 0px solid gray;
}

/* '.table03' styled for the 'HTML-Unicode_entities.html' 28.04.13 */
table.table03 {
    width: 618px;
    padding: 0px;
    margin: 0px;

    border-spacing: 3px 2px;
    border-collapse: separate;

    border-top: 0px solid rgb(96,96,96);
    border-right: 1px solid rgb(96,96,96);
    border-bottom: 1px solid rgb(96,96,96);
    border-left: 0px solid rgb(96,96,96);
}

table.table03 tr:nth-child(odd) {
    background-color: #efefef;
}

table.table03 th {
    background-color: #efefef;
}

/*html.table03 {
  overflow-y:scroll; 
} */

table.tabelgen01 {
    width: 440px;
    margin-right: auto;
    margin-left: auto;

    border-spacing: 1px 1px;
    border-collapse: separate;

    text-align: center;

    border: 0px;
}

td.tablegen01 {
    padding: 1px;

    text-align: left;
}

table.nav01 {
    width: 160px;
    height: auto;
    padding: 0px;
    margin: 2px 0px 0px 0px;

    border-collapse: separate;

    border: 0px solid gray;
    border-width: 0px;
    border-style: outset;

    /* TEST background-color: yellow; TEST */
}

table.nav01 th {
    padding: 1px;
    margin: 0px 0px;

    font-family: "DejaVu Sans", "Open Sans", "FreeSans", Helvetica, Arial, "Philosopher", Tahoma;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;

    text-align: center;

    /*rem'd bg-color 2019.04.01, to match new Nav-Right dt*/
    /*background-color: #e0e0e0;*/
    background-image: linear-gradient(to right, rgba(192,192,192,0.9), rgba(254,254,254,0.7), rgba(192,192,192,0.9));
}

/* td.nav01 does not work... syntax should be table.nav01 td - test and proven - Landis */
table.nav01 td {
    width: 144px;
    height: 16px;

    font-family: "DejaVu Sans", "Open Sans", "FreeSans", Helvetica, Arial, "Philosopher", Tahoma;
    font-size: 12px;

    text-align: left;
    text-indent: 2px;

    color: rgb(128,128,128);
    border-top: 0px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    border-left: 0px;
}

/* 30.04.13 tried to style nav_r_links w/o changing each td class-lbbcolor */
table.navrightlinks {
    width: 100%;
    padding: 1px;
    margin-right: auto;
    margin-left: auto;

    border: 0px;
}

table.navrightlinks td {
    padding: 0px;
    margin: 1px;

    text-align: left;

    border: 0px solid red;
}

table.navrightlinks img {
    margin: auto;

    border: 0px solid purple;
}

/* Used for 'menu' at top of page body with relevant links to 'other' pages on my site... */
table.menu01 th td a {
    width: 100%;
    height: 18px;
    margin-right: auto;
    margin-left: auto;

    font: 100%;
    font-family: Arial, Tahoma, Helvetica, sans-serif;
    font-size: inherit;
    font-stretch: semi-condensed;
    line-height: 16px;
    border-spacing: 0px;
    border-collapse: separate;

    text-align: center;

    color: rgb(96,0,0);
    border-width: 1px;
    border-style: outset;
    border-color: gray;
    background-color: rgb(200,200,200);
}

/* Used as a menu - first developed on 'MyCSS.html' (php) as an achor link type 'menu' early 2013 */
table.menu00 {
    width: 99%;
    height: 16px;
    padding: 2px;
    margin: 1px auto;

    border-spacing: 2px;
    border-collapse: separate;

    border: 1px solid gray;
    /* title:index; */
}

table.menu00 td {
    padding-left: 2px;

    font-size: 12px;

    color: rgb(128,0,0);
    border: 1px solid gray;
}