/* 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/  */

.turkish-page-left{
  /* width: 45%; */
  height: auto;
  min-width: 310px; 
  margin-left: 1%;
  display: inline-block;
  float: left;
}

.turkish-page-right{
  /* width: 40%; */
  height: auto;
  margin-left: 25px;
  padding: 10px;
  display: inline-block;
}


/* left side vowel chart */

.vowel-space{
  width: 310px;
  height: auto;
  margin: 20px;
  margin-right: 1px;
  margin-left: 5px;
}
.vowel-row{
  width: 270px;
  height: auto; 
  margin-right: 1px; 
}

.row-mid{
  width: 249px;
  margin-top: -20px;
  margin-left: 21px;
}

.row-low{
  width: 230px;
  margin-top: -21px;
  margin-left: 40px;
}

.parallelogram {
  width: 71px;
  height: 65px;
  -webkit-transform: skew(18deg);
  -moz-transform: skew(18deg);
  -o-transform: skew(18deg);
  background: ;
  display: inline-block;
  border: 1px solid black;
  margin-top: 20px;
  margin-left: -3px;
  text-align: center;
}

.rectangular-box-a{
  width: 71px; 
  height: 65px; 
  margin-left: -20px;
  border: 1px solid black;
  border-left: none;
  border-bottom: none;
  display: inline-block;
  text-align: right;
}

.rectangular-box-b{
  width: 125px; 
  height: 65px; 
  margin-left: -23px;
  border-right: 1px solid black;
  /* border-left: none;
  border-top: none;
  border-bottom: none; */
  display: inline-block;
  text-align: right;
}

.rectangular-box-c{
  width: 99px; /* 98px */
  height: 58px; /* 59px */
  margin-left: -23px;
  border: 1px solid black;
  border-left: none;
  border-top: none;
  display: inline-block;
  text-align: center;
}

.para-wide{
  width: 150px;
  height: 54px;
  border-right: none;
  border-top: none;
  text-align: right;
}

.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: 50px;
  height: 50px;
  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: 50px;
  height: 50px;
  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: 20px;
  height: 20px;
  background-color: rgba(0,0,255,.7);
  display: inline-block;
}

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

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

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

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

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

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

.vowel-ipa-transparent{
  width: 20px;
  height: 20px; 
  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: 220px; 
  height: auto; 
  margin-top: 20px;
  border: 2px solid #53CAAF;
  border-radius: 10px;
  background-color: rgba(83, 202, 175, .2);
}

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

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

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

#vowel-orth-large-box{
  position: relative;
  width: 40px; 
  height: 40px; 
  margin-left: 2px;
  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: 5rem;
  font-weight: bold;
  font-family: "Lucida Grande", Arial, serif;
}

#vowel-ipa-large-box{
  position: relative;
  width: 40px; 
  height: 40px; 
  margin-left: 3px;
  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: 123px; 
  height: 45px; 
  margin-left: -1px;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  border: 0px solid
}

/* feature selectors */ 
#feature-selector{
  margin: 1%;
  margin-left: ;
  padding-left: ;
  float: ;
}

#feature-selector p{
  width: 80%;
}

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

select{
  width: 30%;
  height: 20px;
  margin: 0.5%;
  margin-right: ;
  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; 
}