/*******************************************************************************
 * Copyright (c) 2012-2013 University of Stuttgart.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * and the Apache License 2.0 which both accompany this distribution,
 * and are available at http://www.eclipse.org/legal/epl-v10.html
 * and http://www.apache.org/licenses/LICENSE-2.0
 *
 * Contributors:
 *    Uwe Breitenbücher - initial implementation
 *    Oliver Kopp - improvements
 *******************************************************************************/

/* override jquery redmond theme */

.hidden {
	display: none;
}

.ui-widget {
	font-size: 11px;
}

body {
	width: 1000px;
	background: #eaeaea;
}

#header {
	width: 100%;
	height: 87px;
	background: url('../images/header_background.png');
	background-repeat: no-repeat;
}

#showabout {
	float: right
}

#header > div#buttonContainer {

	height: 30px;
	top: 40px;
	position: relative;
}

#header > div#buttonContainer > a {
	height: 30px;
	float: left;
	display: block;
	margin-left: 30px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 10px 10px 0px 0px;
	line-height: 27px;
	text-decoration: none;
	font-family: arial;
	color: #787878;
	font-size: 14px;
	text-shadow: 1px 1px 0px white;
}

#header > span {
	position: relative;
	top: 42px;
	left: 10px;
}

#headerelements {
	position: relative;
	bottom: 0px;
}

#tabs {
	box-shadow: 3px 3px 9px #888888;
	min-height: 350px;
}

#mainContainer {
	border-left: 1px solid #AEAEAE;
	position: absolute;
	left: 50%;
	margin: 10px 0 0 -500px;
	padding-bottom: 15px;
	border-radius: 0px 0px 18px 18px;
	border-bottom: 1px solid #AEAEAE;
	border-right: 1px solid #AEAEAE;
	box-shadow: 3px 3px 9px #888888;
	background: white;
	width: 1000px;
}

/* bootstrap removes scrollbar making the content moving. Undo that effect:
	15 / 2 = 7.5. We choose 8. 500+8=508 */
body.modal-open > #mainContainer.overflown {
	margin: 10px 0 0 -508px;
}

/* resulting in the same alignment if a scrollbar is shown or not (two browser tabs with different tabs) */
#mainContainer.notoverflown {
	margin: 10px 0 0 -508px;
}


#mainContent {
	padding-left: 5px;
	min-height: 350px;
}

#naming {
	margin-bottom: 15px;
}

#namespacesListContainer {
	width: 300px;
	float: left;
}

.listheading {
	margin: 0px 0px 15px 0px;
}

.listcontent {
	width: 100%;
}

#buttonList {
	width: 140px;
}

#buttonList > a {
	width: 85px;
	float: left;
	margin-top: 10px;
}

.rightbutton {
	float: right;
	margin: 0 0 2px 2px;
}

.label {
	font-family: sans-serif;
}

a.squareButton {
	border: 1px solid #aeaeae;
	background: #eaeaea;
	height: 20px;
	width: 20px;
	text-align: center;
	text-decoration: none;
	line-height: 20px;
	margin-left: 4px;
	float: left;
}

a.button {
	border: 1px solid #aeaeae;
	background: #eaeaea;
	height: 20px;
	padding-left: 4px;
	padding-right: 4px;
	text-align: center;
	text-decoration: none;
	line-height: 20px;
	margin-left: 4px;
	float: left;
}

table tr.even.row_selected td {
	background-color: #B0BED9;
}

table tr.odd.row_selected td {
	background-color: #9FAFD1;
}

table tr.even.row_selected td.sorting_1 {
	background-color: #B0BED9;
}

table tr.odd.row_selected td.sorting_1 {
	background-color: #9FAFD1;
}


div#mainMenuContainer {
	height: 28px;
	position: relative;
	top: 38px;
}

/* jquery file upload styling */
.fileupload-buttonbar .ui-progressbar-value {
	background: url(../images/jquery-fileupload/progressbar.gif);
}
.fileupload-loading {
	background: url(../images/jquery-fileupload/loading.gif) center no-repeat;
}


/* tabs */

a.styledTabMenuButton {
	margin-bottom: 3px;
	float: left;
}

a.styledTabMenuButton > div {
	height: 28px;
	float: left;
}

a.styledTabMenuButton > div.left {
	width: 19px;
}

a.styledTabMenuButton > div.center {
	line-height: 29px;
	text-decoration: none;
	font-family: arial;
	color: #787878;
	font-size: 14px;
	text-shadow: 1px 1px 0px white;
	padding-left: 5px;
}

a.styledTabMenuButton > div.right {
	width: 29px;
}

a.styledTabMenuButton.selected > div.left, a.styledTabMenuButton:hover > div.left {
	background: url('../images/styledTabMenuButtonLeft.jpg');
	width: 19px;
}

a.styledTabMenuButton.selected > div.center, a.styledTabMenuButton:hover > div.center {
	background: url('../images/styledTabMenuButtonCenter.jpg');
}

a.styledTabMenuButton.selected > div.right, a.styledTabMenuButton:hover > div.right {
	background: url('../images/styledTabMenuButtonRight.jpg');
	width: 29px;
}

/* main containers */

div.mainContentContainer, div.mainContentContainer > div {
	float: left;
	width: 989px;
}
div.mainContentContainer > div.top {
	height: 150px;
}

div.mainContentContainer > div.top.twolines {
	height: 179px;
}

div.mainContentContainer > div.middle {
	width: 987px;
	min-height: 350px;
	padding: 0px 35px 0px 35px;
	font-family: arial, verdana;
	font-size: 12px;
	line-height: 19px;
	color: #494949;
}
div.mainContentContainer > div.bottom {
	height: 40px;
}

div.mainContentContainer.serviceTemplate > div.top {
	background: url('../images/containers/st/FrameTop.jpg');
}
div.mainContentContainer.serviceTemplate > div.middle {
	background: url('../images/containers/st/FrameMiddle.jpg');
}
div.mainContentContainer.serviceTemplate > div.bottom {
	background: url('../images/containers/st/FrameBottom.jpg');
}

div.mainContentContainer.relationshipType > div.top {
	background: url('../images/containers/rt/FrameTopLarge.jpg');
}
div.mainContentContainer.relationshipType > div.middle {
	background: url('../images/containers/rt/FrameMiddle.jpg');
}
div.mainContentContainer.relationshipType > div.bottom {
	background: url('../images/containers/rt/FrameBottom.jpg');
}

div.mainContentContainer.nodeType > div.top {
	background: url('../images/containers/nt/FrameTopLarge.jpg');
}
div.mainContentContainer.nodeType > div.middle {
	background: url('../images/containers/nt/FrameMiddle.jpg');
}
div.mainContentContainer.nodeType > div.bottom {
	background: url('../images/containers/nt/FrameBottom.jpg');
}

div.mainContentContainer.admin > div.top {
	background: url('../images/containers/admin/FrameTop.jpg');
}
div.mainContentContainer.admin > div.middle {
	background: url('../images/containers/admin/FrameMiddle.jpg');
}
div.mainContentContainer.admin > div.bottom {
	background: url('../images/containers/admin/FrameBottom.jpg');
}


/* quick hack for new types: just use the administration */

div.mainContentContainer.artifactTemplate > div.top {
	background: url('../images/containers/admin/FrameTop.jpg');
}
div.mainContentContainer.artifactTemplate > div.middle {
	background: url('../images/containers/admin/FrameMiddle.jpg');
}
div.mainContentContainer.artifactTemplate > div.bottom {
	background: url('../images/containers/admin/FrameBottom.jpg');
}

div.mainContentContainer.artifactType > div.top {
	background: url('../images/containers/admin/FrameTop.jpg');
}
div.mainContentContainer.artifactType > div.middle {
	background: url('../images/containers/admin/FrameMiddle.jpg');
}
div.mainContentContainer.artifactType > div.bottom {
	background: url('../images/containers/admin/FrameBottom.jpg');
}

div.mainContentContainer.nodeTypeImplementation > div.top {
	background: url('../images/containers/admin/FrameTop.jpg');
}
div.mainContentContainer.nodeTypeImplementation > div.middle {
	background: url('../images/containers/admin/FrameMiddle.jpg');
}
div.mainContentContainer.nodeTypeImplementation > div.bottom {
	background: url('../images/containers/admin/FrameBottom.jpg');
}

div.mainContentContainer.relationshipTypeImplementation > div.top {
	background: url('../images/containers/admin/FrameTop.jpg');
}
div.mainContentContainer.relationshipTypeImplementation > div.middle {
	background: url('../images/containers/admin/FrameMiddle.jpg');
}
div.mainContentContainer.relationshipTypeImplementation > div.bottom {
	background: url('../images/containers/admin/FrameBottom.jpg');
}

div.mainContentContainer.requirementType > div.top {
	background: url('../images/containers/admin/FrameTop.jpg');
}
div.mainContentContainer.requirementType > div.middle {
	background: url('../images/containers/admin/FrameMiddle.jpg');
}
div.mainContentContainer.requirementType > div.bottom {
	background: url('../images/containers/admin/FrameBottom.jpg');
}

div.mainContentContainer.capabilityType > div.top {
	background: url('../images/containers/admin/FrameTop.jpg');
}
div.mainContentContainer.capabilityType > div.middle {
	background: url('../images/containers/admin/FrameMiddle.jpg');
}
div.mainContentContainer.capabilityType > div.bottom {
	background: url('../images/containers/admin/FrameBottom.jpg');
}

div.mainContentContainer.policyTemplate > div.top {
	background: url('../images/containers/admin/FrameTop.jpg');
}
div.mainContentContainer.policyTemplate > div.middle {
	background: url('../images/containers/admin/FrameMiddle.jpg');
}
div.mainContentContainer.policyTemplate > div.bottom {
	background: url('../images/containers/admin/FrameBottom.jpg');
}

div.mainContentContainer.policyType > div.top {
	background: url('../images/containers/admin/FrameTop.jpg');
}
div.mainContentContainer.policyType > div.middle {
	background: url('../images/containers/admin/FrameMiddle.jpg');
}
div.mainContentContainer.policyType > div.bottom {
	background: url('../images/containers/admin/FrameBottom.jpg');
}

div.mainContentContainer.xsdimport > div.top {
	background: url('../images/containers/admin/FrameTop.jpg');
}
div.mainContentContainer.xsdimport > div.middle {
	background: url('../images/containers/admin/FrameMiddle.jpg');
}
div.mainContentContainer.xsdimport > div.bottom {
	background: url('../images/containers/admin/FrameBottom.jpg');
}




div.mainContentContainer > div.top > div.informationContainer {
	position: relative;
	top: 30px;
	left: 120px;
	height: 45px;
	width: 100%;

	color: #787878;
	font-family: arial;
	font-size: 14px;
	padding-left: 5px;
	text-decoration: none;
	text-shadow: 1px 1px 0 white;
}


div.mainContentContainer > div.top > div.informationContainer > div.name {
	font-size: 17px;
	font-weight: bold;
	height: 22px;
}

div.mainContentContainer > div.top > div.informationContainer > div.namespace {
}


div.mainContentContainer > div.top {
	position: relative;
}

div.mainContentContainer > div.top > div.subMenu {
	position: absolute;
	top: 97px;
	left: 20px;
}

/** lists of components (service templates, node types, relationship types) **/

div.entityContainer {
	float: left;
	margin-bottom: 10px;
	cursor: pointer;
}

div.entityContainer > div {
	float: left;
	height: 86px;
}

div.entityContainer > div.left {
	width: 117px;
}

div.entityContainer > div.center {
	width: 500px;
}

div.entityContainer > div.right {
	width: 33px;
}

div.entityContainer > div.center > div.informationContainer {
	margin-top: 25px;
	height: 45px;
	color: #787878;
	font-family: arial;
	font-size: 12px;
	padding-left: 5px;
	text-decoration: none;
	text-shadow: 1px 1px 0 white;
	float: left;
	max-width: 313px;
}


div.entityContainer > div.center > div.informationContainer > div.name {
	font-size: 14px;
	font-weight: bold;
	height: 18px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

div.entityContainer > div.center > div.informationContainer > div.namespace {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

div.entityContainer.serviceTemplate > div.left {
	background: url('../images/entityBox/serviceTemplate/left.jpg');
}

div.entityContainer.serviceTemplate > div.center {
	background: url('../images/entityBox/serviceTemplate/center.jpg');
}

div.entityContainer.serviceTemplate > div.right {
	background: url('../images/entityBox/serviceTemplate/right.jpg');
}

div.entityContainer.nodeType > div.left {
	background: url('../images/entityBox/nodeType/left.jpg');
}

div.entityContainer.nodeType > div.center {
	background: url('../images/entityBox/nodeType/center.jpg');
}

div.entityContainer.nodeType > div.right {
	background: url('../images/entityBox/nodeType/right.jpg');
}

div.entityContainer.relationshipType > div.left {
	background: url('../images/entityBox/relationshipType/left.jpg');
}

div.entityContainer.relationshipType > div.center {
	background: url('../images/entityBox/relationshipType/center.jpg');
}

div.entityContainer.relationshipType > div.right {
	background: url('../images/entityBox/relationshipType/right.jpg');
}

div.entityContainer.admin > div.left {
	background: url('../images/entityBox/admin/left.jpg');
}

div.entityContainer.admin > div.center {
	background: url('../images/entityBox/admin/center.jpg');
}

div.entityContainer.admin > div.right {
	background: url('../images/entityBox/admin/right.jpg');
}


div.entityContainer.artifactTemplate > div.left {
	background: url('../images/entityBox/admin/left.jpg');
}

div.entityContainer.artifactTemplate > div.center {
	background: url('../images/entityBox/admin/center.jpg');
}

div.entityContainer.artifactTemplate > div.right {
	background: url('../images/entityBox/admin/right.jpg');
}


div.entityContainer.artifactType > div.left {
	background: url('../images/entityBox/admin/left.jpg');
}

div.entityContainer.artifactType > div.center {
	background: url('../images/entityBox/admin/center.jpg');
}

div.entityContainer.artifactType > div.right {
	background: url('../images/entityBox/admin/right.jpg');
}


div.entityContainer.nodeTypeImplementation > div.left {
	background: url('../images/entityBox/admin/left.jpg');
}

div.entityContainer.nodeTypeImplementation > div.center {
	background: url('../images/entityBox/admin/center.jpg');
}

div.entityContainer.nodeTypeImplementation > div.right {
	background: url('../images/entityBox/admin/right.jpg');
}


div.entityContainer.relationshipTypeImplementation > div.left {
	background: url('../images/entityBox/admin/left.jpg');
}

div.entityContainer.relationshipTypeImplementation > div.center {
	background: url('../images/entityBox/admin/center.jpg');
}

div.entityContainer.relationshipTypeImplementation > div.right {
	background: url('../images/entityBox/admin/right.jpg');
}

div.entityContainer.requirementType > div.left {
	background: url('../images/entityBox/admin/left.jpg');
}

div.entityContainer.requirementType > div.center {
	background: url('../images/entityBox/admin/center.jpg');
}

div.entityContainer.requirementType > div.right {
	background: url('../images/entityBox/admin/right.jpg');
}

div.entityContainer.capabilityType > div.left {
	background: url('../images/entityBox/admin/left.jpg');
}

div.entityContainer.capabilityType > div.center {
	background: url('../images/entityBox/admin/center.jpg');
}

div.entityContainer.capabilityType > div.right {
	background: url('../images/entityBox/admin/right.jpg');
}

div.entityContainer.policyTemplate > div.left {
	background: url('../images/entityBox/admin/left.jpg');
}

div.entityContainer.policyTemplate > div.center {
	background: url('../images/entityBox/admin/center.jpg');
}

div.entityContainer.policyTemplate > div.right {
	background: url('../images/entityBox/admin/right.jpg');
}

div.entityContainer.policyType > div.left {
	background: url('../images/entityBox/admin/left.jpg');
}

div.entityContainer.policyType > div.center {
	background: url('../images/entityBox/admin/center.jpg');
}

div.entityContainer.policyType > div.right {
	background: url('../images/entityBox/admin/right.jpg');
}

div.entityContainer.xSDImport > div.left {
	background: url('../images/entityBox/admin/left.jpg');
}

div.entityContainer.xSDImport > div.center {
	background: url('../images/entityBox/admin/center.jpg');
}

div.entityContainer.xSDImport > div.right {
	background: url('../images/entityBox/admin/right.jpg');
}


/* buttons */
div.entityContainer > div.center > div.buttonContainer {
	float: right;
	height: 42px;

	margin-top: 23px;
	margin-left: 40px;
}

div.entityContainer > div.center > div.buttonContainer > a {
	float: left;
	height: 42px;
	margin-right: 5px;
}

div.entityContainer > div.center > div.buttonContainer > a.editButton {
	background: url('../images/entityBox/editButton.jpg');
	width: 41px;
}
div.entityContainer > div.center > div.buttonContainer > a.editButton:hover {
	background: url('../images/entityBox/editButtonHover.jpg');
}

div.entityContainer > div.center > div.buttonContainer > a.exportButton {
	background: url('../images/entityBox/exportButton.jpg');
	width: 53px;
}
div.entityContainer > div.center > div.buttonContainer > a.exportButton:hover {
	background: url('../images/entityBox/exportButtonHover.jpg');
}

div.entityContainer > div.center > div.buttonContainer > a.deleteButton {
	background: url('../images/entityBox/deleteButton.jpg');
	width: 33px;
}
div.entityContainer > div.center > div.buttonContainer > a.deleteButton:hover {
	background: url('../images/entityBox/deleteButtonHover.jpg');
}

input.highlight {
	background-color: lightskyblue;
}

input.qnameinput {
	width: 600px;
}

/* fixes wrong z-index of autocompleter in jQuery UI 1.10.3 */
.ui-autocomplete {
	z-index: 1000;
}

#warning {
	color: blue;
	font-weight: bold;
	cursor: default;
	float: right;
	margin-right: 10px;
	/* 0px is required to have the tabs below not being pushed down */
	height: 0px;
}

#constraintlist {
	cursor: pointer;
}

#searchBox {
	background: url("../images/searchBoxBackground.jpg") no-repeat scroll 2px -4px transparent;
	border: 2px solid #BEBEBE;
	border-radius: 15px 15px 15px 15px;
	box-shadow: 5px 5px 5px #EAEAEA;
	color: #676767;
	font-size: 15px;
	height: 35px;
	margin-bottom: 30px;
	padding: 5px 5px 5px 70px;
	width: 660px;
}

#gcprightcolumn {
	background: url('../images/overviewShadowMiddle.jpg');
	width: 35px;
	position: relative;
	padding:0px;
}

#overviewtopshadow {
	top: 0px;
	background-image: url("../images/overviewShadowTop.jpg");
	height: 269px;
}

#overviewbottomshadow {
	bottom: 0px;
	background-image: url("../images/overviewShadowBottom.jpg");
	height: 269px;
	position: absolute;
	width: 35px;
}

span.cursorpointer {
	cursor: pointer;
}

div.otherelements > a.btn {
	width: 250px;
}

#bigIconDiv {
	height: 50px;
}

div.colorpickerdiv {
	height: 35px;
	width: 35px;
	background: url("../components/colorPicker/images/select.png")
}

#applicationDescriptionDiv {
	overflow-x: hidden;
	overflow-y: scroll;
	height: 200px;
}

.XMLtextarea {
	height: 300px;
}

div.col-xs-4.bordered {
	width: 32%;
	border: 1px solid #DADADA;
	padding: 0px;

}

div.col-xs-4.bordered  div.listheading {
	height: 36px;
	padding-right: 3px;
}

div.col-xs-4.middlebox {
	margin-left: 18px;
	margin-right: 18px;
}

div.col-xs-4.bordered  div.listheading > button {
	margin-top: 3px;
}

table.dataTable {
	font-size: 12px;
}

table.dataTable thead th {
	font-size: 11px;
	color: #3F3F3F;
}

div.titledTableBox {
	box-shadow: 2px 2px 5px #AEAEAE;
	margin-bottom: 5px;
	margin-right: 10px;
	border: 1px solid #aeaeae;
	padding: 0px;
	margin-left: 0px;
	padding-left: 0px !important;
}
.listheading {
	background: url("../images/header_background.png") repeat scroll 0 -39px transparent;
	height: 30px;
	margin: 0px;
	padding-left: 7px;
	line-height: 30px;
	font-size: 12px;
	color: #606060;
	text-shadow: 1px 1px 0 white;
}

#names {
	width: 200px;
	overflow: hidden;
	padding-left: 10px;
	float: left;
}

.listcontent {
	border: 0px;
	width: 100%;
	margin: 0px;
	border-top: 0px;
}

.topologyTemplatePreviewSizing {
	height:400px;
	width:921px;
}

#topologyTemplatePreview {
	border: 0;
}

div.policiesContainer > div.header {
	display: none;
}

div.policiesContainer > div.content > div.policy > textarea.policy_xml {
	display: none;
}