html {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body {
    margin: 0px;
}

.databox {
    position: absolute;
    left: 600px;
    top: 40px;
    background-color: gainsboro;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.iphone {
    /* Braclet Large:
    width: 700px
    height: 185px
    border-radius: 10px;
    Need to change the way stretched or repeat backgrounds work
    turn off or change bar/border
    turn off or change top/bottom half colors
    Everything else seems to work!
    */
    z-index: -1000;
    width: 250px;
    height: 480px;
    #background-size: cover;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 40px;
    left: 300px;
    border: 1px solid;
    -moz-border-radius: 34px;
    -webkit-border-radius: 34px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    box-shadow: 10px 10px 5px #888888;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
}

.topper {
    z-index: -900;
    width: 250px;
    height: 240px;
    top: 0px;
    left: 0px;
    position: absolute;
    -moz-border-radius: 34px 34px 0px 0px;
    -webkit-border-radius: 34px 34px 0px 0px;

    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
}

.bottomer {
    z-index: -800;
    width: 250px;
    height: 240px;
    top: 240px;
    left: 0px;
    position: absolute;
    -moz-border-radius: 0px 0px 34px 34px;
    -webkit-border-radius: 0px 0px 34px 34px;

    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
}

.band {
    z-index: -700;
    width: 250px;
    height: 100px;
    margin-top: 0px;
}

.circle {
    width: 175px;
    height: 175px;
    margin-top: -137.5px;
    margin-left: 37px;
    position: absolute;
    display:block;
    border-radius: 90%;
    -webkit-border-radius: 90%;
    -moz-border-radius: 90%;
}

.oval {
    width: 230px;
    height: 175px;
    margin-top: -135px;
    margin-left: 10px;
    position: absolute;
    border-radius: 90%;
    -webkit-border-radius: 65%;
    -moz-border-radius: 65%;
}

.outerring {
    width: 160px;
    height: 160px;
    margin-top: -140px;
    margin-left: 33px;
    border-radius: 90%;
    -webkit-border-radius: 90%;
    -moz-border-radius: 90%;
    position: absolute;
}

.innerring {
    width: 140px;
    height: 140px;
    margin-top: -123px;
    margin-left: 50px;
    border-radius: 75%;
    -webkit-border-radius: 75%;
    -moz-border-radius: 75%;
    position: absolute;
}

.rectangle {
    width: 200px;
    height: 150px;
    border-radius: 25px;
    margin-left: 25px;
    margin-top: -125px;
    position: absolute;
}

.rectangleinner {
    width: 180px;
    height: 130px;
    border-radius: 25px;
    margin-left: 30px;
    margin-top: -120px;
    position: absolute;
}

.monograminput {
    width: 30px;
}

#monogram {
    margin-top: -150px;
    position: absolute;
    width: 250px;
    height: 100px;
}

#monogramc {
    width: 33%;
    text-align: center;
    float: left;
    display: none;
}

#monograml {
    width: 33%;
    text-align: center;
    float: left;
    display: none;
}

#monogramr {
    width: 33%;
    text-align: center;
    float: left;
    display: none;
}

.mono {

}

.monor {

}

.monol {

}

h2 {
    font: 400 75px/1.3 'Arizonia', Helvetica, sans-serif;
}

#nav li a {
    background-image: url('/img/controlsprites.png')
}

#nav li a.item1 {
    background-position: 0px 0px
}

#nav li a:hover.item1 {
    background-position: 0px -72px
}

#nav li a.item2 {
    background-position: 0px -143px;
}

#nav li a:hover.item2 {
    background-position: 0px -215px;
}

@font-face {
  font-family: 'VineMonogram';
  src: url('../img/VINEMSB_.ttf');
}

#options {

    margin-left: 10px;
    margin-top: 10px;
}

#clicker {
    width: 50px;
    height: 50px;
    margin: 0px;
    background: orange;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    position: absolute;
    border-radius: 50px;
    margin-top: 100px;
    margin-left: 100px;
}

.controls_better {
    text-align: center;
    position: absolute;
}

.holdme {
    position: relative;
    border: 1px solid white;
    float: left;
    width: 20px;
    height: 20px;
    background-color: cornflowerblue;
    cursor:pointer
}
.controls_better_text {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

a {
    text-decoration: none;
}

a:link {
    color: black;
}

a:hover {
    color: white;
    font-weight: bold;
}

a:visited {
    color: black;
}

a:active {
    color: white;
    background-color: greenyellow;
}

#draggable {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: coral;
    position: absolute;
    margin-top: 100px;
    margin-left: 100px;

}

#draggable2 {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    background-color: cornflowerblue;
    position: absolute;
    margin-top: 200px;
    margin-left: 200px;

}

#dragmini {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: yellowgreen;
    position: absolute;
    margin-top: 110px;
    margin-left: 110px;
}

.ui-accordion .ui-accordion-content {
    padding: 10px 20px 0px 0px; !important;
}

canvas {
    padding: 10px;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    block;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url('http://i.stack.imgur.com/FhHRx.gif')
                50% 50%
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

/*Menu Block
/* CSS Document */

.offscreen {
  position: absolute;
  top: -30em;
  left: -300em;
}

div#hmenu {
   margin: 0;
   padding: .3em 0 .3em 0;
   background: #99CCCC;
   width: 100%;
   text-align: left;
}

div#hmenu ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

div#hmenu ul li {
   margin: 0;
   padding: 0;
   display: inline;
}

div#hmenu ul a:link{
   margin: 0;
   padding: .3em .4em .3em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   color: white;
}

div#hmenu ul a:visited{
   margin: 0;
   padding: .3em .4em .3em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   color: white;
}

div#hmenu ul a:active{
   margin: 0;
   padding: .3em .4em .3em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   color: #227755;
}

div#hmenu ul a:hover{
   margin: 0;
   padding: .3em .4em .3em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   color: white;
   background-color: #663300;
}
/* End Menu Block