/* APP */

body
{
    margin: 0;
    padding: 0; 
    background: url(../img/bg.png) #2f2f2f repeat-x;
    font-family: "MyRiad Pro"; 
    font-size: 22px;
    color: #333333;
}
ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}
a
{
    border: none;
    text-decoration: none;
}
.clear
{
    clear: both;
}

#box
{
    width: 960px;
    height: 835px;
    background: #fff;
    margin: 0px auto 0;
    border: 1px solid #e6e6e6;
    -moz-box-shadow:    9px 8px 20px -12px #B2B2B2;
    -webkit-box-shadow: 9px 8px 20px -12px #B2B2B2;
    box-shadow:         9px 8px 20px -12px #B2B2B2;
}

#box .header
{
    width: 100%;
    height: 45px;
    background: url(../img/box-header.png) repeat-x;
    text-align: center;
}

#box .header a
{
    color: #333333;
}

#box .header a:hover
{
    text-decoration: underline;
}

#box .header h1 
{
    font-size: 22px;
    margin: 0;
    padding: 7px 0 0;
    font-weight: normal;
}

#box #navi
{
    margin: 20px 0 0 15px;clear: both;
}

#box #navi li
{
    margin: 0;
    background: url(../img/naviBg.png) no-repeat;
    width: 58px;
    height: 61px;
    float: left;
    margin-left: 5px;
}

#box #navi .active
{
    background: url(../img/naviBgH.png) no-repeat;
}

#box #navi li a 
{
    margin-left: 5px;
    margin-top: 7px;
    position: absolute;
}

#box #navi li a img
{
    border: none;
}

#box .content
{
    clear: both;
    border: 1px solid #d1d1d1;
    width: 510px;
    height: 600px;
    margin-left: 0px;
    position: absolute;
    overflow: scroll;
}

#previews
{
    margin-top: 15px;
}

#previews li
{
    float: left;
    border: 1px solid #e6e6e6;
    border-radius: 5px;	
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 15px;
    margin-bottom: 15px;
}

#previews li:hover
{
    background: url(../img/LiBg.png) no-repeat;
    cursor: pointer;
}

#previews li .active
{
    background: url(../img/LiBg.png) no-repeat;
}

#AvatarInputs
{
		display: none;
}

#character
{
    float: right;
}

#RealAvatar
{
    margin-left: -450px;
    margin-top: -90px;
}

#RealAvatar img
{
    position: absolute;
}

#RealAvatar .shirt
{
		z-index: 0;
}

#RealAvatar .neckwear
{
		z-index: 1;
}

#RealAvatar .waistcoat
{
		z-index: 2;
}

#RealAvatar .jacket
{
		z-index: 3;
}


#RealAvatar .trouser
{
		z-index: 0;
}

#RealAvatar .headwear
{
		z-index: 5;
}

#Footer
{
    color: #DFDFDF;
    font-size: 15px;
    margin: 70px auto 0;
    width: 930px;
}

#Footer .Copyright
{
    float: left;
}

#Footer .EnesKul
{
    float: right;
}

#Footer a
{
    color: #DFDFDF;
}

#Footer a:hover
{
    color: #fff;
    text-decoration: underline;
}

/* BUTTON */

button.close {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    cursor: pointer;
    padding: 0;
}
.btn {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #E6E6E6);
    background-repeat: repeat-x;
    border-color: #E6E6E6 #E6E6E6 #B3B3B3;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 0;
    padding: 4px 10px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
}
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    background-color: #E6E6E6;
}
.btn:active, .btn.active {
}
.btn:first-child {
}
.btn:hover {
    -moz-transition: background-position 0.1s linear 0s;
    background-color: #E6E6E6;
    background-position: 0 -15px;
    color: #333333;
    text-decoration: none;
}
.btn:focus {
    outline: thin dotted #333333;
    outline-offset: -2px;
}
.btn.active, .btn:active {
    background-color: #E6E6E6;
    background-image: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    outline: 0 none;
}
.btn.disabled, .btn[disabled] {
    background-color: #E6E6E6;
    background-image: none;
    box-shadow: none;
    cursor: default;
    opacity: 0.65;
}
.btn-large {
    border-radius: 5px 5px 5px 5px;
    font-size: 15px;
    line-height: normal;
    padding: 9px 14px;
}
.btn-large [class^="icon-"] {
    margin-top: 1px;
}
.btn-small {
    font-size: 11px;
    line-height: 16px;
    padding: 5px 9px;
}
.btn-small [class^="icon-"] {
    margin-top: -1px;
}
.btn-mini {
    font-size: 11px;
    line-height: 14px;
    padding: 2px 6px;
}
.btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover, .btn-inverse, .btn-inverse:hover {
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active {
    color: rgba(255, 255, 255, 0.75);
}
.btn {
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-primary {
    background-color: #0074CC;
    background-image: -moz-linear-gradient(center top , #0088CC, #0055CC);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
    background-color: #0055CC;
}
.btn-primary:active, .btn-primary.active {
}
.btn-warning {
    background-color: #FAA732;
    background-image: -moz-linear-gradient(center top , #FBB450, #F89406);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
    background-color: #F89406;
}
.btn-warning:active, .btn-warning.active {
}
.btn-danger {
    background-color: #DA4F49;
    background-image: -moz-linear-gradient(center top , #EE5F5B, #BD362F);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
    background-color: #BD362F;
}
.btn-danger:active, .btn-danger.active {
}
.btn-success {
    background-color: #5BB75B;
    background-image: -moz-linear-gradient(center top , #62C462, #51A351);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
    background-color: #51A351;
}
.btn-success:active, .btn-success.active {
}
.btn-info {
    background-color: #49AFCD;
    background-image: -moz-linear-gradient(center top , #5BC0DE, #2F96B4);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-color: #2F96B4;
}
.btn-info:active, .btn-info.active {
}
.btn-inverse {
    background-color: #414141;
    background-image: -moz-linear-gradient(center top , #555555, #222222);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
    background-color: #222222;
}
.btn-inverse:active, .btn-inverse.active {
}
button.btn, input.btn[type="submit"] {
}
button.btn::-moz-focus-inner, input.btn[type="submit"]::-moz-focus-inner {
    border: 0 none;
    padding: 0;
}
button.btn.btn-large, input.btn.btn-large[type="submit"] {
}
button.btn.btn-small, input.btn.btn-small[type="submit"] {
}
button.btn.btn-mini, input.btn.btn-mini[type="submit"] {
}
.btn-group {
    position: relative;
}
.btn-group:before, .btn-group:after {
    content: "";
    display: table;
}
.btn-group:after {
    clear: both;
}
.btn-group:first-child {
}
.btn-group + .btn-group {
    margin-left: 5px;
}
.btn-toolbar {
    margin-bottom: 9px;
    margin-top: 9px;
}
.btn-toolbar .btn-group {
    display: inline-block;
}
.btn-group > .btn {
    border-radius: 0 0 0 0;
    float: left;
    margin-left: -1px;
    position: relative;
}
.btn-group > .btn:first-child {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}
.btn-group > .btn:last-child, .btn-group > .dropdown-toggle {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}
.btn-group > .btn.large:first-child {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    margin-left: 0;
}
.btn-group > .btn.large:last-child, .btn-group > .large.dropdown-toggle {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active {
    z-index: 2;
}
.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle {
    outline: 0 none;
}
.btn-group > .dropdown-toggle {
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.125) inset, 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    padding-left: 8px;
    padding-right: 8px;
}
.btn-group > .btn-mini.dropdown-toggle {
    padding-left: 5px;
    padding-right: 5px;
}
.btn-group > .btn-small.dropdown-toggle {
}
.btn-group > .btn-large.dropdown-toggle {
    padding-left: 12px;
    padding-right: 12px;
}
.btn-group.open .dropdown-toggle {
    background-image: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-group.open .btn.dropdown-toggle {
    background-color: #E6E6E6;
}
.btn-group.open .btn-primary.dropdown-toggle {
    background-color: #0055CC;
}
.btn-group.open .btn-warning.dropdown-toggle {
    background-color: #F89406;
}
.btn-group.open .btn-danger.dropdown-toggle {
    background-color: #BD362F;
}
.btn-group.open .btn-success.dropdown-toggle {
    background-color: #51A351;
}
.btn-group.open .btn-info.dropdown-toggle {
    background-color: #2F96B4;
}
.btn-group.open .btn-inverse.dropdown-toggle {
    background-color: #222222;
}
.btn .caret {
    margin-left: 0;
    margin-top: 7px;
}
.btn:hover .caret, .open.btn-group .caret {
    opacity: 1;
}
.btn-mini .caret {
    margin-top: 5px;
}
.btn-small .caret {
    margin-top: 6px;
}
.btn-large .caret {
    border-left-width: 5px;
    border-right-width: 5px;
    border-top-width: 5px;
    margin-top: 6px;
}
.dropup .btn-large .caret {
    border-bottom: 5px solid #000000;
    border-top: 0 none;
}
.btn-primary .caret, .btn-warning .caret, .btn-danger .caret, .btn-info .caret, .btn-success .caret, .btn-inverse .caret {
    border-bottom-color: #FFFFFF;
    border-top-color: #FFFFFF;
    opacity: 0.75;
}

#generate {
    margin-left: -295px;
    margin-top: 765px;
    position: absolute;
}

#noBorder
{
    border: none; 
}

#bording
{
        border: 1px solid #e6e6e6;
    -moz-box-shadow:    9px 8px 20px -12px #B2B2B2;
    -webkit-box-shadow: 9px 8px 20px -12px #B2B2B2;
    box-shadow:         9px 8px 20px -12px #B2B2B2;
    margin-left: 20px;
}


#Show 
{
    margin: 85px auto 0;
    width: 630px;
}

#ShowAvatars {
    margin-top: 20px;
    width: 670px;
    float: left;
}


#ShowButtons {
    float: left;
    margin-left: 20px;
    margin-top: 158px;
}

#ShowButton .clearFix
{
    clear: both; 
    margin-top: 10px;
}
.btn-info {display:none !important;}