/*
==================================================
XPathr
==================================================
Base Styles
--------------------------------------------------
file:     xpathr.css
version:  1.0
date:     26 November 2011
author:   Stephen Bau
url:      http://xpathr.com
--------------------------------------------------


--------------------------------------------------
Table of Contents
--------------------------------------------------


      BASE STYLES
      --------------------------------------------

         1  ELEMENTS
             1.1  Root Element
         2  TYPOGRAPHY
             2.1  Fonts
         3  LAYOUT
             3.1  Default Page Structure
         4  CONTENT
             4.1  Images
         5  COLORS
             5.1  Anchors
         6  BRANDING
             6.1  Logo
         7  MEDIA QUERIES


--------------------------------------------------
*/





/*
==================================================

1	 ELEMENTS

==================================================
*/

/*
--------------------------------------------------
1.1	 Root Element
-------------------------------------------------- */


/*
==================================================

2	 TYPOGRAPHY

==================================================
*/


/*
--------------------------------------------------
2.1	 Fonts
-------------------------------------------------- */
body {
	font: normal 75%/1.5em helvetica, arial, sans-serif;
	overflow-x: hidden;
}


/*
--------------------------------------------------
2.2	 Headings
-------------------------------------------------- */
h1 {font-size: 2.6em;}
h2 {font-size: 2.2em;}
h3 {font-size: 1.8em;}
h4 {font-size: 1.6em;}
h5 {font-size: 1.4em;}
h6 {font-size: 1.2em;}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	margin-bottom: .5em;
	line-height: 1.2em;
	color: #000;
}




/*
==================================================

3	 LAYOUT

==================================================
*/


/*
--------------------------------------------------
3.1	 Default Page Structure
-------------------------------------------------- */
body { 
	margin: 0; 
	padding: 0;
}


/*
--------------------------------------------------
3.2	 Page Header
-------------------------------------------------- */
#header {
	height: 36px;
}

#header h1 {
	font-size: 1.5em;
	margin: 0;
	padding: .4em 1em;
	float: left;
}

#header h1 a {
	color: #fff;
}

.help {
	float: right;
}

.help ul {
	margin: 0;
	padding: 0;
	float: right;
}

.help ul li {
	list-style: none;
	float: left;
}
.help ul li a {
	padding: 0 1em;
	height: 36px;
	line-height: 36px;
	display: block;
	color: #bbb;
}
.help ul li a:hover {
	background: #333;
	color: #fff;
}
.help ul li a:active {
	background: #000;
	color: #fff;
}
.help ul li.current a {
	background: #444;
	color: #fff;
}
.help ul li#btn-about.current a {
	background: #eee;
	color: #000;
}


/*
--------------------------------------------------
3.3	 Controls
-------------------------------------------------- */
#control {
	box-shadow: 0 1px 3px #999;
	height: 56px;
	min-width: 100%;
}

.control {
	padding: 15px;
	white-space: nowrap;
}

.actions input {
	margin-top: 3px;
}

.actions span {
	display: block;
	padding: 3px 8px;
}


/*
--------------------------------------------------
3.4	 Code
-------------------------------------------------- */
#bin {
	padding: 1px 15px 15px 15px;
}

textarea {
	width: 100%;
	box-sizing: border-box;
}

.CodeMirror {
	font-size: 1.3em;
	line-height: 1.3em;
	border: 1px solid #ccc;
	overflow: hidden;
}

.CodeMirror-scroll {
	height: auto;
}

.small-screen .result .CodeMirror,
.small-screen .xml-only .CodeMirror,
.small-screen .xslt-only .CodeMirror {
	margin-top: 126px;
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
}

.small-screen .result .CodeMirror-scroll,
.small-screen .xml-only .CodeMirror-scroll,
.small-screen .xslt-only .CodeMirror-scroll {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}


/*
--------------------------------------------------
3.5	 Help Panel
-------------------------------------------------- */
#help pre {
  padding: 10px;
  background: #eee;
  overflow-x: auto;
}

#help {
  position: absolute;
  right: -300px;
  width: 279px;
  top: 36px;
  bottom: 0;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #eee;
  padding: 10px;
  overflow: auto;
}

#help p {
  margin: 14px 0;
}

#help ol, #help ul {
  padding-left: 20px;
}

#help li {
  margin: 10px 0;  
}


#help dl.shortcuts {
	margin-bottom: 1em;
	margin-left: 26px;
}
#help dl.shortcuts * {
	margin: 0;
	line-height: 2.25;
	font-weight: normal;
}
#help .shortcuts dt {
	float: left;
	display: block;
	width: 7em;
	clear: both;
}
#help kbd {
	/* not sure if this should be more specific ie. ".shortcuts kbd" */
	background: -webkit-gradient(linear, left top, center bottom, from(#000), to(#222));
	background-color: #000;
	color: #fff;
	font-family: "VAG Rounded", sans-serif;
	font-size: 90%;
	padding: 1ex;
	letter-spacing: 0.2ex;
	text-shadow: rgba(0,255,255,0.5) 0 0 4px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: 1px 1px 0px #000;
}
#help .shortcuts.a dt {
	width: 7em;
}
#help .shortcuts.b dt {
	width: 10em;
}


/*
--------------------------------------------------
3.6	 Meta Data
-------------------------------------------------- */
#meta {
}
#meta > div {
	margin-bottom: 1em;
}
#meta #user a {
	display: block;
	overflow: hidden;
	padding: 6px;
	background: #ddd;
}
#meta #user a:hover {
	background: #ccc;
}
#meta #user img {
	width: 30px;
	float: left;
	margin-right: 10px;
	border: 2px solid #fff;
}
#meta #user span {
	display: block;
	height: 20px;
	padding: 7px;
	font-weight: bold;
	color: #000;
}
#meta h4 {
	font-size: 1.2em;
	text-transform: uppercase;
}
#help ul.menu {
	margin: 1em 0 0 0;
	padding: 0;
}
#help ul.menu li {
	list-style: none;
	margin: 0 0 2px 0;
}
.menu li a {
	display: block;
	background: #e9e9e9;
	color: #666;
	padding: .5em 1em;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.menu li a:hover {
	background: #ddd;
	color: #000;
}
.menu li.current a {
	background: #ccc;
	color: #000;
	font-weight: bold;
}


/*
--------------------------------------------------
3.7	 Errors
-------------------------------------------------- */
.error {
	padding: 7px 15px;
	margin-bottom: 18px;
	color: white;
	background-color: #c43c35;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
	background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
	background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
	background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
	background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
	background-image: linear-gradient(top, #ee5f5b, #c43c35);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-color: #c43c35 #c43c35 #882a25;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.errors {
	padding: 7px 14px;
	margin: 0 0 18px;
	background-color: #f5f5f5;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
	background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
	background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
	background-image: linear-gradient(top, #ffffff, #f5f5f5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
	border: 1px solid #ddd;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 1px 0 #ffffff;
	-moz-box-shadow: inset 0 1px 0 #ffffff;
	box-shadow: inset 0 1px 0 #ffffff;
}
.errors li {
	display: inline;
	text-shadow: 0 1px 0 #ffffff;
	font-size: 12px;
	font-family: monospace;
	word-wrap: break-word;
	margin-bottom: 6px;
}




/*
--------------------------------------------------
3.8	 Clearing
-------------------------------------------------- */

/*
http://www.positioniseverything.net/easyclearing.html
*/

#header:after,
.control:after,
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#header,
.control,
.clearfix {
	zoom: 1;
	display: block;
}




/*
==================================================

4	 CONTENT

==================================================
*/


/*
--------------------------------------------------
4.1	 Buttons
-------------------------------------------------- */
.buttons {
	float: left;
	display: block;
	margin-right: 10px;
}




/*
==================================================

5	 COLORS

==================================================
*/


/*
--------------------------------------------------
5.1	 Anchors
-------------------------------------------------- */
a {
	text-decoration: none;
}


/*
--------------------------------------------------
5.2	 Header
-------------------------------------------------- */
#header {
	background: #333; /* Old browsers */
	background: -moz-linear-gradient(top,  #333 0%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #333 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #333 0%,#000000 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #333 0%,#000000 100%); /* IE10+ */
	background: linear-gradient(top,  #333 0%,#000000 100%); /* W3C */
	color: #fff;
	font-weight: normal;
}

#header h1 a {
	color: #fff;
}
.help a {
	color: #fff;
}


/*
--------------------------------------------------
5.3	 Controls
-------------------------------------------------- */
#control {
	background: #eee; /* Old browsers */
	background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
	background: linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* W3C */
}

.control a {
	color: #232323;
	font-weight: bold;
	text-shadow: #fff 1px 1px 1px;
}

.control a:hover {
	text-shadow: #fff -1px -1px 3px;
}


/*
--------------------------------------------------
5.4	 Buttons
-------------------------------------------------- */
a.button {
	border: 1px solid #ccc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	height: 12px;
	line-height: 12px;
	padding: 6px 10px;
	display: block;
	float: left;
	text-decoration: none;
	margin: 0px 0px;
	background: #fff;
	background: rgba(255, 255, 255, 0.3);
}

a.gap {
	margin-right: 10px;
}

.button:hover {
	-moz-box-shadow: #fff 0px 0px 5px;
	-webkit-box-shadow: #fff 0px 0px 5px;
	background: rgba(0, 0, 0, 0.05);
}

.button:active, .button:focus {
	-moz-box-shadow: #C8C8C8 0px 0px 3px;
	-webkit-box-shadow: #C8C8C8 0px 0px 3px;
	border-color: #fff;
	outline: 0;
	text-shadow: none;
}

.buttons a.current,
body.show-xml a#btn-xml,
body.show-xslt a#btn-xslt,
body.show-result a#btn-result {
	background: #aaa;
	background: rgba(0, 0, 0, 0.25);
	text-shadow: none;
	border: 1px solid #ccc;
	-moz-box-shadow: #fff 0px 0px 5px;
	-webkit-box-shadow: #fff 0px 0px 5px;
	
	background-image: 
		-webkit-gradient(
			radial,
			center center,
			0,
			center center,
			50,
			color-stop(0, #BFBFBF),
			color-stop(1, #949494)
		);
	
}

.buttons a#btn-xslt.current,
body.show-xslt a#btn-xslt,
body.show-result a#btn-result {
	border-left: 0;
}

a.group {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	border-left: 0;
}

a.left {
	border-left: 1px solid #ccc;
	-moz-border-radius-topleft: 3px;
	-webkit-border-top-left-radius: 3px;
	border-top-left-radius: 3px;
	-moz-border-radius-bottomleft: 3px;
	-webkit-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

a.right {
	border-right: 1px solid #ccc;
	-moz-border-radius-topright: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	-webkit-border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}


/*
--------------------------------------------------
5.5	 Editors
-------------------------------------------------- */
.xml-only div.xml {
  width: 100%;
  left: 0%;
}

.xml-only div.xslt {
  display: none;
  left: 100%;
  width: 100%;
}

.label .show {
  display: none;
}

.xml-only .label .hide,
.xslt-only .label .hide {
  display: none;
}

.xml-only .label .show,
.xslt-only .label .show {
  display: inline;
}

.xslt-only div.xml {
  left: -50%;
  display: none;
}

.xslt-only div.xslt {
  left: 0%;
  width: 100%;
}


/*
--------------------------------------------------
5.6	 Toggle Links
-------------------------------------------------- */
.code .label {
	padding: 15px 0;
}
.code .label p {
	font-weight: bold;
	margin: 0;
}
.code .label label {
	margin-top: 10px;
}
.code .label p > span {
	float: right;
	font-weight: normal;
	color: #999;
}
.code .label p > span a {
	color: #999;
}
.code .label p > span a:hover {
	color: #000;
}




/*
==================================================

6	 BRANDING

==================================================
*/


/*
--------------------------------------------------
6.1	 Logo
-------------------------------------------------- */
.logo a {
	display: block;
	width: 102px;
	height: 24px;
	text-indent: -9999em;
	background-image: url("../img/logo.gif");
	margin-bottom: 6px;
}




/*
==================================================

7	 MEDIA QUERIES

==================================================
*/


/*
--------------------------------------------------
7.1	 Large Screens
-------------------------------------------------- */
@media screen and (min-width: 768px) {

	body {
		overflow: hidden;
	}

	.stretch {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.actions {
		float: right;
	}
	#bin {
		top: 92px;
		width: 100%;
		padding: 0;
	}
	div.xslt {
		left: 50%;
	}
	div.code {
		width: 50%;
	}
	div.result {
		width: 100%;
	}
	textarea {
		margin: 0;
		padding: 15px;
		font-family: Menlo, Monaco, consolas, monospace;
		color: black;
		margin-top: 40px;
		font-size: 12px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: transparent;
		border: 0;
		resize: none;
		outline: none;
		-webkit-appearance: none;
	}
	div.xml {
		border-right: 1px solid #ccc;
	}
	.code .label {
		padding: 15px;
		background: rgba(200, 200, 200, 0.1);
		border-bottom: 1px solid #eee;
	}
	.CodeMirror {
		margin-top: 49px;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border: 0;
	}
	.CodeMirror-scroll {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		height: auto;
	}
	.xslt .CodeMirror-scroll {
		left: 1px;
	}
	.error,
	.errors {
		margin: 0 15px 18px;
	}

}