/**** Themes ****/

/** default **/

.itoast-main-container.theme-default .itoast-inner-container {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow:
        0px 1px 20px 1px rgba(30,30,30,0.25),
        0px 1px 2px 1px rgba(256,256,256,1) inset;
    -moz-box-shadow:
        0px 1px 20px 1px rgba(30,30,30,0.25),
        0px 1px 2px 1px rgba(256,256,256,1) inset;
    -o-box-shadow:
        0px 1px 20px 1px rgba(30,30,30,0.25),
        0px 1px 2px 1px rgba(256,256,256,1) inset;
    -ms-box-shadow:
        0px 1px 20px 1px rgba(30,30,30,0.25),
        0px 1px 2px 1px rgba(256,256,256,1) inset;
    box-shadow:
        0px 1px 20px 1px rgba(30,30,30,0.25),
        0px 1px 2px 1px rgba(256,256,256,1) inset;
    background-image: -webkit-linear-gradient(top, #EFEFEF, #B9B9B9);
    background-image: -o-linear-gradient(top, #EFEFEF, #B9B9B9);
    background-image: -moz-linear-gradient(top, #EFEFEF, #B9B9B9);
    background-image: linear-gradient(top, #EFEFEF, #B9B9B9);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#B9B9B9);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#B9B9B9)";
    color: #404040;
    text-shadow:
        0px 1px 2px rgba(256,256,256,1);
}

/** asphalt **/

.itoast-main-container.theme-asphalt .itoast-inner-container {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 8px;
    -webkit-box-shadow:
        0px 1px 20px 3px rgba(30,30,30,0.25),
        0px 0px 1px 1px rgba(0,0,0,0.7),
        0px 1px 2px 0px #737474 inset,
        0px 1px 0px 0px #737474 inset;
    -moz-box-shadow:
        0px 1px 20px 3px rgba(30,30,30,0.25),
        0px 0px 1px 1px rgba(0,0,0,0.7),
        0px 1px 2px 0px #737474 inset,
        0px 1px 0px 0px #737474 inset;
    -o-box-shadow:
        0px 1px 20px 3px rgba(30,30,30,0.25),
        0px 0px 1px 1px rgba(0,0,0,0.7),
        0px 1px 2px 0px #737474 inset,
        0px 1px 0px 0px #737474 inset;
    -ms-box-shadow:
        0px 1px 20px 3px rgba(30,30,30,0.25),
        0px 0px 1px 1px rgba(0,0,0,0.7),
        0px 1px 2px 0px #737474 inset,
        0px 1px 0px 0px #737474 inset;
    box-shadow:
        0px 1px 20px 3px rgba(30,30,30,0.25),
        0px 0px 1px 1px rgba(0,0,0,0.7),
        0px 1px 2px 0px #737474 inset,
        0px 1px 0px 0px #737474 inset;
    background-image: -webkit-linear-gradient(top, #4F4E4E, #1C1C1C);
    background-image: -moz-linear-gradient(top, #4F4E4E, #1C1C1C);
    background-image: -o-linear-gradient(top, #4F4E4E, #1C1C1C);
    background-image: linear-gradient(top, #4F4E4E, #1C1C1C);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4F4E4E, endColorstr=#1C1C1C);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4F4E4E, endColorstr=#1C1C1C)";
    color: rgba(250,250,250,1);
    border: solid 1px black;
    text-shadow:
        0px -1px 1px black;
}

/** jetblack **/

.itoast-main-container.theme-jetblack .itoast-inner-container {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow:
        0px 50px 0px -20px rgba(256,256,256,0.13) inset,
        0px 0px 3px 0px black,
        0px 0px 2px 0px rgba(256,256,256,0.4) inset;
    -moz-box-shadow:
        0px 50px 0px -20px rgba(256,256,256,0.13) inset,
        0px 0px 3px 0px black,
        0px 0px 2px 0px rgba(256,256,256,0.4) inset;
    -o-box-shadow:
        0px 50px 0px -20px rgba(256,256,256,0.13) inset,
        0px 0px 3px 0px black,
        0px 0px 2px 0px rgba(256,256,256,0.4) inset;
    -ms-box-shadow:
        0px 50px 0px -20px rgba(256,256,256,0.13) inset,
        0px 0px 3px 0px black,
        0px 0px 2px 0px rgba(256,256,256,0.4) inset;
    box-shadow:
        0px 50px 0px -20px rgba(256,256,256,0.13) inset,
        0px 0px 3px 0px black,
        0px 0px 2px 0px rgba(256,256,256,0.4) inset;
    border: solid 1px black;
    background: rgba(0,0,0,0.77);
    color: rgba(256,256,256,1);
    text-shadow: 0px -2px 4px black;
}

.itoast-main-container.theme-jetblack .itoast-close-button {
    background: rgba(0,0,0,0.77);
    -webkit-box-shadow:
        0px 50px 0px -20px rgba(256,256,256,0.13) inset,
        0px 0px 3px 0px black,
        0px 0px 2px 0px rgba(256,256,256,0.4) inset;
    -moz-box-shadow:
        0px 50px 0px -20px rgba(256,256,256,0.13) inset,
        0px 0px 3px 0px black,
        0px 0px 2px 0px rgba(256,256,256,0.4) inset;
    -o-box-shadow:
        0px 50px 0px -20px rgba(256,256,256,0.13) inset,
        0px 0px 3px 0px black,
        0px 0px 2px 0px rgba(256,256,256,0.4) inset;
    -ms-box-shadow:
        0px 50px 0px -20px rgba(256,256,256,0.13) inset,
        0px 0px 3px 0px black,
        0px 0px 2px 0px rgba(256,256,256,0.4) inset;
    box-shadow:
        0px 50px 0px -20px rgba(256,256,256,0.13) inset,
        0px 0px 3px 0px black,
        0px 0px 2px 0px rgba(256,256,256,0.4) inset;
}

.itoast-main-container.theme-jetblack .itoast-close-button i {
    position: relative;
    top: 5px;
}

/** frosted **/

.itoast-main-container.theme-frosted .itoast-inner-container {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow:
        0px 1px 8px 1px rgba(30,30,30,0.1),
        0px -1px 0px 1px rgba(256,256,256,0.6);
    -moz-box-shadow:
        0px 1px 8px 1px rgba(30,30,30,0.1),
        0px -1px 0px 1px rgba(256,256,256,0.6);
    -o-box-shadow:
        0px 1px 8px 1px rgba(30,30,30,0.1),
        0px -1px 0px 1px rgba(256,256,256,0.6);
    -ms-box-shadow:
        0px 1px 8px 1px rgba(30,30,30,0.1),
        0px -1px 0px 1px rgba(256,256,256,0.6);
    box-shadow:
        0px 1px 8px 1px rgba(30,30,30,0.1),
        0px -1px 0px 1px rgba(256,256,256,0.6);
    background-image: -webkit-linear-gradient(top, rgba(256,256,256,0.2), rgba(256,256,256,0.1));
    background-image: -moz-linear-gradient(top, rgba(256,256,256,0.2), rgba(256,256,256,0.1));
    background-image: -o-linear-gradient(top, rgba(256,256,256,0.2), rgba(256,256,256,0.1));
    background-image: linear-gradient(top, rgba(256,256,256,0.2), rgba(256,256,256,0.1));
    background-color: rgba(256,256,256,0.2);
    color: rgba(256,256,256,.95);
    text-shadow:
        0px 0px 10px rgba(0,0,0,0.15),
        0px 2px 2px rgba(0,0,0,0.25);
}

/** square **/

.itoast-main-container.theme-square .itoast-inner-container {
    border: solid 1px #6548B2;
    background-image: -webkit-linear-gradient(top left, #5234AC, #6440BF);
    background-image: -moz-linear-gradient(top left, #5234AC, #6440BF);
    background-image: -o-linear-gradient(top left, #5234AC, #6440BF);
    background-image: linear-gradient(top left, #5234AC, #6440BF);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#5234AC, endColorstr=#6440BF);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#5234AC, endColorstr=#6440BF)";
    color: white;
    font-weight: lighter !important;
}

/** mono **/

.itoast-main-container.theme-mono .itoast-inner-container {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    border: solid 3px rgba(150,150,150,0.3);
    -webkit-box-shadow: 10px 10px #3d3d3d;
    -moz-box-shadow: 10px 10px #3d3d3d;
    -o-box-shadow: 10px 10px #3d3d3d;
    -ms-box-shadow: 10px 10px #3d3d3d;
    box-shadow: 10px 10px #3d3d3d;
    background:  white;
    color: #3d3d3d;
}

/**** End Themes ****/

/***** Base CSS *****/

.itoast-main-container {
    position: fixed;
    overflow: hidden;
    padding: 20px;
    width: 300px;
    -webkit-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    -moz-transition: .5s all;
    transition: .5s all;
}

.itoast-main-container.top {
    top: 0px;
}

.itoast-main-container.bottom {
    bottom: 0px;
}

.itoast-main-container.left {
    left: 0px;
}
.itoast-main-container.right {
    right: 0px;
}

.itoast-main-container.type-success .itoast-icon-container {
    color: #75B547;
    text-shadow: 0px -1px 1px #3d3d3d;
}

.itoast-main-container.type-error .itoast-icon-container {
    color: #D2535D;
    text-shadow: 0px -1px 1px #3d3d3d;
}

.itoast-main-container.type-warn .itoast-icon-container {
    color: #FFC641;
    text-shadow: 0px -1px 1px #3d3d3d;
}

.itoast-main-container.type-cool .itoast-icon-container {
    color: #098ECF;
    text-shadow: 0px -1px 1px #3d3d3d;
}

.itoast-inner-container {
    width: 250px;
    font-family: Helvetica;
    font-weight: lighter;
    font-size: 13pt;
    padding: 5px;
    position: relative;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
}

.itoast-main-container .itoast-close-button {
    height: 20px;
    width: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px;
    float:right;
    position: relative;
    top: 0px;
    font-size: 10pt;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
}

.itoast-inner-container .itoast-icon-container {
    float: left;
    font-size: 40px;
    padding-top: 15px;
    margin-right: 10px;
}

.itoast-inner-container .itoast-close-button {
    cursor: pointer;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    opacity: 0;
    display: none;
}

.itoast-main-container.show-close .itoast-close-button {
    display: block;
}

.itoast-inner-container:hover .itoast-close-button {
    opacity: 1;
}

.itoast-inner-container .itoast-message-container {
    margin: 10px;
}

.itoast-main-container.has-title .itoast-message-container {
    margin-top: 1px;
}

.itoast-inner-container .itoast-title-container {
    font-weight: bold;
}

.itoast-main-container.top .itoast-inner-container {
    top: 0px;
}
.itoast-main-container.bottom .itoast-inner-container {
    bottom: 0px;
}

.itoast-main-container.left .itoast-inner-container {
    left: 0px;
}
.itoast-main-container.right .itoast-inner-container {
    right: 0px;
}

.itoast-main-container.top.animate-flyin .itoast-inner-container {
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -o-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
}

.itoast-main-container.bottom.animate-flyin .itoast-inner-container {
    -webkit-transform: translateY(200%);
    -moz-transform: translateY(200%);
    -o-transform: translateY(200%);
    -ms-transform: translateY(200%);
    transform: translateY(200%);
}

.itoast-main-container.right.animate-flyout-fadeout .itoast-inner-container {
    -webkit-transform: translateX(150%);
    -moz-transform: translateX(150%);
    -o-transform: translateX(150%);
    -ms-transform: translateX(150%);
    transform: translateX(150%);
    opacity: 0;
}

.itoast-main-container.left.animate-flyout-fadeout .itoast-inner-container {
    -webkit-transform: translateX(-150%);
    -o-transform: translateX(-150%);
    -ms-transform: translateX(-150%);
    -moz-transform: translateX(-150%);
    transform: translateX(-150%);
    opacity: 0;
}