/**
top level element:  (the div)

<div class="note_noteless_square">
</div>

**/

.note_noteless_square {
    padding: 7px 10px 7px 10px;
    margin: 4px 4px 4px 4px;
    
    font-family: "Shippori Antique", "segoe UI regular", serif;
    font-weight: 400;
    font-size: 12px;
    font-style: normal;
    letter-spacing: .4px;
    line-height: 19px;

    color: #000000;
    -webkit-text-stroke: 0.0px #000000;

  }




/** how to do overrides old style **/
/* coding style 2 - bold slightly regular color */
/**
.code2 {
    color: #6b3f57;
    font-family: 'Source Code Pro', Verdana;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 1px 1px 0 #ffffff;}
**/
/* chrome version of the above */
/**
@media screen and (-webkit-min-device-pixel-ratio:0) { 
.code2 {
    font-weight: 400;
    -webkit-text-stroke: .7px #6b3f57;    }} 
**/
/* firefox version of the above */
/**
@-moz-document url-prefix(){   
.code2 {
    font-size: 15px;    }}
**/





/** ❥ *********************************************************************************************/
/** ❥ (3) cursor styles ****************************************************************************/
/**************************************************************************************************/
    
/** ✎ regular cursor is melon ******************************************************/
/**
body {
    cursor: url(http://cake.endgame.pk/img/nat990.cur), progress !important;   } **/

/** ✎ link cursor is red heart ******************************************************/
/**
a:hover {
    cursor: url(http://cake.endgame.pk/img/sym530.cur);    } **/






/**
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="http://www.endgame.pk/favicon.ico" type="image/x-icon" />
<!-- this makes the phone screens zoom wayy in -->
<!--meta name="viewport" content="width=device-width, initial-scale=1.0"-->
**/





/**
.nav-sub-menu {
    display: block;
    width: auto;
    border: 1px solid rgba(255,248,248,0.6); 
    border-radius: 16px;
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.3), inset 0px 0px 3px 0px rgba(255,248,248,0.8);
    background: linear-gradient(to bottom, rgba(238,195,195,0.6) 0%, rgba(255,240,240,0.6) 200px , rgba(255,240,240,0.6) 100%); 
    vertical-align:top;   }
**/
 /* width from zero to 900 */
/**
@media screen and (max-width: 900px) { 
.nav-sub-menu {
    padding-top: 1%;     }} **/
/* width from 901 to infinity */
/**
@media screen and (min-width: 901px) { 
.nav-sub-menu {
    padding-top: 13px;      }}

**/









/**
second level elements:  (the h1)

<div class="note_noteless_square">
    <h1>Mini WTB list</h1>
    - regular todo
    <div class="indent1">- indented todo</div>
    <div class="indent2">- indented todo</div>
</div>

**/

.note_noteless_square > h1 {
    margin: 2px 6px 7px -1px;
    padding: 0px 0px 0px 0px;
    display: block;

    font-family: "Shippori Antique", "segoe UI regular", serif;
    font-weight: 400;
    font-size: 14px; /* fallback */
    /* font-size: 1.17em; */
    font-style: normal;
    letter-spacing: .4px;
    line-height: 19px;
    
    color: #000000;
    -webkit-text-stroke: 0.3px #000000;   }

.note_noteless_square > div.indent1 {
    display: block;
    margin-left: 20px;    }
.note_noteless_square > div.indent2 {
    display: block;
    margin-left: 40px;    }
.note_noteless_square > div.indent3 {
    display: block;
    margin-left: 60px;    }
.note_noteless_square > div.indent4 {
    display: block;
    margin-left: 80px;    }
.note_noteless_square > div.indent5 {
    display: block;
    margin-left: 100px;    }
.note_noteless_square > div.indent6 {
    display: block;
    margin-left: 120px;    }
.note_noteless_square > div.indent7 {
    display: block;
    margin-left: 140px;    }
.note_noteless_square > div.indent8 {
    display: block;
    margin-left: 160px;    }






/**
third level elements: (span.strike, span.code, a)
    (can be inside h1??? or no?? have to be inside of plaintext??)

<div class="note_noteless_square">
    <h1>Mini WTB list</h1>
    - I need to buy 2x SSL certs.<br>
    blah blah <a href="blahblah">link words</a> more text here<br>
    - <span class="strike">I ordered doll for sasa.</span><br>
    - text text <span class="underline">emphasized text</span> more text<br>
    - text text <span class="bold">emphasized text</bold> more text<br>
    - text text <span class="italic">emphasized text</span> more text<br>
    text text <span class="code">example code here</span> more text<br>
    text text <span class="emphasized1">emphasized text</span> more text<br>
    text text <span class="emphasized2">emphasized text</span> more text<br>
    text text <span class="emphasized3">emphasized text</span> more text<br>
</div>



**/

.note_noteless_square a {
    display: inline-block;
    line-break: anywhere;
    color: #ffaaa0;
    -webkit-text-stroke: 0.2px #ffb6a0;
    text-decoration: none;    }
.note_noteless_square a:hover {
    display: inline-block;
    line-break: anywhere;
    color: #f69090;
    text-decoration: none;    }

.note_noteless_square span.strike {
    text-decoration: line-through;  }
.note_noteless_square span.underline {
    text-decoration: underline;  }
.note_noteless_square span.bold {
    font-weight: bold;
    letter-spacing: .5px;     }
.note_noteless_square span.italic {
    font-style: italic;  }

.note_noteless_square > span.code {
    font-size: 12px;
    font-family: "mono";
    font-weight: bold;
    color: #4dbbcd;
    line-height: 18px;   }

.note_noteless_square > span.emphasized1 {
    background-color: #73b6c1;
    box-shadow: inset 0px 0px 0px 1px #ffffff;
    border-radius: 5px;
    padding: 0px 5px 3px 5px;
    color: #756100;
    vertical-align: text-bottom;
    line-height: 16px;   }
.note_noteless_square > span.emphasized2 {
    background-color: #dbc3a8; /* #ffcc33 */
    box-shadow: inset 0px 0px 0px 1px #ffffff;
    border-radius: 5px;
    padding: 0px 5px 3px 5px;
    color: #756100;
    vertical-align: text-bottom;
    line-height: 16px;    }
.note_noteless_square > span.emphasized3 {
    background-color: #b8d3d7;
    box-shadow: inset 0px 0px 0px 1px #ffffff, inset 0px 0px 0px 2px #81701c;
    border-radius: 5px;
    padding: 0px 5px 3px 5px;
    color: #756100;
    vertical-align: text-bottom;
    line-height: 16px;   }






/** mobile overrides for everything above **/


/** width from zero to 1100 ****/
@media screen and (max-width: 1100px) { 



}


/** width from 1101 to 1600 ******************************************************/
@media screen and (min-width: 1101px) and (max-width: 1600px) {  
}

/** width from 1601 to infinity ******************************************************/
@media screen and (min-width: 1601px) { 
}