body {
  font-family: 'Raleway', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
}

/* Title */
/* ******************************************** */
#txTitle {
  margin: 4px;
  text-align:           center;
}

#txTitle span {
  font-family: 'Helvetica', 'Arial Narrow', Arial, sans-serif;
  display: block;
  font-size: 12px;
  text-decoration: none;
}

#txTitle span:first-child {
  font-family: 'Helvetica', 'Arial Narrow', Arial, sans-serif;
  display: block;
  font-size: 30px;
}

/*  Profile Links */
/* ******************************************** */
#profLinks {
  font-size: 24px;
  text-align: center;
  transition-duration: 200ms;
  color: #222;
}

#profLinks a {
  text-decoration: none;
}

#profLinks a:hover, #profLinks a:visited:hover{
  transition-duration: 200ms;
  color: rgb(29, 170, 111);
}

#profLinks a:visited{
  transition-duration: 200ms;
  color: #888;
}

/* Canvas */
/* ******************************************** */
#dishDiv {
  width:                602px;
  margin-left:          auto;
  margin-right:         auto;
  /*border:             2px solid green;*/
  padding:              0;
}

/* UI - Actions */
/* ******************************************** */
button {
  margin-bottom:       4px;
  background-color:    #EEE;
  border:              1px solid #AAA;
  border-radius:       4px;
}

button:hover {  
  background-color: rgb(220,250,220);
}

button:focus {
  outline-width:      0;
}

button:active {
  background-color:    #DDF;
}

.controls {
   width:               400px;
   margin-left:         auto;
   margin-right:        auto;
}

.ct-action {
   text-align:          center;
   padding-top:          4px;
}

.ct-action button{
  height:               38px;
  width:                48px;
  font-size:            16px;
}
.ct-action, .ct-group, .ct-color, .ct-sizes {
   border:              1px solid #BBB;
   border-radius:       4px;
}

/* UI - Secondary */
/* ******************************************** */
.ct-group {
  width:                400px;
  padding:              0px;
  margin-left:          auto;
  margin-right:         auto;
  padding-bottom:       6px;
  height:               70px;
  overflow:             hidden;
  transition-duration:  300ms;
  /* border: 1px solid red; */
}

.ct-speed,.ct-presets {
  float:                right;
  width:                198px;
  margin-top:           2px;
  vertical-align:       top;
  text-align:           center;
  padding:              4px -1px 4px -1px;
  height:               100%;
}

.ct-speed {
  float: left;
}

/* UI - Settings */
/* ******************************************** */
.ct-settings {
  text-align: center;
  width: 400px;
  margin: 0px auto 0px auto;
}

/* UI - Colors */
/* ******************************************** */

#btToggleColors, #btToggleSizes {
  width: 50%;
  float: left;
  border-radius: 0;
}

#btToggleColors:hover, #btToggleSizes:hover {
  background-color: rgb(220,250,220);
}

.ct-color {
  font-size:            14px;
  overflow:             hidden;
  transition-duration:  100ms;
  text-align:           left;

  border:               none;
  padding:              0px 4px;
  height:               0px;
}

.btnColor {
  width: 160px;
}

/* UI - Sizes */
/* ******************************************** */
.ct-sizes {
  overflow:             hidden;
  border:               none;
  transition-duration:  100ms;
  height:               0px;
}

#ct-sizeFields {
  text-align: left;
  width:    220px;
  display: inline-block;
  margin-left: -52px;
}

#ct-sizeFields label{
  margin: 12px;
  display: block;
}

#txtHorizontal, #txtVertical {
  width:      80px;
  float:      right;
}

#linkSymbol {
  margin: 20px 2px 0px 12px;
  border-left: 3px solid black;
  float: left;
  height: 36px;
  font-size: 13px;
  border-radius: 9px
}

#linkSymbol i{
  margin-top: 10px;
  margin-left: -10px;
  background-color: white;
  padding: 2px;
  transform:  rotate(-45deg);
  border-radius: 4px;
}

#info-cellInfo{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  display: inline-block;
  padding-left: 4px;
  margin-top: 10px;
  margin-left: auto;
  vertical-align: top;
  border-left: 1px solid #BBB;
}

#lblSizeTitle {
  font-family: Arial, Helvetica, sans-serif;
  display:block;
}

#lblSizeWarn {
  font-family: Arial, Helvetica, sans-serif;
  font-size:      10px;
  color:      #A44;
  display:      block;
}