/*
  Detaily's Cascading style Sheets documentation
  Work in progress since 2012... 
  Copyright protected.  It can be used with permission.
*/

body {
    width: 100%;
}

/* resizable frames and responsive and cabs */


.treefit { width: 100%; height: 88%; border: 0px; } 

.detfit { width: 100%; height: 760px; border: 0px; } 

.container {
  width: 100%;
  height: auto;
  display: flex;
  position: relative;
}
.left, .tree, .file, .right {
  width: 25%;
}
.left {
}
.tree {
}
.file {
}
.right {
}

.gutter {
  position: relative;
  cursor: ew-resize;
  Height: auto;
}

.bars {
  width: 2px;
  height: 60px;
  background: #CECECE;
  position: absolute;
  top: 20%;
  left: 2px;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.bars:before, .bars:after {
  content: "";
  height: 100%;
  background: #CECECE;
  width: 2px;
  position: absolute;
}
.bars:before {
  left: 7px;
}
.bars:after {
  left: 7px;
}

/* Media Query for Tablets and mobiles */
@media only screen and (min-width : 285px) and (max-width : 768px) {
/* Header  to be added */

/* Main content sections */
.container {
	display: block;
}
.left {
}
.tree {
-ms-transform: translate(5%, 0%);
transform: translate(5%, 0%);
-webkit-transform: translate(5%, 0%);
-moz-transform: translate(5%, 0%);
-o-transform: translate(5%, 0%);
}
.file {
}
.right {
}
.bars {
  width: 30px;
  height: 0px;
}
.treefit { width: 800%; height: 260px; border: 0px; } 
.detfit { width: 126%; height: 80%; border: 0px; } 
}
/* Footer to be added */

/* File Cabs responsive */

#cabspace {
width: 0.75%;

}
#cabtop {
height: 7px;

}
#cabbota {
height: 3px;

}
#cabbotb {
height: 10px;

}
#cabgap {
padding-top: 8px;
}
.blind {
display: block;
}
.cabline {
display: none;
}


.cabinet {
	width: 89%;
  overflow: hidden;
   -ms-transform: translate(3%, 0%);
  transform: translate(3%, 0%);
  -webkit-transform: translate(3%, 0%);
    -moz-transform: translate(3%, 0%);
    -o-transform: translate(3%, 0%);
}

.cabinet a {
  float: left;
  display: block;
  padding-top: 1px;
  padding-right: 0.5%;
  padding-left: 0.25%;
  padding-bottom: 1px;

}

.active {
  background-color: #ffffff;
}

.icon {
	position: absolute;
	right: 24px;
    top: 0px;
}
.cabinet .icon {
  display: none;
}
.cabinet a:hover {
}


/* top and bot band */

.topblank {
display: none;
}

.toptext {
display: block;
}

.toprul {
width: 90%;
  height: 21px;
  background-image: url('//detaily.com/image/img/top-rul.png'); 
  margin-left: 6%;
}

.topband {
width: 100%;
  height: 121px;
  background-image: 
  url('//detaily.com/image/img/detaily-glass1.png'),
  url('//detaily.com/image/img/detaily-glass2.png'), 
  url('//detaily.com/image/img/detaily-glass3.png'), 
  url('//detaily.com/image/img/detaily-glass4.png'),
  url('//detaily.com/image/img/detaily-glass5.png'),
  url('//detaily.com/image/img/detaily-glass6.png'),
  url('//detaily.com/image/img/top-bg-121.png');
  background-position: 5%, 15%, 40%, 55%, 72%, 92%, left;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

#toplogo {
margin-left: 8%;
margin-top: -18px;
}
.botrul {
width: 100%;
  height: 21px;
  background-image: url('//detaily.com/image/img/bot-rul-bot.png');
}
.botbgtop {
width: 100%;
height: 5px;
  background-image: url('//detaily.com/image/img/bot-bg-top.png'); 
}

.botbgbot {
 height: 21px;
 background-image: url('//detaily.com/image/img/bot-bg-bot.png'); 
}

.toptext p {
	 font-size: 12px;
}

/* Left side tree Ad */	
.treeAd {
display: block;
}
/* Amazon bottom ad for small screens */	
.amazonAd {
display: none;
}

/* index resizable frames and others */

@media screen and (max-width: 920px) {

.treeAd {
display: none;
}
.amazonAd {
display: block;
}
}

@media screen and (max-width: 680px) {
.topblank {
display: block;
height: 5px;
}
.toptext p {
display: none;
}

#toplogo {
margin-top: 0px;
margin-left: 6%;
}
.topband {
  height: 110px;
  background-image: url('//detaily.com/image/img/top-bg-110.png');
  background-repeat: repeat;
}
.treeAd {
display: none;
}
.amazonAd {
display: block;
}
}
@media screen and (max-width: 480px) {
.topblank {
display: block;
height: 10px;
}
.toprul {
display: none;
}
.toptext p {
display: none;
}
#toplogo {
margin-top: 0px;
margin-left: 3%;
}
.topband {
  height: 94px;
  background-image: url('//detaily.com/image/img/top-bg-94.png'); 
  background-repeat: repeat;
}
}