/** content info = the main page style **/
/** content is where the content goes **/
/**
colours:
yellow : very light: #fffde7;

American paper yellow background-color: #fefdc4;

**/



/** 

============================== THINGS THAT MUST BE DONE. =======================================
screen sizes??? and min screen size limit, 







============================== Flow diagrams =======================================
OKAY : file:///C:/Users/purple/Desktop/BaseWordsRebuild/BaseWord/letter_combos_sounds/silent-e.html

OKAY : file:///C:/Users/purple/Desktop/BaseWordsRebuild/BaseWord/suffixes/double-consonant-vowel-suffix.html
Done, (The flow diagram drops down at 400 but is currently set to 500)

OKAY : file:///C:/Users/purple/Desktop/BaseWordsRebuild/BaseWord/suffixes/suffix-endings.html
DONE: drop down at 400 but it needs to be 438,

OKAY: file:///C:/Users/purple/Desktop/BaseWordsRebuild/BaseWord/suffixes/words-ending-ic.html

OKAY: file:///C:/Users/purple/Desktop/BaseWordsRebuild/BaseWord/plurals/ys-or-ies.html

Findings: 

**/



/** ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** ** page specific css ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** **/       

body {letter-spacing: 1px;}      
.dropdown-item:focus, .dropdown-item:hover {background-color: #f2fb81;}    
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {color: rgba(0,0,0,.9);background-color: #fefdc4;border-radius: 5px;}
.navbar-collapse {font-size: 1.2rem;}    
span.aqua-color {color: #6e6e6e;background-color: #fdfd60;padding: 0 2px 0 3px;margin: 0 2px 0 2px;border-radius: 5px;}        
.themed-grid-col {padding-top: .75rem;padding-bottom: .75rem;background-color: rgba(86, 61, 124, .15);border: 1px solid rgba(86, 61, 124, .2);}
.themed-container {padding: .75rem;margin-bottom: 1.5rem;background-color: rgba(0, 123, 255, .15);border: 1px solid rgba(0, 123, 255, .2);}    
.py-3 {padding-top: 0rem!important;padding-bottom: .7rem!important;background-color: chartreuse;}
.mb-4 {margin-bottom: .3rem!important;}    
.navbar-expand-lg .navbar-nav {margin-right: auto!important;}    
.container {width: auto;max-width: 680px;padding: 0 15px;}
/** .mt-auto {margin-top: auto!important;}  **/  
.bd-placeholder-img {font-size: 1.125rem;text-anchor: middle;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
@media (min-width: 768px) {.bd-placeholder-img-lg {font-size: 3.5rem;}}    
.navbar {z-index: 1; position: fixed;width: 100%;}
.bg-light {background-color: #f8f9faf2!important;}
main.flex-shrink-0 {margin-top: 68px;}    
    
/** ========= ========= ========= ========6= content container ========= ========= ========= =========  **/ 
div.content {margin: 20px auto 60px auto; width: 60%; padding:.7% 2.4% .7% 2.4%; background-color: rgba(255, 252, 250, 0.75); border-radius: 2px; box-shadow: 3px 2px 28px rgba(176, 176, 176, 0.75);}

@media only screen and (max-width: 1300px) {div.content {width:84%; margin: 15px auto 50px auto;}}
@media only screen and (max-width: 400px) {div.content {width:92%; margin: 15px auto 35px auto;}}

/** ========= ========= ========= ========7= subsections container ========= ========= ========= =========  **/     
    
/** ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** ** page specific css ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** **/    
.col {width: 100%;}

hr {margin: 0 0 47px 0;}

/** ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** ** page specific css ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** **  ** **/       
    













/** =================================================================== cross-word css **/

ul.word-diagram-crossword {display:flex; margin: 3% auto; text-align: center; max-width: 700px; width: 100%;}


ul.word-diagram-crossword li {display: inline-block; font-size: 30px; background-color: #fbff0038; text-align: 
center; margin: 6px; padding: 6px; border-radius: 8px; border: dotted 1px #8080803d; height: 100%;} 
ul.word-diagram-crossword li.red-text {color:red;}
ul.word-diagram-crossword li.grey-text{color:grey;}   
ul.word-diagram-crossword li.content-text {height: 100%; width: auto; background-color: #ccf4f5;}  
ul.word-diagram-crossword li.no-background {border: dotted 0px #8080803d; background-color: #fbff0000;}      
/** assess this css for cleaner approach **/
ul.word-diagram-crossword li.hide-info {opacity: 0;}  
ul.word-diagram-crossword li span.grey-text {color:grey; font-size: 20px;}
ul.word-diagram-crossword li.strike-through {speak: spell-out; width: auto; text-decoration: line-through; color: red;}


@media only screen and (max-width: 850px) {ul.word-diagram-crossword li {font-size:18px;}
                                           ul.word-diagram-crossword li span.grey-text {font-size:18px;}
                                            }   

@media only screen and (max-width: 750px) {
                                            ul.word-diagram-crossword {margin: 0% auto; padding: 0px;}
                                            ul.word-diagram-crossword li {padding:2px; margin:2px;  font-size:19px;}
                                           ul.word-diagram-crossword li span.grey-text {font-size:19px;}
                                            }  

@media only screen and (max-width: 550px) {
                                            ul.word-diagram-crossword {margin: 0% auto; padding: 0px;}
                                            ul.word-diagram-crossword li {font-size:13px;}
                                           ul.word-diagram-crossword li span.grey-text {font-size:13px;}
                                            }  

@media only screen and (max-width: 450px) {
                                            ul.word-diagram-crossword {margin: 0% auto; padding: 0px;}
                                            ul.word-diagram-crossword li {font-size:11px;}
                                           ul.word-diagram-crossword li span.grey-text {font-size:11px;}
                                            }  



/** =================================================================== END, cross-word css **/

table {margin: 18px auto; border: solid grey 0px;width:100%;}
table tr {border: solid grey 0px; }
table tr td {width:1%; text-align: center; font-size: 29px; border: solid #00000014 0px;}
table tr td.table-info {font-family: 'Raleway', sans-serif; list-style-type: none; font-size: 23px; color: black; background-color: #f7f7f7; border-radius: 4px; border: dotted 1px #d2d2d2; padding: 5px;}    
table tr td.table-info-bespoke {display:block; width: max-content;}
table tr td.info {backgorund-color:grey; background-color: #f7f7f7; border-radius: 4px; border: dotted 1px #d2d2d2; padding: 5px;}
table tr td.fill-gap {}
span.text-red {color: red;}



@media only screen and (max-width: 350px) {table tr td.table-info {font-size:11px;}}   
@media only screen and (max-width: 550px) {table tr td.table-info {padding:1px;}}   


img.dash-change {transform: rotate(90deg);padding: 0 5px 0 0px;}

img.bracket-icon {margin: 20px 0px 0 0px;}
img.arrow-icon {height: 21px; margin-top: 10px; opacity:.7;}
img.arrow-icon-up {height: 21px; margin-top: 10px; opacity:.7; transform:rotate(90deg);}
img.arrow-icon-down {height: 21px; margin-top: 10px; opacity:.7; transform:rotate(-90deg);}    

/** ** ** ** ** ** *Rubbish bootstrap  ** ** ** ** ** ** **/
img, svg {vertical-align: unset;}
/** ** ** ** ** ** *Rubbish bootstrap  ** ** ** ** ** ** **/

@media only screen and (max-width: 650px) {table tr td.table-info {font-size:13px;}
 img.bracket-icon {height: 10px; margin: 20px 0px 0 0px;}
 img.arrow-icon {height: 10px; margin-top: 10px; opacity:.7;}
 img.arrow-icon-up {height: 10px; margin-top: 10px; opacity:.7; transform:rotate(90deg);}
 img.arrow-icon-down {height: 10px; margin-top: 10px; opacity:.7; transform:rotate(-90deg);}     
 img.dash-change {height: 10px; transform: rotate(90deg); padding: 0 5px 0 0px;}  
 img.down-dash {height: 10px;}   
    table tr td {font-size: 18px;}
    table tr td ul.word-diagram-crossword{width: auto; padding: 0%; margin: 0%; display: contents;}
    }     







/** ============================================================================style for diagrams, **/
/** this is over riding the main template **/

h3 {padding: 16px 34px 0px 3px;}

div.content div.info-centre p {font-size: 18px; color:#484848; padding:0px; margin: 0 0 9px 0;}

div.content-info h1 {font-size: 20px;color: #757575;display: inline-block;width: auto;padding: .5% 1% .5% 1%;margin: 1% 8% 2% 1%;border-bottom: #c0bfbf dotted 1px;background-color: #fffde7;border-radius: 5px;}

div.content-info h2 {margin: 2% 3% 3% 3%;border-bottom: #c0bfbf dotted 1px;padding: 0% 5% 1% 1%;display: inline-block;background-color: #fefdc459;border-radius: 4px;}

@media only screen and (max-width: 600px) {div.content-info h2 {font-size: 1.4em;}} 
/** this is over riding the main template **/


/** ==============================================  Word diagram  =============================================== **/


ul.word-diagram {text-align: center; max-width: 700px; width: 100%; margin: 1% auto 1% auto; padding: 0px;}

ul.word-diagram li {display: inline-grid;width: 29%; font-size: 22px; background-color: #fbff0038; text-align: 
center; margin: 6px; padding: 6px; border-radius: 8px; border: dotted 1px #8080803d;} 

ul.word-diagram li.long-text {background-color: #dcfaf0; color: darkslategrey;}
ul.word-diagram li.red-text {color:red;}
ul.word-diagram li.grey-text{color:grey;}   
/** assess this css for cleaner approach **/
 ul.word-diagram li.hide-info {opacity: 0;} 
/** assess this css for cleaner approach **/

ul.word-diagram li.small-info {width: 16%;}
ul.word-diagram li.long-info {width: 38%;}


span.red-text {color:red;}
span.grey-text {color: #b8b8b8;}
@media only screen and (max-width: 900px) {ul.word-diagram li {width: 27%; font-size:20px;}}  
@media only screen and (max-width: 800px) {ul.word-diagram li {font-size:14px;}} 
@media only screen and (max-width: 500px) {ul.word-diagram li {margin:2px; padding 3px; font-size:12px;}}  
 



/** =================================================================================basic responsive menu **/

h1.menu-change {opacity: 1;} 
h1.menu-change-mobile {opacity: 0;} 


header a.burger-icon img {margin: 0px; padding: 0px 0 0 0; display: inline-block; width: 52px; height: 54px; background-color: #33ffcc29;}
header a.burger-icon img {top: 7px; right: 5px; bottom: 7px; position: absolute; display: block;}


header a.burger-icon-mobile img {margin: 0px; padding: 0px 0 0 0; display: inline-block; width: 52px; height: 54px; background-color: #fcff2626;}
header a.burger-icon-mobile img {top: 7px; right: 5px; bottom: 7px; position: absolute; display: none;}




    
header div#header-style ul.basic-navigation  {margin-right: 69px; float:right;}      

header div#header-style ul.basic-navigation li a {color: white;font-size: 100%;text-decoration: none;} 
header div#header-style ul.basic-navigation li {display: inline-block;  padding: 7px; margin: 12px; background-color: #7d7d7d; width: 142px; line-height: 16px; border-bottom: solid 1px #fcff26;} 

    
 
    
    
header div#header-style ul.basic-navigation li ul {}     
header div#header-style ul.basic-navigation li ul li {background-color: #a0a0a0; width:100px;}  
    
   header div#header-style ul.basic-navigation li ul.sub-menu-new {margin-top: 6px;width:100%; }  
    header div#header-style ul.basic-navigation li ul.sub-menu-new li {float:right;}   
header div#header-style ul.basic-navigation li ul.sub-menu-new li:hover {background-color: #cecece;} 
   header div#header-style ul.basic-navigation li ul.sub-menu-new li a {text-align:center; width:100%; margin-left:3%;color:black;}      
    
@media only screen and (max-width: 900px) {
    header div#header-style ul.basic-navigation {margin-right: 0px; top: 74px;position: absolute;}
    header div#header-style ul.basic-navigation li {margin:0px; clear:both; width:100%; display:inline-block;font-size: 25px;}
    header div#header-style ul.basic-navigation li ul li {text-align: center; float:none; width:100%;} 
    header div#header-style ul.basic-navigation li a {text-align:center; display: inline-block; width: 100%;} 
    h1.menu-change-mobile {opacity: 1;} 
    h1.menu-change {opacity: 0;} 
    header a.burger-icon-mobile img {display: block;}
    header a.burger-icon {display: none;}    
    }