body{
  margin: 0;
  padding:0;
  width: 100%;
  background-color: #000;
}

div, input,img{
  margin:0;
  padding:0;
  background-color: #000;
}

ul.colorpicker {width: 228px; margin: 0 auto}

input{
  height: 35px;
  font-family:helvetica;
  font-size: 26px;
  color: #fff;
  display:inline-block;
  border:0;
  border-bottom:3px solid #fff;
  background-color:#000;
  text-align: center;
  margin:10px;
}

p{
  font-size: 16px;
  color:#fff;
  font-family:helvetica;
  width:80%;
  margin:0 auto;
  text-align: center;
  max-width:600px;
}

form{
  width:85%;
  margin:0 auto 0 auto;
  text-align: center;
}

.cls-2.white{
  fill:rgb(255,255,255);
}

.cls-2.green{
  fill:rgb(117,181,82);
}

.cls-2.blue{
  fill:rgb(99,93,147);
}

.cls-2.red{
  fill:rgb(214,46,91);
}

.cls-2.pink{
  fill:rgb(193,96,147);
}

.cls-2.yellow{
  fill:rgb(247,207,85);
}

ul,li{
  list-style:none;
  margin:0;
  padding:0;
}

ul{
  width:90%;
}

li{
  float: left;
  margin-right:6px;
}

#yearContainer,#williamContainer,#corktooContainer,#leafyleafContainer,#palmyContainer,#bigcherryContainer,
#leafyContainer,#signContainer,#planeContainer,#leafsContainer,#arrowContainer,#palmContainer,#arrowarrowContainer,
#cloudContainer,#stillleafContainer,#stillcherryContainer,#arrowedContainer,#stillcorkContainer,#evenmoreleafContainer,
#winekeyContainer,#sparksContainer,#barrelContainer,#moreleafContainer,#morecorkContainer,#leavesContainer,
#vintageContainer,#cherryyContainer,#silkyContainer,#corkContainer,#caliContainer,#screwContainer,#vanillaContainer,
#grapeContainer,#corksContainer,#bluebContainer,#montereyContainer,#grapedContainer,#glassContainer,#plumsContainer,
#carContainer,#flavorContainer,#colorContainer,#cherryContainer,#corkCork,#Cherries,#stillleafContainer,
#morecorkContainer,#morecherryPath,#barrelContainer,#heartyContainer,#cherriesContainer,#arrowContainer{
  fill: transparent;
}

a{
  cursor:pointer;
}

svg{
  width:90%;
  display:block;
  margin: 0 auto;
  background-color: #000;
}

polyline,polygon{
  pointer-events: visibleFill;
  cursor:pointer;
}

.circle {
  border-radius: 50%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  display:block;
  cursor: pointer;
  width: 26px;
  height: 26px;
  z-index: 86;
  text-indent:-9999px;
  -webkit-transition: border-color .2s ease-in-out;
  -moz-transition: border-color .2s ease-in-out;
  -o-transition: border-color .2s ease-in-out;
  -ms-transition: border-color .2s ease-in-out;
  transition: border-color .2s ease-in-out;
}

.circle:hover {
  border-color: #fff !important;
  -webkit-transition: border-color .2s ease-in-out;
  -moz-transition: border-color .2s ease-in-out;
  -o-transition: border-color .2s ease-in-out;
  -ms-transition: border-color .2s ease-in-out;
  transition: border-color .2s ease-in-out;
}

.circle.white {
  background-color: #fff;
  border: 3px solid #fff;
}

.circle.white.filled, .circle.white:hover {
  border: 3px solid #c16093 !important;
  -webkit-transition: border-color .2s ease-in-out;
  -moz-transition: border-color .2s ease-in-out;
  -o-transition: border-color .2s ease-in-out;
  -ms-transition: border-color .2s ease-in-out;
  transition: border-color .2s ease-in-out;
}

.circle.pink {
  background-color: #c16093;
  border: 3px solid #c16093;
}

.circle.pink.filled {
  border: 3px solid #fff;
}

.circle.red {
  background-color: #d62e5b;
  border: 3px solid #d62e5b;
}

.circle.red.filled {
  border: 3px solid #fff;
}

.circle.yellow {
  background-color: #f7cf55;
  border: 3px solid #f7cf55;
}

.circle.yellow.filled {
  border: 3px solid #fff;
}

.circle.green {
  background-color: #75b552;
  border: 3px solid #75b552;
}

.circle.green.filled {
  border: 3px solid #fff;
}

.circle.blue {
  background-color: #635d93;
  border: 3px solid #635d93;
}

.circle.blue.filled {
  border: 3px solid #fff;
}

#colorNav{
  width:90%;
  margin:20px 5% 0 5%;
}

.undo{
  width:60px;
}

#instructions{
  margin: 75px 0 0 0;
}

#share,#share:link,#share:visited{
  width: 31px;
  height:35px;
  display:none;
  float:right;
  margin: -1px 25px 0 0;
  cursor: pointer;
  text-indent: -9999px;
  background: url('../share-sprite.gif') 0 -1px;
  background-size: 100%;
}

#share:hover,#share:active{
  background-position: 0 34px;
  background-color: #000;
  height:34px;
}

#canvas, #png-container{
  display:none;
  clear:both;
}

.svg-container{
  margin:0 auto 80px auto;
}

@media (min-width: 768px){
  .svg-container{
    width: 45%;
    max-width: 420px;
  }
}

@media (max-width: 768px){
  .svg-container{
    width: 95%;
    min-width: 340px;
  }
}