html, body {                        
  margin: 0;                        
  height: 100%;                     
  min-height: 100%;                 
}                                   
                                    
body {                              
  display: flex;                    
  flex-direction: column;           
}                                   
                                         
header {                            
  flex: none;                       
}                                   


footer {                            
  flex: none;
  font-size:9px;
}                                   

                                    
main {                              
  overflow-y: scroll;               
	-webkit-overflow-scrolling: touch; 
  flex: auto;                       
}                                   
                               



#main_container {                                                                                    
  display: flex;                                                                                
  width: 100%;                                                                                  
  padding: 5px;                                                                                
  box-sizing: border-box; /* used so the padding will be inline and not extend the 100% width */
}          

#main_left {                                                                                                                                                           
  flex: 1; /* my goal is that the width always fills up independent of browser width */
  height: 500px;                
  margin-right:5px;                                                       
}                                                                                      

#index_left {                                                                                                                                                           
  /* flex: 1; my goal is that the width always fills up independent of browser width */
  height: 500px;                
  margin-right:5px;                                                       
}                                                                                      


.codesample {
  background-color:#f0f0f0;
  font-size:12px;
}

.ModuleBoxYellow          {margin-bottom: 10px;}
.ModuleBoxYellowBorder    {border:1px solid #FFCC00}
.ModuleBoxYellowHeader    {height:25px;font-size:11px;background-color: #FFCC00; color: #000000;margin: 1px;}
.ModuleBoxYellowHeader a  {color: #0085CA;}
.ModuleBoxYellowContent   {border-top: 1px solid #FFCC00;}
.ModuleBoxYellowHeaderS   {text-transform:uppercase;margin:1px;padding:7px 5px;font-weight:bold;font-size:11px;background-color: #FFCC00; color: #000000;}
.ModuleBoxYellowHeaderS a {color: #0085CA;}

.ModuleBoxLYellow          {margin-bottom: 10px;}
.ModuleBoxLYellowBorder    {border:1px solid #ffe680;margin:1px}
.ModuleBoxLYellowHeader    {height:25px;font-size:11px;background-color: #ffe680; color: #000000;margin: 1px;}
.ModuleBoxLYellowHeader a  {color: #0085CA;}
.ModuleBoxLYellowContent   {border-top: 1px solid #ffe680;}
.ModuleBoxLYellowHeaderS   {text-transform:uppercase;margin:1px;padding:7px 5px;font-weight:bold;font-size:11px;background-color: #ffe680; color: #000000;}
.ModuleBoxLYellowHeaderS a {color: #0085CA;}

.ModuleBoxMYellow          {margin-bottom: 10px;}
.ModuleBoxMYellowBorder    {border:1px solid #fff0b3;margin:1px}
.ModuleBoxMYellowHeader    {height:25px;font-size:11px;background-color: #fff0b3; color: #000000;margin: 1px;}
.ModuleBoxMYellowHeader a  {color: #0085CA;}
.ModuleBoxMYellowContent   {border-top: 1px solid #fff0b3;}
.ModuleBoxMYellowHeaderS   {text-transform:uppercase;margin:1px;padding:7px 5px;font-weight:bold;font-size:11px;background-color: #fff0b3; color: #000000;}
.ModuleBoxMYellowHeaderS a {color: #0085CA;}

.ModuleBoxGreen           {margin-bottom: 10px;}
.ModuleBoxGreenBorder     {border:1px solid #66CC00}
.ModuleBoxGreenHeader     {font-size:11px;background-color: #66CC00; color: #FFFFFF;font-weight:600;}
.ModuleBoxGreenHeader a   {color: #0085CA;}
.ModuleBoxGreenContent    {border-top: 1px solid #66CC00;}
.ModuleBoxGreenHeaderS    {text-transform:uppercase;margin:1px;padding:7px 5px;font-weight:bold;font-size:11px;background-color: #66CC00; color: #FFFFFF;}
.ModuleBoxGreenHeaderS a  {color: #0085CA;}

.ModuleBoxLBlue           {margin-bottom: 10px;}
.ModuleBoxLBLueBorder     {border:1px solid #a2d5f0}
.ModuleBoxLBlueHeader     {height:25px;font-size:11px;background-color: #a2d5f0; color: #000000;}
.ModuleBoxLBlueHeader a   {color: #FFCC00;}
.ModuleBoxLBlueContent    {border-top: 1px solid #F0F0F0;}
.ModuleBoxLBlueHeaderS    {text-transform:uppercase;margin:1px;padding:7px 5px;font-weight:bold;font-size:11px;background-color: #a2d5f0; color: #000000;}
.ModuleBoxLBlueHeaderS a  {color: #FFCC00;}

/* table */
.support    {border:1px solid #0085CA;font-family:Arial;font-size:10px}
.support th {font-family:Arial;font-size:10px;padding:3px;text-transform:none}
.support td {background-color:#f0f0f0;padding:3px;}

/* table */
.criteria    {font-family:Arial;font-size:12px}
.criteria th {font-family:Arial;font-size:11px;padding:3px;text-transform:none;width:100px;text-align:left;background-color:#FFFFFF;color:#000000;border:0px}
.criteria td {padding:3px;}

.puzzle_box { 
   float:left;
   text-align:center;
   font-size:10px;
   height:160px;
   width:160px;
   padding:10px;
   margin:6px;
   border-radius:5px;
   -webkit-box-shadow: 2px 2px 5px 6px #ccc;
      -moz-box-shadow: 2px 2px 5px 6px #ccc;     
           box-shadow: 2px 2px 5px 6px #ccc;
}    

.puzzle_box_compact { 
   float:left;
   text-align:center;
   font-size:10px;
   height:100px;
   width:100px;
   padding:10px;
   margin:6px;
   border-radius:5px;
   -webkit-box-shadow: 2px 2px 5px 6px #ccc;
      -moz-box-shadow: 2px 2px 5px 6px #ccc;     
           box-shadow: 2px 2px 5px 6px #ccc;
}    

.puzzle_box_tabular { 
   float:left;
   text-align:center;
   font-size:10px;
   height:65px;
   width:96%;
   padding:10px;
   margin:6px;
   border-radius:5px;
   -webkit-box-shadow: 2px 2px 5px 6px #ccc;
      -moz-box-shadow: 2px 2px 5px 6px #ccc;     
           box-shadow: 2px 2px 5px 6px #ccc;
}    

.puzzle_box_collection {
   -moz-box-shadow:    inset 0 0 10px #66CC00;
   -webkit-box-shadow: inset 0 0 10px #66CC00;
   box-shadow:         inset 0 0 10px #66CC00;
}

.puzzle_image_s {height: 60px; width: 60px;}
.puzzle_image_m {height:100px; width:100px;}
.puzzle_image_l {height:350px; width:350px;}

#div_frame_left {float:left;width:330px;}
#result         {width:1190px;}

/* puzzle_search: Filter Criteria */
.sel_criterion            {width:190px;}
#any_words                {width:182px;}
#all_words                {width:182px;}
#exact                    {width:182px;}
.sel_criterion_year       {width:140px;}
.sel_criterion_year_range {width: 50px;}
.criteria th              {width:118px;}
#copyToClipboard          {width:190px;}

/* contribute.php */

.contribution_box { 
   float:left;
   text-align:justify;
   font-size:12px;
   height:400px;
   width:220px;
   padding:10px;
   margin:6px;
   border-radius:5px;
   -webkit-box-shadow: 2px 2px 5px 6px #ccc;
      -moz-box-shadow: 2px 2px 5px 6px #ccc;     
           box-shadow: 2px 2px 5px 6px #ccc;
}