span.toolbarSeperator {
	width: 0;
	height: 26px;
	border-left: 1px solid black;
	border-right: 1px solid black;

	margin-right: 4px;
	
	display: inline-block;
	
	vertical-align: top;
}

body {
	font-family: arial, sans-serif;
	font-size: 13px;
	overflow: hidden;
	background-color: rgb(245,245,245);
}

.errorText {
	color: red;
	font-weight: bold;
}

.informationText {
	color: blue;
	font-weight: bold;
}

.hand {
	cursor: pointer;
}

.invalidBackgroundColor {
	background-color: rgb(255, 128, 128);
}

/*
 * Begin topRightToolbar
 */

.documentToolBarRight img {
	padding-left: 5px;
}

/*
 * Top toolbar
 */
.topToolbarUnselected img {
	display: inline-block;
	border: 0;
	padding: 2px;
	margin: 0;
	
}

.topToolbarUnselected img:hover, .topToolbarUnselected_hover img {
	border: 1px solid rgb(192,192,192);
	padding: 1px;
	background-color: white;
	box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}

.topToolbarUnselected img:active {
	border: 1px solid rgb(128,128,128);
	background-color: rgb(224,224,224);
}

.topToolbarUnselected_active img {
	display: inline-block;
	margin: 0;
	border: 1px solid rgb(128,128,128);
	padding: 1px;
	background-color: rgb(224,224,224);
	box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}

.topToolbarSelected img {
	display: inline-block;
	border: 1px solid black;
	padding: 1px;
	margin: 0;
	background-color: white;
}

.topToolbarSelected img:hover, .topToolbarSelected_hover img {
	box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}

.topToolbarSelected img:active, .topToolbarSelected_active img {
	background-color: rgb(224,224,224);
}

#tickUntilStopTextBox {
	width: 38px;
	height: 22px;
	border: 1px solid rgb(192,192,192);
	vertical-align: top;
	display: inline-block;
	margin: 0;
	margin-right: 2px;
}

.topToolbarText {
	vertical-align: top;
	line-height:  24px;
	margin-right: 2px;
}


/*
 * Modal, prompt specific:
 */
.guiFullModal.prompt {
	height: 150px;
	top: 50%;
	margin-top: -75px;
	
	width: 500px;
	left: 50%;
	margin-left: -250px;
}

/*
 * Modal, panel specific:
 */

.guiFullModal.panel {
	top: 100px;
	bottom: 100px;

	width: 600px;
	left: 50%;
	margin-left: -300px;
}

/*
 * Modal, common styles:
 */
#modalBackground {
	z-index: 99;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: black;
	opacity: 0.4;
}

.guiFullModal {
	z-index: 100;
	position: absolute;
	
	padding: 2px;
	
	border: 1px solid rgb(192,192,192);
	background-color: rgb(245,245,245);

	box-shadow: 5px 5px 4px rgba(0,0,0,.2);
}

.guiModal_innerContent {
	position: absolute;
	overflow-y: auto;
	padding: 10px;
	top: 5px;
	bottom: 38px;
	left: 5px;
	right: 5px;
	background-color: white;
	border: 1px solid rgb(192,192,192);
}

.guiModal_Buttons {
	position: absolute;
	margin: 0;
	right: 5px;
	bottom: 5px;
}

.guiModal_Feedback {
	position: absolute;
	padding-bottom: 6px;
	margin: 0;
	left: 5px;
	bottom: 5px;
}

.button {
	display: inline-block;
	border-radius: 5px;
	border: 1px solid rgb(192,192,192);
	background-color: white;
	padding: 5px;
	font-weight: bold;
	cursor: pointer;
	margin-left: 5px;
	width: 90px;
	text-align: center;

	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	-ms-user-select: none;
}

.button.disabled {
	color: rgb(128,128,128);
	cursor: default;
}

.button:hover {
	box-shadow: inset 0 0 5px rgb(192,192,192);
}

/*
 * Begin icon selection within modal
 */
#liveSearch {
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
}

.liveSearchWrapper {
	display: block;
	position: absolute;
	border-width: 5px 5px 5px 5px;
	border-color: rgb(192,192,192);
	border-style: solid;
	padding: 5px;
	top: 0;
	left: 0;
	right: 0;
}

.iconSelectionBox {
	display: block;
	position: absolute;
	overflow-y: scroll;
	top: 37px;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 5px;
	
}

/*
 * Begin input modal, makes a div covering everything, to ensure it catches any clicks or other key inputs
 */
#inputSelectOverlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 250;
	opacity: 0;
}

.keyBindings {
	width: 100%;
}

.button.shortcut1, .button.shortcut2 {
	width: 150px;
	margin-left: 10px;
	text-align: center;
}

.col2, .col3 {
	width: 160px;
}

/*
 * Begin header bar
 */
#header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;
}

#header .documentToolBarLeft {
	position: absolute;
	bottom: 5px;
	left: 5px;
}

#header .documentToolBarRight {
	position: absolute;
	bottom: 5px;
	right: 5px;
}

#header .userManager {
	padding: 3px;
	background-color: white;
	border: 1px solid rgb(192,192,192);
}

#header .userManager:hover {
	box-shadow: 2px 2px 2px rgba(0,0,0,.2);
	cursor: pointer;
}

#header .userManager:active {
	background-color: rgb(224,224,224);
}

#headerTopRight {
	position: absolute;
	top: 0px;
	right: 5px;
}

#header .title {
	position: absolute;
	font-weight: bold;
	top: 5px;
	left: 5px;
}

#unsupportedByBrowser {
	position: absolute;
	top: 45px;
	left: 5px;
}

/*
 * feedbackAndComments
 */

#feedbackAndComments {
	margin-right: 5px;
	padding: 3px;
	background-color: white;
	border: 1px solid rgb(192,192,192);

	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	-ms-user-select: none;
}


#feedbackAndComments:hover {
	box-shadow: 2px 2px 2px rgba(0,0,0,.2);
	cursor: pointer;
}

#feedbackAndComments:active {
	background-color: rgb(224,224,224);
}

/*
 * Social buttons
 */

#socialButtons .twitterButton {
	position: relative;
	top: 5px;
	right: 10px;
}

#socialButtons .facebookButton {
	position: relative;
	top: 2px;
	right: 10px;
}

#socialButtons .redditButton {
	position: relative;
	top: 8px;
	right: 35px;
}

/*
 * Begin user manager dropdown
 */
.userManagerDropdown {
	z-index: 10;
	position: absolute;
	top: 28px;
	right: 5px;
	padding: 5px;
	background-color: white;
	border: 1px solid rgb(192,192,192);
}

/*
 * Left toolbar
 */
#toolbars {
	position: absolute;
	line-height: 0px;
	padding: 0;
	width: 48px;
	margin: 0;
	border: 0;
	
	left: 2px;
	top: 65px;
	bottom: 0;
}

#toolbars.onIconChange {
	z-index: 100;
}

.toolbar {
	display: inline-block;
	width: 48px;
}

.unselected img, .unselected span, .selected img, .selected span {
	margin: 0 0 2px 0;
} 

.unselected img, .unselected span {
	display: inline-block;
	border: 0;
	padding: 3px;
}

.unselected img:hover, .unselected span:hover {
	border: 1px solid rgb(128,128,128);
	padding: 2px;
	box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}

.unselected img:active, .unselected span:active, .selected img:active, .selected span:active {
	background-color: rgb(224,224,224);
}

.selected img, .selected span {
	display: inline-block;
	border: 1px solid black;
	padding: 2px;
	background-color: white;
}

.selected img:hover, .selected span:hover {
	box-shadow: 2px 2px 2px rgba(0,0,0,.2);
}

.onIconChange img, .onIconChange .emptySlot {
	background-color: rgb(245,245,245);
	padding: 2px;
	border: 1px solid #808080;
}


.toolbarSlot-droppable-active span.emptySlot {
	display: inline-block;
	border: 1px solid rgb(192,192,192);
	padding: 2px;
	background-color: white;
	box-shadow: inset 0 0 10px #000000;
}

.toolbarSlot-droppable-hover .unselected {
	display: inline-block;
	border: 1px solid rgb(192,192,192);
	padding: 2px;
	background-color: white;
}

.emptySlot {
	display: inline-block;
}

.toolbarSlot {
	display: inline-block;
	line-height: 0px;
}

/*
 * Sidebar
 */

#sidebar {
	position: absolute;
	right: 0;
	top: 65px;
	bottom: 0;
}

#sidebarInner {
	position: absolute;
	top: 0;
	left: 0;
	right: 2px;
	bottom: 2px;
	border: 1px solid rgb(192,192,192);
	background-color: white;
}

#sidebarContent {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: 5px;
}

/*
 * Where all the canvases go
 */
#workarea {
	position: absolute;
	top: 65px;
	left: 50px;
	bottom: 0;
	right: 0;
}

#workarea canvas {
	position: absolute;
	top: 50px;
	left: 0;
}

#workarea canvas.modelView {
	z-index: 0;
}

#workarea canvas.overlay {
	z-index: 1;
}

#workarea .controls {
	position: fixed;
	z-index: 3;
	padding: 5px;
	font-weight: bold;
}

#workarea .controls img {
	margin-left: 5px;
	cursor: pointer;
}

#workarea .controls img:hover {
	background-color: rgb(245,245,245);
}

#workarea .controls img:active {
	background-color: rgb(224,224,224);
}

#workarea .controls .coords {
	display: inline-block;
	width: 35px;
}

#workarea .controls .direction {
	padding-right: 5px; 
}

#workarea .controls span.status,
#workarea .controls img
{
	padding: 2px;
	background-color: white;
	border: 1px solid rgb(192,192,192);
	box-shadow: 3px 3px 2px rgba(0,0,0,.2);
}

#workarea .controls span.status {
	display: inline-block;
	vertical-align: top;
	padding-top: 5px; 
	padding-left: 5px; 
	height: 19px;
}

#workarea .scrollable {
	position: absolute;
	overflow: auto;
	background-color: white;
	border: 1px solid silver;
	top: 0;
	left: 0;
	right: 2px;
	bottom: 2px;
}

#workarea .innerDiv {
	position: absolute;
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
}

/*
 * Canvas placement
 */

#workarea .modelViewTopRight {
	position: absolute;
	top: 0;
	right: 0;
}

#workarea .modelViewTopLeft {
	position: absolute;
	top: 0;
	left: 0;
}

#workarea .modelViewBottomRight {
	position: absolute;
	bottom: 0;
	right: 0;
}

#workarea .modelViewBottomLeft {
	position: absolute;
	bottom: 0;
	left: 0;
}

/*
 * Tooltip:
 */

#tooltip {
	position: absolute;
	border: 1px solid silver;
	padding: 10px;
	width: 180px;
	z-index: 9001;
	box-shadow: 3px 3px 2px rgba(0,0,0,.2);
	background-color: white;
	overflow: hidden;
}

/*
 * options
 * 
 * contained all within a table with the class name of "optionsTable"
 */

.optionError {
	background-color: rgb(255,127,127);
}

.optionsTable {
	width: 100%
}


.optionsTable .col2 {
	width: 150px;
}

.optionsTable .col3 {
	width: 63px;
}

.optionsTable .numberInput {
	width: 50px;
}

.optionsTable .plusButton,
.optionsTable .minusButton {
	width: 10px;
	text-align: center;
}

/*
 * Document resize
 */

.documentResize td {
	text-align: center;
}
.documentResize .plusButton,
.documentResize .minusButton {
	width: 10px;
	line-height: 10px;
	margin: 5px;
	text-align: center;
}

.documentResize .readonly {
	background-color: #EBEBE4;
	border: 1px solid rgb(171, 173, 179);
	display: inline-block;
	padding: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
	width: 30px;
}

.documentResize .invalidBackgroundColor {
	background-color: rgb(255, 128, 128);
}

.documentResize table {
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
}

.documentResize input {
	width: 30px;
	border-width: 1px;
	margin: 5px;
	text-align: center;
}

.documentResize .topBlack {
	border-top: 2px solid black;
}

.documentResize .leftBlack {
	border-left: 2px solid black;
}

.documentResize .bottomBlack {
	border-bottom: 2px solid black;
}

.documentResize .rightBlack {
	border-right: 2px solid black;
}

.documentResize .topGray {
	border-top: 1px solid gray;
}

.documentResize .leftGray {
	border-left: 1px solid gray;
}

.documentResize .bottomGray {
	border-bottom: 1px solid gray;
}

.documentResize .rightGray {
	border-right: 1px solid gray;
}

.documentResize .topDashedGray {
	border-top: 1px dashed gray;
}

.documentResize .leftDashedGray {
	border-left: 1px dashed gray;
}

.documentResize .bottomDashedGray {
	border-bottom: 1px dashed gray;
}

.documentResize .rightDashedGray {
	border-right: 1px dashed gray;
}


/*
 * New document modal:
 */
.documentNew input.text,
.documentNew textarea {
	width: 565px;	
}

.documentNew input.number {
	width: 100px;
}

.documentNew textarea {
	height: 200px;	
}


/*
 * Sign in form:
 */

div.signIn {
	border: 2px solid;
	padding: 10px;
}

div.signIn_selected {
	border-color: black;
}

div.signIn_unselected {
	border-color: transparent;
}

.signIn input {
	width: 50%;
}

/*
 * Standard Styles
 */
.standardForm .readonly,
.standardForm input,
.standardForm textarea {
	width: 90%;
}

.standardForm .readonly_short {
	width: 100px;
}

.standardForm .readonly,
.standardForm .readonly_short {
	background-color: #EBEBE4;
	border: 1px solid rgb(171, 173, 179);
	display: inline-block;
	padding: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
}

.standardForm textarea {
	height: 200px;
}

/*
 * SignHelper
 */

#signHelper {
	text-align: center;
}

#signHelper input {
	font-size: 20px;
	text-align: center;
	font-family: courier;
	font-weight: bold;
}
