/* 
    Created on : Jun 18, 2020, 12:17:45 PM
    Author     : Leonard Garcia 
*/

body {
    background-color: black; 
    color:            darkgreen;
    width:            auto;
    margin-left:      10px;
}

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
 /* user-select: none;          /* Likely future */       
}

* {
    box-sizing: border-box;
}
.header {
    padding:            1px;    
    max-width:          100%;
    margin-bottom:      5px;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
h1 {
    color:darkgreen;
    background-color:black;
    text-shadow:#fff 0 -1px 4px, 
    #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px;
    font-size: 3.0em;
    position: absolute;
    margin-left: 24%;
    margin-bottom: 10px;
}
#myImg {
    
}
#sky {
    width:           75px;
    height:          30px;
    position:        relative;
    top:             -7vh;
    margin-left:     50%;
    color:           red;
    font-size:       1.1em;
    font-weight:     600;
    font-family:     "Comic Sans MS", cursive, sans-serif;
    z-index:         1;
}
.sky_box {
    position:         relative;        
    top:              -4vh;
    margin-left:      50%;
    width:            64px;           
    height:           auto;
    border:           1px solid green;
    overflow:         auto;
}
#yobi {
    position:         relative;
    top:              -30px;
    margin-left:      9%;
    color:            red;
    font-size:        1.2em;
    font-weight:      600;
    font-family:      "Comic Sans MS", cursive, sans-serif;
    z-index:          2;
}

#worldclock {
    position:        absolute;
    top:             75px;
    width:           154px;
    margin-left:     27.5%;
    /*border:          solid 1.5px;*/
    border-color:    yellow;
    border-radius:   10px;
    padding:         4px;
    color:           red;
    font-size:       1.5rem;
    font-weight:     600;
    font-family:     Arial, Helvetica, sans-serif;
}
#mytable {
    width:          130px;
    position:       absolute;
    top:            105px;
    margin-left:    28%;
    margin-top:     20px;
    border:         10px;
    border-radius:  5px;
    border-spacing: 0px;
    border-color:   darkgreen;
    padding:        3px;
}

tr, td, option, select {
    width: 	   130px;
    border:         10px;
    border-radius:  5px;
    border-spacing: 0;
    border-color:   darkgreen;
    padding:        3px;
    border-color:   darkgreen;
    background-color: yellow;
    color:          darkgreen;
}
select { 
    background-color: #d6ef39;
}
option::focus { 
    background-color: #ADDE63;
}
#main_ad {
    background-color:#ADDE63;
    color: darkgreen;
    border: 4px;
    border-color: gold;
    border-style: solid;
    width: fit-content;
    position: relative;
    top:  40px;
    left: 30px;
    padding: 5px;
    margin: 5px;
    font-family: "Comic Sans MS", cursive;
    font-size: 1.5em;
}
#banner {
    position:                   relative;
    -webkit-backface-visibility:hidden;
    top:                         50px;   
    left:                        10px;
    width:                      300px;
    height:                     250px;
    background-color:           darkgreen;
    overflow:                   hidden;  
}
#slide1 {
    color: white;
}

.panel {
  position:absolute;
  width:300px;
  height:250px;
  overflow:hidden;
}

#panel1 {
  /*Interrogative */
  background-color: darkgreen;
}

#panel2 {
  top: 260px;
  background: url(../images/GaetanosDinner.jpg);
}

#panel1 {
  position: relative;
  font-size:40px;
  line-height:240px;
  text-align:center;
  width:300px;
}

#panel2 h2 {                 
  margin: 2px;
  position: absolute;
  top: 188px;
  width: 260px;               
  font-size: 22px;
  text-align: center;
  padding: 20px;
  color: white;
  background-color: darkgreen;
}

#panel3 {
  top:520px;
}

#panel3 #info{
  position:absolute;
  top:125px;
  width:100%;
  padding:10px;
  height:125px;
  color: white;
  background-color: darkgreen;
}

#panel3 h1{
  font-size:34px;
  font-weight:700;
  letter-spacing: 1px;
}

#panel3 li {
  position:     relative;
  margin-top:   2px;
  color:        #ffc600;
}

#panel3 #orderNow {
  position:absolute;
  top:60px;
  left:185px;
  background:#ffc600;
  color:#000;
  font-size:13px;
  font-weight:bold;
  padding:10px;
  border-radius:10px;
  border: 4px solid transparent;
}

#panel3 #orderNow:hover {
  background-color: chartreuse; 
  border: 2px solid #d6ef39;
  cursor: pointer;
}

/********************************************************************/
/******************In the Neighborhood Ads**************************/
/*******************************************************************/
#caption {
    background-color:aliceblue;
    color: red;
    border: 4px;
    border-color: silver;
    border-style:outset;
    width: fit-content;
    padding:            6px;
    position:           relative;
    top:                15vh;   
    left:               5vw;
    font-family:        "Comic Sans MS", cursive, sans-serif;
    font-size:          1.2em;
    font-weight:        600;
}
.ads {
    display:            block;
    background-color:   floralwhite;
    width:              350px;
    height:             80px;
}
#adLeft {
    display:            block;
    position:           relative;
    top:                15vh;
    left:               5vw;
}
#adRight {
    display:            block;
    position:           relative;
    top:                17vh;    
    left:               5vw;   
}
#photo, #photo2 {
    position:       relative;
    top:            2px;
    left:           2px;
    width:          40px;
    height:         75px;
}
.list {
    font-size:  .9em;
    font-weight: 500;
    color:       darkgreen;
}
#header, #header2 {
   position:      relative;
   top:           -75px;
   margin-left:     3px;
   font-family:   Tahoma, Geneva, sans-serif;
   font-size:     1.1em;
   font-weight:   600;
   color:         darkgreen;
   padding:       2px;
}

#two, #three, #four, #two2, #three2, #four2 {
   position:      relative;
   top:           -75px;
   margin-left:   110px;
}

#two, #two2 {
   font-weight: 600;
   font-family: Arial, Helvetica, sans-serif;
   font-style: italic; 
}
.download {
    border: 8px;
    border-color: #ff0;
    border-style: groove;
    border-radius: 10px;
    color: red;
    background-color: white;
    font-size: 22px;
    font-weight: 600;
    width: fit-content;
    padding: 1rem;
    margin-top:  8rem;
    margin-left: 5rem;
    margin-bottom: -5rem;
}


/**********************************************************************/
#SVBoard, #Vocab {
    position:       relative;
    top:            15vh;
    left:           1vw;
    max-width:      fit-content;
}
.svid {
    width:  100%;
    height: 220px;
    margin: 5px 10px 55px 15px; /*top, right, bottom, left */
 } 
video {
    margin: 6px;
}
#studentVids, #wordVids {
    background-color:   darkseagreen;
    border:             solid #d6ef39;
    border:             4px;
    border-radius:      5px;
    border-color:       #ffc600;
    border-style:       groove;
    padding:            20px;
    max-width:          fit-content;
    position:           relative;
    left:               20%;
    height:             17em;
    text-indent:        20px;
    font-family:        "Comic Sans MS", cursive, sans-serif;
    font-size:          1.2em;
    font-weight:        600;
}
#studentVids {
    position:          relative;
    top:               20px;
}

#wordVids {
   position:           relative;
   top:                50px;
}

#wizwel {
    
}
#whatsNew {
  position:         relative;
  top:              25vh;
  margin-left:      5%;
  width:            fit-content;
  height:           60px;
}
.Nova {
    border:             solid #d6ef39;
    border:             4px;
    border-radius:      5px;
    border-color:       #ffc600;
    border-style:       groove;
}

#theWord {
    position:           relative;     
    top:                22vh;       
    left:               20px;
    margin-left:        70px;
    margin-bottom:      18vh;
    color:              #A52A2A;
    font-style:         italic;
    font-size:          1.5em;
    font-weight:        600;
    z-index:            1;
}

#etg {
    position:       relative;       
    top:            75vh;             
    left:           50px;            
    font-weight:    600;
    font-family:    Tahoma, Geneva, sans-serif;
    font-style:     oblique;
}
#etgpic {
    width:          220px;
    height:         170px;
}
#ff{
    border:2px;
    border-color:#ff0;
    border-style: solid;
    border-radius: 5%;
    background-color:#ffc600; 
    width:160px;
    padding: .5rem;
}
.normal {
    margin-right: 150px;
    background-color:greenyellow;   
    color: darkgreen;
    width: 150px;
    border: 5px;
    border-radius: 5px;
    padding: 3px;
    position: relative;
    overflow: visible;  
}
/* etg elements */
#first {
    position: relative;         
    top:      80vh;              
    left:     50px;
}
#second {
    position: relative;
    top:      82vh;
    left:     50px; 
}
#third {
    position: relative;
    top:      84vh;
    left:     50px;
}

#footer {
    position: relative;
    top:  95vh;
    left: 5vw;
    margin-top: 5px;        
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}

/******************************************************************/
/******************Laptop*****************************************/
/*****************************************************************/
@media only screen and (max-width: 1366px) {
    h1 {
        font-size: 2.5em;
        position: absolute;
        margin-left: 24%;
        margin-bottom: 10px;
    }
    #yobi {
        position:         relative;
        top:              -7vh;
        margin-left:      9%;
        color:            red;
        font-size:        1.2em;
        font-weight:      600;
        font-family:      "Comic Sans MS", cursive, sans-serif;
        z-index:          2;
    }
       
    #main_ad {
        width: 15rem;
        position: relative;
        top:  40px;
        left: 30px;
        padding: 5px;
        margin: 5px;
        font-family: "Comic Sans MS", cursive;
        font-size: 1.5em;
    }
    #caption {
        width: 15rem;
    }
}

/************************* for tablet ********************************/
/************************    990 & 450      ********************************/
/**********************************************************************/
@media only screen and (max-width : 990px) and (min-width: 450px) {
    h1 {
        font-size: 2.0em;
        position: absolute;
        margin-left: 24%;
        margin-bottom: 10px;
    }
    
    #c {  /*******Canvas*****************/
        position:           relative;
        top:                25vh;
        left:               -15vw;
        width:              60vw;   
        height:             60vh;
        display:            block;
    }
    
}
/******************************************************************/
/**********************Smartphones*********************************/
/******************************************************************/

@media only screen and (max-width : 449px) and (min-width: 280px) {
    body {
        width: fit-content;
    }
    h1 {
        font-size: 2.0em;
        position: absolute;
        margin-left: 24%;
        margin-bottom: 10px;
    }
    #sky {
        margin-left:     75%;
        color:           red;
        font-size:       1.1em;
    }
    .sky_box {
        margin-left:      75%;
    }
    #yobi {
        position:         relative;
        top:              -20px;
        margin-left:      6%;
        color:            red;
        font-size:        1.2em;
        font-weight:      600;
        font-family:      "Comic Sans MS", cursive, sans-serif;
        z-index:          2;
    }
    #slide1 {
        color: white;
        font-size: 1.3em;
    }
    #panel1 {
        position: relative;
        font-size: 1em;
        line-height:240px;
        text-align:center;
        width:300px;
    }
    #orderNow {
        position:   absolute;
        top:        62px;
        left:       240px;
        font-size:  13px;
        font-weight:bold;
        padding:    4px;
        border-radius:10px;
        border: 4px solid transparent;
    }
    
    .download {
        font-size: 16px;
        font-weight: 600;
        width: fit-content;
        padding: .6rem;
        margin-top:  8rem;
        margin-left: 1rem;
        margin-bottom: -8rem;
    }
    #SVBoard {
        position:       relative;
        top:            15vh;
        left:           -6vw;
        max-width:      fit-content;
    }
    .svid {
        width:  100%;
        height: 220px;
        margin: 5px 10px 55px 15px; /*top, right, bottom, left */
     } 
    video {
        margin: 4px;
    }
    #studentVids, #wordVids {
        max-width:          fit-content;
        position:           relative;
        top:                40px;
        left:               18%;
        height:             17em;
        text-indent:        20px;
        font-family:        "Comic Sans MS", cursive, sans-serif;
        font-size:          1.1em;
        font-weight:        600;
    }
    #studentVids {
        height:             17em;
        padding:            15px;
    }
    #wordVids {
        position:           relative;
        left:               9%;
        height:             17em;
        padding:            15px;
    }
    
    #whatsNew {
        position:         relative;
        top:              25vh;
        margin-left:      5%;
        width:            fit-content;
        height:           60px;
    }
    
    #etg {
        position:       relative;       
        top:            60vh;             
        left:           50px;   
        font-size:      1em;
        font-weight:    600;
        font-family:    Tahoma, Geneva, sans-serif;
        font-style:     oblique;
    }
    #etgpic {
        width:      250px;
        height:     200px;
    }
    
    /* etg elements */
    #first {
        position: relative;         
        top:      70vh;              
        left:     50px;
    }
    #second {
        position: relative;
        top:      72vh;
        left:     50px; 
    }
    #third {
        position: relative;
        top:      74vh;
        left:     50px;
    }
    .normal {
        width:      250px;
        font-size:  1em;
    }
    #footer {
        position: relative;
        top:      80vh;
        left:     -4%;
    }
}