/**
 * Master stylesheet for the admin tool
 *
 * @author Total Onion
 *
 * Table of contents
 *
 * 1.0	- Reset
 * 2.0	- Shared
 * 3.0	- Clipboard
 * 4.0	- Branch
 * 5.0	- Node
 * 6.0	- Search
 */

/**
 * 1.0	- Reset
 * ----------------------------------------------------------------------------
 */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/**
 * 2.0	- Shared styles
 * ----------------------------------------------------------------------------
 */
html, body {
	width: 100%;
	height: 100%;

	font-family: Verdana, Arial, san-serif;
	font-size: 12px;
	line-height: 120%;
	color: #555;
}

a { color: #555; text-decoration: none; }
p { margin-bottom: 1.2em; }
strong { font-weight: 700; }
em { font-style: italic; }

/* common shared styles */
.hidden { display: none; }
.clear { clear: both; }
.align-right { text-align: right; }

/* Standard form stuff */
label {
	width: 100px;
	display: inline-block;
}

input {
	border: 1px solid #DDD;
	padding: 4px;
	width: 100%;
	margin-bottom: 4px;
}

input[type=submit] {
	border: 1px solid #000;
	width: auto;
	padding: 5px 20px;
	display: block;
	margin-left: auto;
}

footer {
	text-align: right;
	margin-top: 1.5em;
}

button {
	padding: 5px 10px;
	color: #333;
	background-color: #fff;
	border: 2px solid #CCC;
}
button.primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; }
button.danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; }

button:hover { color:#333;background-color:#e6e6e6;border-color:#adadad }
button.primary:hover { color:#fff;background-color:#286090;border-color:#204d74 }
button.danger:hover { color:#fff;background-color:#c9302c;border-color:#ac2925 }

button:disabled {
	opacity: 0.8;
	cursor: not-allowed;
}

#version {
	position: absolute;
	bottom: 5px;
	left: 5px;
}


/* header */
#container_header h1 {
	width: 136px;
	height: 118px;
	display: block;
	text-indent: -9999px;
	background: transparent url('/images/logo_ibe.jpg') no-repeat 0 0;
	margin-top: 10px;
}
.homepage #container_header { display: none; }

/* dialogue box */
.dialogue_container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 5000;
	background-color: rgba(255,255,255,0.5);
}

.dialogue {
	position: relative;
	margin: 5% auto 10% auto;
	width: 300px;
	padding: 20px;
	border: 1px solid #DDD;
	background-color: #FFF;
	-webkit-box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, 0.3);
    box-shadow:  0px 0px 15px 0px rgba(0, 0, 0, 0.3);
}

#masterContainer {
	position: relative;
	z-index: 1;
	overflow: hidden;
	width: 15000px;
	margin-top: 30px;
}

#scratch { display: none; }

/* item is syncing, this hides input */
.syncing {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5) url('/images/loading.gif') no-repeat center center;
}


/* footer */
#container_footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	margin: 15px 0 15px 0;
	background-color: rgba(255,255,255,0.5);
	font-size: 0.8em;
}

#modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255,255,255,0.5);
	z-index: 100;
}

#modal nav { text-align: right; }

#modal #modalInner {
	position: relative;
	width: 600px;
	min-height: 350px;
	margin: 10% auto;
	padding: 15px;
	background-color: #FFF;
	border: 1px solid #999;
	box-shadow: 0 0 5px #888888;
}

#modal .minimise { display: none; }
#modal.maximised .minimise { display: inline-block; }
#modal.maximised .maximise { display: none; }

#modal.maximised #modalInner {
	width: calc(100% - 60px);
	height: calc(100% - 60px);
	margin: 15px;
}

#modal table { width: 100%; margin-top: 1em; }
#modal td { padding: 4px 8px; }

#modalContents { 
	position: absolute;
	top: 35px;
	right: 15px;
	bottom: 15px;
	left: 15px;
}

#modalContents > div { 
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#modalContents h1 {
	font-size: 1.5em;
	margin-bottom: 1em;
}

#modalContents #responseMessage p {
	margin-top: 1em;
  font-size: 1.2em;
}

#modalContents th {
	font-weight: 700;
	text-align: left;
}

#modalContents footer { 
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: right;
}

#modalContents footer button { 
	display: inline-block;
}

#modalContents footer .delete { 
	float: left;
}

#resultsContainer {
	vertical-align: top;
}

/* Nav elements shared between branches and nodes */
.li_nav { 
	position: absolute; 
	top: 0;
	left: 0;
	height: 100%;
	border-right: 1px solid #DDD;
	padding: 0 6px;
	cursor: move;
}

.li_nav .grabber { 
	position: relative;
	display: block;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/**
 * 3.0	- Clipboard
 * ----------------------------------------------------------------------------
 */
#clipboard { display: none; }
.homepage #clipboard {
	position: relative;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	border-bottom: 1px solid #999;
	background-color: #FFF;
	-webkit-box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    box-shadow:  0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

.clipboard-inner { display: none; }

#clipboard nav {
	border-bottom: 1px solid #999;
}

#clipboard nav a {
	display: inline-block;
	padding: 10px;
	border-right: 1px solid #999;
}
#clipboard nav a:hover { background-color: #EEE; }

#logout {
	float: right;
}

#clipboard .clipboard_area {
	position: relative;
	border-left: 1px solid #999;
	float: left;
	width: calc(50% - 1px);
	height: auto;
	padding-bottom: 1em;
}
#clipboard .clipboard_area:first-child {
	width: 50%;
	border-left: none;
}

#clipboard .clipboard_area h2 {
	padding: 4px 0 4px 10px;
	border-bottom: 1px solid #999;
	background-color: #EEE;
	font-weight: bold;
}

#clipboard .node {
	display: inline-block;
	border: 1px solid #999;
	margin-left: -1px;
	background-color: #EEE;
}

/**
 * 4.0	- Branch
 * ----------------------------------------------------------------------------
 */
.branch {
	position: relative;
	vertical-align: top;
	display: inline-block;
	width: auto;
	max-width: 400px;
	border: 1px solid #999;
	margin-left: -1px;
}
.branch header { position: relative; }
.branch header h1 {
	padding: 15px 15px 15px 30px;
	background-color: #EEE;
	cursor: context-menu;
}

.branch > footer {
	position: absolute;
	right: 2px;
	top: 2px;
	font-size: 8px;
}

#editor {
	position: absolute;
	top: 40px;
	right: 0;
	bottom: 40px;
	left: 0;
	height: auto;
	border: 1px solid #999;
}

#editor p,
#editor h1,
#editor h2,
#editor h3,
#editor h4 {
	margin-bottom: 1.2em;
}


/**
 * 5.0	- Node
 * ----------------------------------------------------------------------------
 */
.node {
	position: relative;
	padding: 15px 45px 15px 30px;
	border-top: 1px solid #999;
	background-color: #FFF;
	width: auto;
	min-width: 200px;
}
.node:hover { background-color: #E9E9E9; }

.node.ui-sortable-helper {
	border: 1px solid #999;
	background-color: #EEE;
	z-index: 100;
	-webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.5);
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.node .next {
	position: absolute;
	top: 10px;
	right: 15px;
	font-weight: bold;
	font-size: 20px;
	cursor: pointer;
}

.node div.editableText_editable { 
	display: block;
	min-height: 2px;
	margin: 10px 0 0 0;
	border: 1px solid #999;
	cursor: pointer;
}

.node.selected {
	background: transparent no-repeat top right url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAMAAAAMCGV4AAAAM1BMVEXZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0+MOzPZAAAAEHRSTlMAeXuBgoOEhoiVnOXw8vb6tuRBPgAAAD9JREFUeNpdyEECgCAMxMAoKKBW+v/XemNbc5uw+WvqhuExoAQaQP2ZI1pD5lzWkDVkmqxh5PEQ6z5JXU5u/wAM+gafgjLPBQAAAABJRU5ErkJggg==);
}

.node footer {
	position: absolute;
	left: 2px;
	bottom: 2px;
	font-size: 8px;
}

.node .nodeText { 
	min-height: 1em; 
	cursor: context-menu;
}

.nodeText h3 {
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 1em;
}
.nodeText strong, .nodeText b { font-weight: bold; }
.nodeText em, .nodeText i { font-style: italic; }
.nodeText ul { list-style: disc; padding-left: 30px; }
.nodeText ol { list-style: decimal; padding-left: 30px; }

/**
 * 6.0	- Search
 * ----------------------------------------------------------------------------
 */
#searchResults {
	position: absolute;
	top: 100px;
	right: 0;
	bottom: 40px;
	left: 0;
	overflow-y: scroll;
}

#searchResults .row {
	border-top: 1px solid #999;
}

#searchResults .route {
	overflow-x: auto;
	background-color: #EEE;
}

#searchResults .route td {
	padding-right: 15px;
}

#searchResults th {
	padding-top: 10px;
}

#searchResults .pb {
	font-weight: bold;
	display: block;
}

#searchResults .preview {
	line-height: 1.4;
	padding-bottom: 10px;
}

#searchResults .highlight {
	background-color: #AAA;
	padding: 2px 4px;
	color: #FFF;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}