.component {
  padding: 5% 10% 10% 10%;
  background-color: #999;
}

.container {
  padding: 5px;
  background-color: #ccc;
  color: #404;
  font-family: helvetica;
  font-size: 12pt;
}

#page_title {
  font-size: 24pt;
  font-weight: bold;
  text-align: center
}

h3 {
  font-size: 18pt;
  font-weight: 500;
}

h4 {
  font-size: 16pt;
  font-weight: 500;
}

/*Stuff for links*/

a:link {
  color: #806;
}

a:visited, a:active {
  color: #a06;
  text-decoration: underline;
}

a:hover {
  color: #806;
  text-decoration:underline;
}

a:focus, input:focus, textarea:focus {
  background-color: #eee;
  color: #808;
  border-style: dotted;
  border-width: 1px;
}

#left {
  float: left;
}

#center {
  text-align: center;
}

#right {
  float: right;
}

/*Random stuff for formatting text*/

p, a {
  padding: 0.5ex 0 0.5ex 0
}

section {
  text-align: justify
}  

footer {
  font-style: italic;
  font-size: 10pt
}

mark {
  background-color: #f0d;
  color: #404;
}

time {
  font-style: italic
}

#sign {
  position: relative;
  bottom: 5px;
  text-align: center;
  margin: 10px 0 0 0
}

#langs dd  {
  text-indent: 2ch;
  margin: 0;
  padding: 0
}

#langs ul {
  text-indent: 4ch;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/*Stuff for tables*/

table {
  padding: 10px;
}

caption {
  font-size: 14pt;
  font-weight: 500;
}

td {
  border-style: solid;
  border-width: 1px;
  border-color: #404;
  margin: 0;
  text-align: center;
}

.side {
  background-color: #bbb;
  font-weight: 500
}

#con, #vowel ,#dip{
  float: left;
  height: 250px
}

#con  {
  width: 50%
}

#vowel {
  width: 30%;
}

#dip {
  width: 20%
}

.centered {
  width: 100%
}

/*Navigation Sidebar*/

.navbar {
  background-color: #999;
  margin: 5px;
  padding: 5px;
  float: left
}

#langs {
  margin: 0 0 0 3ch;
  padding: 0 0 0 1ch;
  border-style: solid;
  border-width: 0 0 0 1px;
  border-color: #404
}

#bottomnav {
  text-align: center;
  padding: 10px 5px 5px 5px;
  width: 100%;
}

#bottomnav td{
  border-width: 0;
  width: 33%
}