html, body{
	background-image:url('../images/background.jpg');	
	background-size:cover;
}

#footerContainer h2 {
    font-size: 14px;
    color: white;
}
.headerLogo img {
    display: inline-block;
    height: 70px;
    margin: 13px 18px 1em 0;
    position: relative;
    width: auto;
}

.headerTitle h1 {
    font-family: 'Abril Fatface', cursive;
    font-weight: 500;
    color: #fff;	
    font-size: 42px;
    letter-spacing: 5px;
    margin-top: 35px;
}

#headerContainer {
    background-color: #4a4a4a;
/*    background:  url("../images/masks.png") no-repeat 72% 0;
    background-size: auto;*/
    min-height: 100px;
}

.masks-overlay {
    margin: 0.5em 1em 0.5em 0;
    float: left;
    width: 150px;
}

.headerLogo {
    text-align: right;
}
#instructions {
    background-color: #34438c;
    color: #fff;
    padding: 1em;
}
#footerContainer{
background:#4a4a4a;
display:block;
height:45x;
position:absolute;
bottom:0px;
}
#headerDrama img{
height:100px;	;
width:auto;
}
.headerLogo img {
    display: inline-block;
    height: 70px;
    margin-right: 18px;
    margin-top: 13px;
    position: relative;
    width: auto;
}




.doll{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+50,d1d1d1+51,fefefe+100;Grey+Gloss+%231 */
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */

	background-size:cover;
	width:20%;
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.38);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.38);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.38);
position: relative;
float:left;
border:1px solid #9B9B9B;
margin-left:50px;

}

#dollContainer{
	width: 100%;
  height: 100%;
  position: relative;
  padding-left:0;
  padding-right:0;
}

#topBody {
    position: absolute;
    z-index: 3;
	width:100%;
	top: 16.5%;
	left:-1%;
	cursor:pointer
}

#bottomBody {
    position: absolute;
    z-index: 2;
    width: 100%;
	top: 40%;
	left:-1%;
		cursor:pointer
	
}
#shoesBody {
    position: absolute;
    left: -1%;
    z-index: 1;
    width: 100%;
  top: 84%;
  	cursor:pointer
}


/*clothes*/

.clothes_items{
		width:75%;
		float:right;
}


#tops li, #bottoms li, #shoes li, #full li  {
    list-style: none;
    display: inline-block;
	cursor:pointer;
}



#maleContainer {
	-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
	background:-moz-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
	background:-webkit-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
	background:-o-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
	background:-ms-linear-gradient(top, #3d94f6 5%, #1e62d0 100%);
	background:linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0',GradientType=0);
	background-color:#3d94f6;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #337fed;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #1570cd;
}
#maleContainer:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6));
	background:-moz-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
	background:-webkit-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
	background:-o-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
	background:-ms-linear-gradient(top, #1e62d0 5%, #3d94f6 100%);
	background:linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6',GradientType=0);
	background-color:#1e62d0;
}
#maleContainer:active {
	position:relative;
	top:1px;
}

#femaleContainer {
	-moz-box-shadow:inset 0px 1px 0px 0px #fbafe3;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fbafe3;
	box-shadow:inset 0px 1px 0px 0px #fbafe3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ff5bb0), color-stop(1, #ef027d));
	background:-moz-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
	background:-webkit-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
	background:-o-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
	background:-ms-linear-gradient(top, #ff5bb0 5%, #ef027d 100%);
	background:linear-gradient(to bottom, #ff5bb0 5%, #ef027d 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bb0', endColorstr='#ef027d',GradientType=0);
	background-color:#ff5bb0;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ee1eb5;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #c70067;
}
#femaleContainer:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ef027d), color-stop(1, #ff5bb0));
	background:-moz-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
	background:-webkit-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
	background:-o-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
	background:-ms-linear-gradient(top, #ef027d 5%, #ff5bb0 100%);
	background:linear-gradient(to bottom, #ef027d 5%, #ff5bb0 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ef027d', endColorstr='#ff5bb0',GradientType=0);
	background-color:#ef027d;
}
#femaleContainer:active {
	position:relative;
	top:1px;
}

.button{
    height: 200px;
    font-size: 2em !important;
    line-height: 163px;	
}

.maleFemale{
margin-top:20px;	
}

.main-content {
    margin-top: 25px;
}


li.item {
    display: inline-block;
}

.itemList{
color:fff;	
}

#tops li img, #bottoms li img, #shoes li img, #full li img{
width: 100%;	
}

#tops li, #bottoms li{
    height: 200px;
}

#shoes li{
    height: 80px;
}

#full li{
    height: 300px;
}


.button-back {
    margin-top: 13px;
    padding: 4px 15px 3px 30px;     
    font-size: 18px;  
}

.button-back .glyphicon-triangle-left {
    position: absolute;
    top: 6px;
    left: 10px;
}

.button-alt {
    background: #4a4a4a;
    color: #fff;
    border: 1px solid #333;
    text-shadow: none;
}

.button-alt:hover {
    background: #fff;
    text-shadow: 0px 1px 1px #ccc;
}
.sectionTab {
	-moz-box-shadow: 0px 10px 14px -7px #276873;
	-webkit-box-shadow: 0px 10px 14px -7px #276873;
	box-shadow: 0px 10px 14px -7px #276873;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
	background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
	background-color:#599bb3;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
	
    text-align: -webkit-center;
	margin-top:5px;
}
.sectionTab:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
	background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
	background-color:#408c99;
}
.sectionTab:active {
	position:relative;
	top:1px;
}

#topBody img {
    width: 90%;
    left: 5%;
    position: relative;
}
	
#bottomBody img {
    position: relative;
    width: 90%;
    left: 3%;
}

#shoesBody img {
    position: relative;
    width: 90%;
    bottom: 12px;
    left: 4%;
}


.selected:before{
	font-family:FontAwesome;
	content:"\f061";
	position:absolute;
    left: -60px;
	    top: 35%;	
}

#slider {
    position: absolute;
    bottom: -8%;
}

.moreInfoContainer {
    width:100%;
    display: inline-block;
    margin: 0 auto;
    
    -webkit-border-radius: 10px;
    
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
    
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
	
} 

.moreInfoContainer span {
    background-color: #E8E8E8;
   
    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),
        
        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),
        
        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0))),        
        
        /* diagonal line pattern */
        -webkit-gradient(
            linear, 
            0% 100%, 
            100% 0%, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(40%,#D2D2D1), 
            color-stop(60%,#D2D2D1), 
            color-stop(60%,rgba(255,255,255,0)), 
            color-stop(100%,rgba(255,255,255,0)));
    
        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */
    
    -webkit-background-size: 100%, 100%, 100%, 4px 4px;
    
    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;
    
    display: inline-block;
    padding: 10px 40px 10px 40px;
    
    color: #3A474D;
    text-transform: uppercase;
    font-size: 21px;
    
    text-shadow: 0px 1px #fff, 0px -1px #262F33;
	
	width: 100%;
    text-align: center;
}

        .moreInfoContainer span:hover {
            color: #337ab7;
            text-shadow: 0px -1px #25659c;
            cursor: pointer;
        }

        .moreInfoContainer:active {
            -webkit-box-shadow: 
                0px 3px rgba(128,128,128,1),
                0px 4px rgba(118,118,118,1),
                0px 5px rgba(108,108,108,1),
                0px 6px rgba(98,98,98,1),
                0px 7px rgba(88,88,88,1),
                0px 8px rgba(78,78,78,1),
                0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
        }

        .moreInfoContainer:active span{
            -webkit-transform: translate(0, 5px); /* depth of button press */
        }

   
	a.button.col-md-12{
		
		padding-left:0;
		padding-right:0;
	}
	
	
@media (max-width: 768px){

    .headerTitle h1 {
        margin-top: 10px;
    }
}