body {
  padding-top: 50px;
}

#hero {
  width: 150px;
  height: 150px;
}

#welcome {
  padding-top: 0px;
  text-align: center;
}

#contacts {
  overflow: hidden;
}

#linkedIn > img {
  border: 0px;
  position: absolute;
  top: 8px;
  margin: auto;
}

.powerbids-1 {
  margin-top:   5px;
  margin-right: 10px;
  border: 2px solid maroon;
}

.panel-vignette,
.panel-project {
  display: inline-block;
}

.btn-vignette,
.btn-project {
  width: 270px;
  text-align: left;
  /*following is a patch to keep firefox from inserting an unexpected linebreak
    when adding the up-down glyphicon */
  white-space: normal;
  background-color: blue;
  color: white;
}

.btn-vignette:after,
.btn-project:after,
.btn-floater:after {
    /* symbol for "expanded" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e113";    /* up caret glyphicon */
    float: right;
    color: white;
}

.btn-floater {
  position: fixed;
  bottom: 0px;
  right: 40px;
  width: 40px;
  z-index: 1;
}

.btn-vignette.collapsed:after,
.btn-project.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e114";    /* down caret glypicon*/
}

.project-thumbnail {
  border: 2px solid orange;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
}

.project-thumbnail-small {
  border: 2px solid orange;
  height: 80px;
  width: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
}

.clear-left {
  clear: left;
}

#play-the-game {
  position: absolute;
  top: 36px;
  left: 150px;
}

#stop-go {
  position: absolute;
  top: 8px;
  left: 239px;
  background: firebrick;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: opacity .8s linear .2s;
}

#toggle-animation {
  position: absolute;
  top: 4px;
  left: 150px;
  font-size: 10px;
}

#gears-attribution {
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  position: absolute;
  top: 122px;
  left: -116px;
}

.set-position-relative {
  position: relative;
}

/*This plus javaScript $("abbr").click function
  gives us a hack for mobile tool tips...
  found at: http://jsfiddle.net/xaAN3/*/
abbr {
  border-bottom: 1px dotted;
  position: relative;
}
abbr .title {
  position: absolute;
  top: 20px;
  background: #F7D358;
  padding: 4px;
  left: 0;
  white-space: nowrap;
}

/*This guy sets the width at which an element will, effectively, clear a float.
  It literately sticks a 200px wide, 0px high, block level, invisible "whisker"
  (element) in front of an element.  If the whisker can't fit, then it, and all
  behind it, are positioned below the floated object. Viola! */
.set-min-squeeze:before {
  content: "";
  width: 200px;
  display: block;
  overflow: hidden;
}

/*google docs generated styles, panel-vignette selects just the vignettes
There are variances between .c? class selectors, rather than try to merge and consolidate,
decided to import each doc's selectors, then target the respective vignette.*/
#v0 .c0{orphans:2;widows:2}
#v0 .c1{height:11pt}
#v0 .c2{background-color:#fce5cd;max-width:612pt;padding:0pt 0pt 0pt 0pt}
#v0 .c3{page-break-after:avoid;text-align:center}

#v1 .c0{orphans:2;widows:2;height:11pt}
#v1 .c1{orphans:2;widows:2}
#v1 .c2{background-color:#fce5cd;max-width:612pt;padding:0pt 0pt 0pt 0pt}
#v1 .c3{font-weight:bold}
#v1 .c4{font-size:12pt}
#v1 .c5{page-break-after:avoid;text-align:center}

#v2 .c0{orphans:2;widows:2}
#v2 .c1{page-break-after:avoid;text-align:center}
#v2 .c2{height:11pt}
#v2 .c3{background-color:#fce5cd;max-width:612pt;padding:0pt 0pt 0pt 0pt}

#v3 .c0{orphans:2;widows:2;height:11pt}
#v3 .c1{orphans:2;widows:2}
#v3 .c2{vertical-align:super}
#v3 .c3{page-break-after:avoid;text-align:center}
#v3 .c4{background-color:#fce5cd;max-width:612pt;padding:0pt 0pt 0pt 0pt}

#v4 .c0{orphans:2;widows:2;height:11pt}
#v4 .c1{orphans:2;widows:2}
#v4 .c2{page-break-after:avoid;text-align:center}
#v4 .c3{text-align:center}
#v4 .c4{background-color:#fce5cd;max-width:612pt;padding:0pt 0pt 0pt 0pt}

#v5 .c0{font-style:italic}
#v5 .c1{orphans:2;widows:2}
#v5 .c2{height:11pt}
#v5 .c3{page-break-after:avoid;text-align:center}
#v5 .c4{background-color:#fce5cd;max-width:612pt;padding:0pt 0pt 0pt 0pt}

#v6 .c0{orphans:2;widows:2;height:11pt}
#v6 .c1{orphans:2;widows:2}
#v6 .c2{background-color:#fce5cd;max-width:612pt;padding:0pt 0pt 0pt 0pt}
#v6 .c3{page-break-after:avoid;text-align:center}

#v7 .c0{orphans:2;widows:2;height:11pt}
#v7 .c1{orphans:2;widows:2}
#v7 .c2{page-break-after:avoid;text-align:center}
#v7 .c3{background-color:#fce5cd;max-width:612pt;padding:0pt 0pt 0pt 0pt}

#v8 .c0{orphans:2;widows:2;height:11pt}
#v8 .c1{orphans:2;widows:2}
#v8 .c2{page-break-after:avoid;text-align:center}
#v8 .c3{background-color:#fce5cd;max-width:612pt;padding:0pt 0pt 0pt 0pt}

#v9 .c0{background-color:#fce5cd;max-width:612pt;padding:0pt 0pt 0pt 0pt}
#v9 .c1{font-style:italic}
#v9 .c2{orphans:2;widows:2}
#v9 .c3{height:11pt}
#v9 .c4{page-break-after:avoid;text-align:center}
#v9 .c5{color:inherit;text-decoration:inherit}
#v9 .c6{font-weight:bold}
#v9 .c7{color:#1155cc;text-decoration:underline}
#v9 .c8{vertical-align:super;font-size:8pt}

.panel-vignette ol{margin:0;padding:0}
.panel-vignette table td,table th{padding:0}
.panel-vignette .title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}
.panel-vignette .subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}
.panel-vignette li{color:#000000;font-size:11pt;font-family:"Arial"}
.panel-vignette p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}
.panel-vignette h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}

/*manual replacement of padding-top 18px with 0px */
.panel-vignette h2{padding-top: 0pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}

.panel-vignette h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}
.panel-vignette h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}
.panel-vignette h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}
.panel-vignette h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}