#choose-balloon { border: solid 2px #35a7de; border-radius: 25px; padding: 15px; background-color: #fff; min-width: 720px; }
#choose-balloon .orientations { margin: 40px 0; }
#choose-balloon .types .type { margin-bottom: 40px; }
#choose-balloon .types .type:last-child { margin-bottom: 0; }
#choose-balloon .types .type .colours { }
#choose-balloon .types .type .colours a { display: block; float: left; width: 180px; padding: 0; margin: 0 30px 30px 0; height: 255px; text-decoration: none; border: solid 2px #e0e0e0; border-radius: 10px; transition: border-color linear .3s; }
#choose-balloon .types .type .colours a:hover { border-color: #888; }
#choose-balloon .types .type .colours a img { margin: auto; display: block; }
#choose-balloon .types .type .colours a .title { display: block; color: #333; text-align: center; line-height: 20px; }
#choose-balloon .types .type .colours a .colour-code { display: block; color: #333; text-align: center; line-height: 20px; }
#choose-balloon .types .type .colours a.selected { border-color: #35a7de; }
#choose-balloon .types.orientation-up .type .colours a img { margin: auto; display: block; transform: rotate(180deg); }
#choose-balloon .types.orientation-down .type .colours a img { transform: rotate(0deg); }
#choose-balloon.change { border: none; min-width: 0; }
#choose-balloon.change .types .type .colours a { margin-right: 15px; }

#build-balloon { border: solid 2px #35a7de; border-radius: 25px; padding: 15px 15px 7px 15px; position: relative; background-color: #fff; min-width: 720px; }
#build-balloon .actions { margin-bottom: 15px; }
#build-balloon .balloon-container { width: 450px; height: 450px; z-index: 0; position: relative; }
#build-balloon .balloon-container #insertion-zone { position: absolute; top: 45%; left: 50%; width: 220px; height: 220px; margin-left: -110px; margin-top: -110px; border: solid 2px #fff; }
#build-balloon .balloon-container #insertion-zone img { width: 214px; height: 214px; }
#build-balloon .balloon-container #insertion-zone.hide-grid { border: none; margin-left: -108px; margin-top: -108px; }
#build-balloon #sidebar { position: absolute; top: 15px; right: 15px; width: 400px; }
#build-balloon #sidebar .framed { border: solid 2px #35a7de; border-radius: 15px; margin-bottom: 15px; padding: 5px 10px; background-color: #fff; }
#build-balloon #sidebar .framed ul.tabs { margin: 0; padding: 5px 0 0 0; list-style: none; height: 39px; border-bottom: solid 2px #35a7de; }
#build-balloon #sidebar .framed ul.tabs li { display: block; float: left; background-color: #fff; line-height: 30px; height: 32px; padding: 0 15px; border: solid 2px #fff; cursor: pointer; border-radius: 8px 8px 0 0; }
#build-balloon #sidebar .framed ul.tabs li:hover { background-color: #f0f0f0; border-color: #f0f0f0; }
#build-balloon #sidebar .framed ul.tabs li.active { border-color: #35a7de; border-bottom-color: #fff; height: 34px; background-color: #fff; cursor: default; }

.field-colour .input { position: relative; }
.field-colour .input .current-colour { width: 34px; height: 34px; border: solid 1px #ccc; }
.field-colour .input button { position: absolute; top: 0; left: 40px; }

.field-colour { border-top: solid 1px #ccc; padding-top: 5px; }
.field-colour a { float: left; display: block; width: 27px; height: 27px; border: solid 2px #ccc; margin: 0 4px 4px 0; text-align: center; border-radius: 3px; }
.field-colour a span.fa { line-height: 23px; color: #53BCEB; display: none; }
.field-colour a.selected span.fa { display: block; }

#build-balloon .field-picture .input { position: relative; padding-left: 40px; }
#build-balloon .field-picture .input .current-picture { position: absolute; left: 0; width: 34px; height: 34px; border: solid 1px #ccc; background-color: #ccc; background-image: url('./images/no-picture.png'); background-repeat: no-repeat; background-position: center; }
#build-balloon .field-picture .input .current-picture.has-picture { background-image: none; }
#build-balloon .field-picture .input .current-picture img { width: 32px; height: 32px; }

#build-balloon.orientation-up .balloon-container > img { transform: rotate(180deg); width: 450px; height: 450px; }
#build-balloon.orientation-up .balloon-container #insertion-zone { top: 55%; }

#insertion-zone table { border-collapse: collapse; width: 214px; height: 214px; }
#insertion-zone table tr td { text-align: center; vertical-align: center; line-height: 1.2em; }

#build-balloon #sidebar #tab-panels .tab-panel { display: none; padding-top: 10px; height: 305px; }
#build-balloon #sidebar #tab-panels .tab-panel.active { display: block; }

#build-balloon #side-preview { width: 255px; height: 144px; margin: 15px 0 15px 97px; }
#build-balloon .preview { width: 120px; height: 144px; float: left; }
#build-balloon .preview .image { cursor: pointer; border: solid 2px #e0e0e0; border-radius: 8px; }
#build-balloon .preview .image img { width: 100px; height: 100px; margin: 10px; }
#build-balloon .preview .title { text-align: center; line-height: 24px; }
#build-balloon .preview.active .image { border: solid 2px #35a7de; }
#build-balloon #side-front { margin-right: 15px; }

#side-1-colourpicker { position: absolute; z-index: 1000; }
#side-2-colourpicker { position: absolute; z-index: 1000; }

.colorpicker .colorpicker_submit { cursor: pointer; }

#upload-picture-dialog .submit { padding-top: 5px; }
#upload-picture-dialog .current-photo { width: 214px; height: 214px; border: solid 1px #ccc; background-position: -110px -110px; }
#upload-picture-dialog .current-photo img { width: 212px; height: 212px; }
#upload-picture-dialog .padding-top { padding-top: 15px; }
#upload-picture-dialog .form-current-picture { width: 214px; }
#upload-picture-dialog .field-colour { position: relative; }
#upload-picture-dialog .field-colour #colourpicker { position: absolute; z-index: 100; bottom: 34px; right: 0; }


#build-balloon .details .form { padding-top: 5px; font-size: 16px; }
#build-balloon .details .form .field { margin-bottom: 5px; }
#build-balloon .details .form .field :before,
#build-balloon .details .form .field :after { content: " "; display: table; }
#build-balloon .details .form .field :after { clear: both; }
#build-balloon .details .form .field { *zoom: 1; }
#build-balloon .details .form .field .title { float: left; width: 80px; font-size: 15px; color: #777; }
#build-balloon .details .form .field .value,
#build-balloon .details .form .field .input { padding-left: 85px; }
#build-balloon .details .form .field.quantity .input input { width: 80px; }
#build-balloon .details .form .price { font-size: 22px; font-weight: bold; padding: 10px 0; }
#build-balloon .details .form .submit { padding-bottom: 5px; }
#build-balloon .details .form .submit button { width: 150px; }

@media only screen and (max-width: 991px) {
	#build-balloon #sidebar { width: 220px; }
	#side-1-colourpicker { right: 0; }
}