/*	
 Copyright 2014 Adobe Systems Incorporated.  All rights reserved. 

Purpose- 
Css for vmq bars
*/

body {
    margin: 0px;
    overflow: hidden;
    position:relative; 
    width:100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/*
 * Resize handles
 */
body .egrip {
	display: none;
    cursor:default;
	float:right;
    color:#000000;
	left: 0px;
	width: 4px;
    height: 10px;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
    opacity: 1;
}

body .wgrip {
	display: none;
    cursor:default;
	float:left;
    color:#000000;
	left: 0px;
	width: 4px;
    height: 10px;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
    opacity: 1;
}

body .egrip:hover {
    opacity: 0.8;
}

body .wgrip:hover {
    opacity: 0.8;
}

/*
 * Content css
*/
body .contentrightmaxwidth {
	font-family:'source_sans_proregular' !important;
	font-size: 10px;
    font-weight:300;
	text-align: center;
    vertical-align: middle;
    color:#ffffff;
    cursor: default;
	float:right;
	left: 0px;
    padding-left:4px;
    padding-right:2px;
    -webkit-transition: background-color 0.3s ease-in;
    transition: background-color 0.3s ease-in;
    margin-top: -1px;
}

body .contentleftminmaxwidth {
	font-family:'source_sans_proregular' !important;
	font-size: 10px;
    font-weight:300;
	text-align: center;
    vertical-align: middle;
    color:#ffffff;
    cursor: default;
	float:left;
	left: 0px;
    padding-left:4px;
    padding-right:2px;
    -webkit-transition: background-color 0.3s ease-in;
    transition: background-color 0.3s ease-in;
    margin-top: -1px;
}

body .contentrightminmaxwidth {
	font-family:'source_sans_proregular' !important;
	font-size: 10px;
    font-weight:300;
	text-align: center;
    vertical-align: middle;
    color:#ffffff;
    cursor: default;
	float:right;
	left: 0px;
    padding-left:4px;
    padding-right:2px;
    -webkit-transition: background-color 0.3s ease-in;
    transition: background-color 0.3s ease-in;
    margin-top: -1px;
}

body .contentleftminwidth {
	font-family:'source_sans_proregular' !important;
	font-size: 10px;
    font-weight:300;
	text-align: center;
    vertical-align: middle;
    color:#ffffff;
    cursor: default;
	float:left;
	left: 0px;
    padding-left:4px;
    padding-right:2px;
    -webkit-transition: background-color 0.3s ease-in;
    transition: background-color 0.3s ease-in;
    margin-top: -1px;
}

/*
 * maxwidth row divs.
 */
body .maxwidth {
	background-color:#9bd239;
	float: left;
	height:12px;
	opacity:1;
    border: 1px solid #7eab2d;
    position: absolute;
    background-image: url("../images/maxarrows.png");
    background-repeat: no-repeat;
    background-position: right;
}

/*
 * max width hover state
 */
body .maxwidth:hover {
    border: 1px solid #7eab2d;
    background-color: #9bd239;
    background-image: url("../images/hover_max.svg");
    background-repeat:repeat;
    cursor:pointer;
}

body .maxwidth:hover .contentrightmaxwidth {
    display: block;
    background-color:#7eab2d;
    padding-left:4px;
    padding-right:2px;
    cursor:pointer;
}

body .maxwidth:hover .egrip {
    display: none;
}

/*
 * max width selected state
 */
body .maxwidthselected {
	background-color:#5c7f1d;
	float: left;
	height:12px;
	opacity:1;
    position: absolute;
    border: 1px solid #334a0a;
    display: block;
    background-image: url("../images/hover_max.svg");
    background-repeat:repeat;
}

body .maxwidthselected .egrip {
    display: block;
}

body .maxwidthselected .contentrightmaxwidth {
    display: block;
    background-color:#334a0a;
    padding-left:4px;
    padding-right:2px;
    
}
/*
 * minmax width row
 */
body .minmaxwidth {
    background-color:#31aed2;
    float: left;
	height:12px;
	opacity:1;
    border: 1px solid #278fad;
    position: absolute;
    background-image: url(../images/minmax_right.png), url(../images/minmax_left.png);
    background-repeat: no-repeat;
    background-position: left, right;
}


/*
 * minmax width row hover
 */

body .minmaxwidth:hover {
    border: 1px solid #278fad;
    background-color: #31aed2;
    background-image: url("../images/hover_minmax.svg");
    background-repeat:repeat;
    cursor:pointer;
}

body .minmaxwidth:hover .contentleftminmaxwidth {
    display: block;
    background-color:#278fad;
    padding-left:4px;
    padding-right:2px;
    cursor:pointer;
}

body .minmaxwidth:hover .contentrightminmaxwidth {
    display: block;
    background-color:#278fad;
    padding-left:4px;
    padding-right:2px;
    cursor:pointer;
}

body .minmaxwidth:hover .egrip {
    display: none;
}

body .minmaxwidth:hover .wgrip {
    display: none;
}

/*
 * minmax width row selected state
 */
body .minmaxwidthselected {
    background-color:#22687c;
    float: left;
	height:12px;
	opacity:1;
    position: absolute;
    border: 1px solid #103e4b;
    display: block;
    background-image: url("../images/hover_minmax.svg");
    background-repeat:repeat;
    z-index: 10;
}

body .minmaxwidthselected .egrip{
    display: block;
}

body .minmaxwidthselected .wgrip{
    display: block;
}

body .minmaxwidthselected .contentleftminmaxwidth{
    display: block;
    background-color:#103e4b;
    padding-left:4px;
    padding-right:2px;
}

body .minmaxwidthselected .contentrightminmaxwidth{
    display: block;
    background-color:#103e4b;
    padding-left:4px;
    padding-right:2px;
}

/*
 * minwidth rows
 */
body .minwidth {
    background-color:#7674c5;
	float: left;
	height:12px;
    width:100%;
	opacity:1;
    border: 1px solid #4b4982;
    position: absolute;
    background-image: url("../images/minarrows.png");
    background-repeat: no-repeat;
    background-position: left;
   
}
/*
 * minwidth row hover
 */

body .minwidth:hover {
    border: 1px solid #103e4b;
    background-color: #7674c5;
    background-image: url("../images/hover_min.svg");
    background-repeat:repeat;
    cursor:pointer;
 
}

body .minwidth:hover .contentleftminwidth {
    display: block;
    background-color:#4b4982;
    padding-left:4px;
    padding-right:2px;
    cursor:pointer;

}

body .minwidth:hover .wgrip {
    display: none;
}

/*
 * minwidth rows selected state
 */
body .minwidthselected {
	background-color:#656498;
    background-image: url("../images/hover_min.svg");
    background-repeat:repeat;
	float: left;
	height:12px;
    width:100%;
	opacity:1;
    border: 1px solid #272645;
    position: absolute;
   
    
    
}

body .minwidthselected .wgrip{
    display: block;
}

body .minwidthselected .contentleftminwidth{
    display: block;
    background-color:#272645;
    padding-left:4px;
    padding-right:2px;
   
}


/*
 * CSS corresponding to the three rows which will house the visual mqs.
*/
body .vmqrows {
    background-color: #EDEDED;
	border: 1px solid;
    border-radius: 1px;
	border-color: #DDDDDD;
	height:14px;
}

body .maxwidthrow {
	left: 0px;
}


body .rangerow {
	
}

body .minwidthrow {
	border-bottom-color:black;
    border-bottom-style: solid;
}

/*
 * Placeholder text which will be displayed when there are no MQs
 */
#nomqdiv {
    border-bottom: 1px solid;
	border-bottom-color: #000000;
	height:48px;
    background-color: #EDEDED; 
    display:none;
    vertical-align:middle;
    text-decoration: none;
}

#nomqtext {
    font-family: Tahoma, sans-serif;
	font-size: 11px;
    line-height: 45px;
    letter-spacing:0.5;

}

/*
 * Guide related css
*/
#mqguide {
    height: 65px;
    z-index: 12;
}

div.vertical-line{
  margin-left: 0px;
  width: 1px; /* Line width */
  background-color: black; /* Line color */
  float: left; 
  position: fixed;
}

#plusButton {
    position: fixed;
    width: 22px;
    height: 18px;
    z-index: 14;
    top: 47px;
    background-image: url(../images/plus_mq.svg);
	background-repeat: no-repeat;
    display: none;
    cursor:pointer;
}


.mqAddGuide {
	width: 100%;
    height: 16px;
    z-index: 14;
    position: absolute;
    font-family:'source_sans_proregular' !important;
	font-size: 11px;
    display: none;
    opacity: 1; 
    color:#ffffff;
}

.mqAddGuide:hover {
    cursor: pointer;
    width: 100%;
}

#maxMqAddGuide {
    color: #435B12;
    text-align: right;
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0) 55%,#9bd239 100%);
	background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0) 55%,#9bd239 100%);
	background-image: -o-linear-gradient(0deg,rgba(255,255,255,0) 55%,#9bd239 100%);
	background-image: linear-gradient(90deg,rgba(255,255,255,0) 55%,#9bd239 100%);
    transition: all 0.5s ease-in-out;
}

#maxMqAddGuide:hover {
    color: #ffffff;
    background-color: #9bd239;
}

#minMqAddGuide {
    color: #2A1845;
    text-align: left;
    background-image: -webkit-linear-gradient(90deg,#7674c5 0%,rgba(255,255,255,0) 55%);
	background-image: -moz-linear-gradient(0deg,#7674c5 0%,rgba(255,255,255,0) 55%);
	background-image: -o-linear-gradient(0deg,#7674c5 0%,rgba(255,255,255,0) 55%);
	background-image: linear-gradient(90deg,#7674c5 0%,rgba(255,255,255,0) 55%);
    transition: all 0.5s ease-in-out;
}

#minMqAddGuide:hover {
    color: #ffffff;
    background-color: #7674c5;
}

.spanAddGuide {
    height: 100%;
    display: inline-block;
    vertical-align: bottom;
    padding-top: 2px;
    line-height: normal;
}

#spanMaxMqAddGuide {
    padding-right: 10px;
}

#spanMinMqAddGuide {
    padding-left: 10px;
}

@font-face {
  font-family: 'source_sans_proregular';
  src: url('../../Fonts/sourcesanspro-regular-webfont.eot');
  src: url('../../Fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../../Fonts/sourcesanspro-regular-webfont.woff') format('woff'),
       url('../../Fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
       url('../../Fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
  font-weight: normal;
  font-style: normal;

}