/* http://stackoverflow.com/questions/16616846/css-triangle-and-box-inside-one-div
   http://stackoverflow.com/questions/7920754/how-to-draw-a-trapezium-trapezoid-with-css3 https://css-tricks.com/examples/ShapesOfCSS/ 
   https://css-tricks.com/examples/ShapesOfCSS/  */

@media screen and (min-width: 992px){
    .turkish-page-left{
      width: 40%;
      height: auto;
      min-width: 435px;
      margin-left: 1.5%;
      display: inline-block;
      float: left;
    }

    .turkish-page-right{
      width: 40%;
      height: auto;
      margin-left: 1%;
      padding: 5px;
      display: inline-block;
    }

    /* left side vowel chart */

    .vowel-space{
      width: 470px;
      height: 350px;
      margin: 10px;
      margin-left: 5px;
    }
    .vowel-row{
      width: 100%;
      height: auto; 
      margin: ; 
      padding: ;
    }

    .row-mid{
      margin-top: -20px;
      margin-left: 29px;
    }

    .row-low{
      margin-top: -20px;
      margin-left: 56px;
    }

    .parallelogram {
      width: 100px;
      height: 90px;
      -webkit-transform: skew(18deg);
      -moz-transform: skew(18deg);
      -o-transform: skew(18deg);
      /*background-color: rgba(255,153,227,0.2);*/
      display: inline-block;
      border: 1px solid black;
      margin-top: 20px;
      margin-left: -5px;
      text-align: center;
    }

    .rectangular-box-a{
      width: 100px; 
      height: 90px; 
      margin-left: -24px;
      border: 1px solid black;
      /*background-color: rgba(255,153,227,0.2);*/
      border-left: none;
      border-bottom: none;
      display: inline-block;
      text-align: right;
    }

    .rectangular-box-b{
      width: 170px; 
      height: 90px; 
      margin-left: -24px;
      border-right: 1px solid black;
      /*background-color: rgba(255,153,227,0.2);*/
      /* border-left: none;
      border-top: none;
      border-bottom: none; */
      display: inline-block;
      text-align: right;
    }

    .rectangular-box-c{
      width: 125px; 
      height: 80px; 
      margin-left: -7px;
      border: 1px solid black;
      /*background-color: rgba(255,153,227,0.2);*/
      border-left: none;
      border-top: none;
      display: inline-block;
      text-align: center;
    }

    .para-wide{
      width: 200px;
      height: 75px;
      border-right: none;
      border-top: none;
      text-align: right;
      /*background-color: rgba(255,153,227,0.2);*/
    }

    .para-no-right{
      border-right: none;
    }

    .para-no-border{
      border-left: none;
      border-right: none;
    }

    .para-no-bottom{
      border-bottom: none;
    }

    .para-no-top{
      border-top: none;
    }

    .vowel-box{
      width: 70px;
      height: 70px;
      border: 1px solid #88a088; /*#e0e0de; */
      background-color: #fffa8b; /*rgba(255,153,227,0.2); */
      text-align: center;
      -webkit-transform: skew(-18deg);
      -moz-transform: skew(-18deg);
      -o-transform: skew(-18deg);
      display: inline-block;
    }

    .box-non-skew{
      -webkit-transform: skew(0deg);
      -moz-transform: skew(0deg);
      -o-transform: skew(0deg);
    }

    .hi, .nonhigh{
      background-color: ;
    }

    .vowel-box-transparent{
      width: 70px;
      height: 70px;
      border: 1px solid rgba(0,0,0,0);
      background-color: rgba(0,0,0,0);
      text-align: center;
      display: inline-block;
    }

    .vowel-photo{
      margin-top: 1px;
      padding: 0px;
      width: 31px;
      height: 31px;
      /*background-color: rgba(0,0,255,.7);*/
      display: inline-block;
    }

    .vowel-photo-profile{
      margin-top: 1px; 
      padding: 0px;
      width: 31px;
      height: 31px;
      /*background-color: rgba(0,0,255,.2);*/
      display: inline-block;
    }

    .vowel-photo-transparent{
      margin-top: 1px;
      padding: 0px;
      width: 31px;
      height: 31px;
      background-color: rgba(0,0,0,0);
      display: inline-block;
    }

    .vowel-photo-profile-transparent{
      margin-top: 1px; 
      padding: 0px;
      width: 31px;
      height: 31px;
      background-color: rgba(0,0,0,0);
      display: inline-block;
    }

    .vowel-orth{
      width: 30px;
      height: 25px; 
      font-size: 2rem;
      font-weight: bold;
      display: inline-block;
      text-align: center;
      padding-left: 5px;
      font-family: "Lucida Grande", Arial, serif;
    }

    .vowel-ipa{
      width: 30px;
      height: 25px; 
      font-size: 1em;
      display: inline-block;
      text-align: left;
      padding-left: 0px;
      font-family: Arial, serif;
      border: ;
    }

    .vowel-orth-transparent{
      width: 30px;
      height: 25px; 
      font-size: 2rem;
      font-weight: bold;
      display: inline-block;
      text-align: center;
      padding-left: 5px;
      font-family: Arial, serif;
      border: ;
    }

    .vowel-ipa-transparent{
      width: 30px;
      height: 25px; 
      font-size: 1em;
      display: inline-block;
      text-align: left;
      padding-left: 0px;
      font-family: Arial, serif;
      border: ;
    }

    .feature-spec, .vowel-wave{
      display: none;
    }

    /* right side vowel detail */

    .vowel-box-large{
      width: 300px; 
      height: auto; 
      margin-top: 5%;
      border: 2px solid #53CAAF;
      border-radius: 10px;
      background-color: rgba(83, 202, 175, .2);
    }

    #vowel-photo-large{
      width: 140px;
      height: 140px;
      margin-left: 8px;
      border: 0px solid;
      background-color: #6d6d6d;
      background-image: url('../images/dummyfront.png');
      background-repeat: no-repeat; 
      background-size: contain;
      display: inline-block;
    }

    #vowel-photo-profile-large{
      width: 140px;
      height:140px;
      border: 0px solid; 
      background-color: #6d6d6d;
      background-image: url('../images/dummyprofile.png'); 
      background-repeat: no-repeat;
      background-size: contain;
      display: inline-block;
    }

    #vowel-feature{
      width: 280px;
      height: 35px; 
      margin-left: 5px;
      border: 0px solid;
      text-align: center;
      line-height: 130%;
      font-size: 2rem;
      font-weight: bold;
      font-family: "Lucida Grande", Arial; 
      background-color: rgba(83, 202, 175, 0);
      color: #000099;
    }

    #vowel-orth-large-box{
      position: relative;
      width: 48px; 
      height: 65px; 
      margin-left: 5px;
      border: 0px solid;
      display: inline-block;
      text-align: center;
    }
    #vowel-orth-large{
      position: absolute;
      top: 50%;
      left: 25%;
      height: 80%;
      margin-top: -40px;
      margin-bottom: -64px;
      font-size: 4rem;
      font-weight: bold;
      font-family: "Lucida Grande", Arial, serif;
    }

    #vowel-ipa-large-box{
      position: relative;
      width: 48px; 
      height: 65px; 
      border: 0px solid;
      display: inline-block;
      text-align: center;
    } 
    #vowel-ipa-large{
      position: absolute;
      top: 50%;
      left: 5%;
      height: 80%;
      margin-top: -21px;
      font-size: 2.5rem;
      font-family: Arial, serif;
    }

    #vowel-wave-large{
      width: 165px; 
      height: 65px; 
      margin-left: -1px;
      display: inline-block;
      border: 0px solid;
      background-repeat: no-repeat;
      background-size: contain;
    }

    /* feature selectors */
    #feature-selector{
      margin: 1%;
      margin-left: ;
      padding-left: ;
      float: ;
    }
  
    .selector-label{
      margin: 1%;
      font-family: "Lucida Grande", "sans serif", Arial; 
      font-size: 1.0rem;
      font-weight: bold;
    }

    select{
      width: 30%;
      height: 22px;
      margin: 0.5%;
      margin-right: 0%;
      background-color: #fffa8b; 
      color: #0000D0;
      font-size: 1.1rem;
      font-weight: bold;
    }

    .height, .backness, .roundness{
      display: none;
    }

    .button-clear{
      margin: 10px 5px 5px 0px;
      float: none;
    }

    .button-clear a{
      padding: 5px;
      background-color: #0000D0; 
      color: #fffa8b;
      font-size: 1.1rem;
      font-weight: bold;  
      border: 1px solid #0000D0;
    }

    .button-clear a:hover{
      color: #fffa8b;
      text-decoration: none; 
    }


}