/* Animations to show #menu_left */
    #panels, #menu_left > * {
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);

	transition-property: transform;
	transition-duration: 300ms;
	transition-timing-function: ease-in-out;

	/* Safari */
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 300ms;
	-webkit-transition-timing-function: ease-in-out;
    }

    body.menu_left #panels {
	-webkit-transform: translateX(240px);
	transform: translateX(240px);
    }

    #menu_left > * {
	transform: scale(.9, .95);
	-webkit-transform: scale(.9, .95);
    }

    body.menu_left #menu_left > * {
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
    }


/* Animated menu / back / close popup buttons */

    #btn_menu_left, #btn_back {
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);

	transition-property: opacity;
	transition-duration: 200ms;
	transition-timing-function: linear;
	/* Safari */
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 200ms;
	-webkit-transition-timing-function: linear;
    }

    #btn_menu_left.hide, #btn_back.hide {
	opacity: 0;
	z-index: 9;
    }

    #btn_close_popup {
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);

	transition-property: transform, opacity;
	transition-duration: 200ms;
	transition-timing-function: ease-out;
	/* Safari */
	-webkit-transition-property: -webkit-transform, opacity;
	-webkit-transition-duration: 200ms;
	-webkit-transition-timing-function: ease-out;
    }

    #btn_close_popup.hide {
	-webkit-transform: translateY(700%);
	transform: translateY(700%);
	opacity: 0;
    }

/* Animations to show and hide panels */

    #panels > .panel, #panels > .panel > * {
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);

	transition-property: transform, opacity;
	transition-duration: 200ms;
	transition-timing-function: ease-out;
	/* Safari */
	-webkit-transition-property: -webkit-transform, opacity;
	-webkit-transition-duration: 200ms;
	-webkit-transition-timing-function: ease-out;
    }

    #panels > .panel.hidden_horizontal {
	-webkit-transform: translateX(20%);
	transform: translateX(20%);
	opacity: 0;
    }

    #panels > .panel.hidden_vertical {
	-webkit-transform: translateY(50%);
	transform: translateY(50%);
	opacity: 0;
    }


/* Animation for history panels */

    #panels > .panel.history .content {
	opacity: 0;
    }


/* Animation for Do Gets */

    #panels .doget .picture_choice .picture {

	transition-property: border, opacity;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
	/* Safari */
	-webkit-transition-property: border, opacity;
	-webkit-transition-duration: 150ms;
	-webkit-transition-timing-function: ease-out;

    }

    #panels .doget .rating .rate {

	transition-property: background-position;
	transition-duration: 150ms;
	transition-timing-function: ease-out;
	/* Safari */
	-webkit-transition-property: background-position;
	-webkit-transition-duration: 150ms;
	-webkit-transition-timing-function: ease-out;

    }

    #panels .doget p {

	transition-property: color;
	transition-duration: 150ms;
	transition-timing-function: linear;
	/* Safari */
	-webkit-transition-property: color;
	-webkit-transition-duration: 150ms;
	-webkit-transition-timing-function: linear;
    }

/* Animations for actionsheet and alerts */

    #actionsheet_layer, #actionsheet, #alert_layer, #alert, #confirm {
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);

	transition-property: transform, opacity;
	transition-duration: 200ms;
	transition-timing-function: ease-out;
	/* Safari */
	-webkit-transition-property: -webkit-transform, opacity;
	-webkit-transition-duration: 200ms;
	-webkit-transition-timing-function: ease-out;
    }

    #actionsheet_layer.hidden, #alert_layer.hidden {
	opacity: 0;
    }

    #actionsheet.hidden, #alert.hidden, #confirm.hidden {
	-webkit-transform: translateY(-20%);
	transform: translateY(-20%);
	opacity: 0;
    }

    #actionsheet.bottom.hidden, #alert.bottom.hidden, #confirm.bottom.hidden {
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	opacity: 1;
    }
