@import url(reset.css);
@import url(JqueryUI/JqueryUI.css);

/**********************************************************************************************
 * ProcessWire Admin Control Panel - Skyscraper Theme - main.css
 *
 * This file provides the initial layout and styling for most admin control panel elements.
 * See also ui.css, which provides the final styling and overrides.
 *
 * Copyright 2010 by Ryan Cramer
 *
 */


/***********************************************************************************************
 * GENERAL
 *
 */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}


html[xmlns] .clearfix {
	display: block;
}

* html .clearfix {
	height: 1%;
}

body {
	background-color: #f4f4f5;
	font: 10px/20px "Helvetica Neue", Arial, sans-serif;
	color: #747b7f;

}
	body.modal {
		background-color: #fff;
	}


#content,
#footer {
	padding:0 20px;
}

.container {
	position: relative;
	min-width: 320px;
	max-width: 1140px;
	margin: 0 auto;
}


	body.modal .container {
		margin: 0 auto;
		width:96%;
		min-width: 300px;
	}


a {
	color: #356f9e;

}
	a:hover {
		color: #4287c0;
		/*background: #f10055;*/
	}

	a.on {
		color: #4287c0;
	}

.WireFatalError {
	background: #a30000;
	color: #fff;
	padding: 1em;
	position: relative;
	z-index: 9999;
}

/***********************************************************************************************
 * MASTHEAD
 *
 */

#masthead {
 	background:#000 url(images/bg.jpg) top center repeat-x;
	height: 80px;
	font-size: 1.1em;
	position:fixed;
	top:0;
	width:100%;
	z-index:90;
	border-bottom:1px solid #555;
	-webkit-box-shadow: 0 4px 6px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 4px 6px rgba(0,0,0,0.4);
	-ms-box-shadow: 0 4px 6px rgba(0,0,0,0.4);
	-o-box-shadow: 0 4px 6px rgba(0,0,0,0.4);
	box-shadow: 0 4px 6px rgba(0,0,0,0.4) , inset 0 30px 32px -30px rgba(0,0,0,0.6);

}

	body.modal #masthead {
		display: none;
	}

	#logo {
		position: absolute;
		right: 5px;
		top: 1px;
		width: 135px;
		height:31px;
		text-indent: -9999px;
		background: url(images/logo2.png) top left no-repeat;
		z-index:10;
	}

	#topnav {
		position: absolute;
		left: 0;
		top: 0px;
		height:31px;
	}

		#topnav > li {
			padding: 0;
			list-style: none;
			position:relative;
			display: inline;
			line-height: 1em;
			border-left:1px solid #000;
		}

			a.nav,
			.nav a {
				font-family:  sans-serif;
			}
				a.nav:hover,
				.nav a:hover {
					color: #448cc7;
				}

			#topnav a, #topnav a:visited {
				color: #4b87b8;
				position:relative;
				margin: 0 1px 0 0;
				font-size:14px;
				font-weight:bold;
				letter-spacing:0.05em;
				padding: 11px 15px 9px 15px;
				text-shadow: 0px 0px 3px #000;
				text-transform:uppercase;
			}

			#topnav a:hover,
			#topnav a.hover{
				color: #fff;
				/*background: #0f1920; url(images/topnav_a_bg.gif) top left repeat-x; */
				box-shadow: inset 0 0 9px rgba(0,10,20,0.4);

			}
			#topnav a.on {
				color: #fff;
				position:relative;
				box-shadow: inset 0px 0px 9px rgba(0,0,50,0.4);
				text-shadow: 0px 0px 3px #508dc0;
			 	border:none;
				background-color: #508dc0; /*url(images/topnav_a_bg.gif) top left repeat-x; */
			}
			/* sublevel */
			#topnav ul{ box-shadow:0 4px 5px rgba(0,0,0,0.3); }
			#topnav ul li{ border:none; }
			#topnav ul li a{
				border-top: 1px solid #fff; border-right: none;
				border-bottom: 1px solid #d1dbe2;
				background-color: #e9e9e9;
				font-size:12px;
				font-weight:normal;
				text-shadow: none;
				color:#416784!important;
				text-transform:none;
				padding:7px 15px;
			}

			#topnav ul li a:hover,
			#topnav ul li a.hover{
				color:#356f9f!important;
				box-shadow: none;
				background-color: #fff;
				border-top: 1px solid #fff;
				border-bottom: 1px solid #d1dbe2;
			}
			#topnav ul li a.on{
				color:#fff!important;
			}
			#topnav ul li a.on:hover{
				box-shadow: inset 0px 0px 9px rgba(0,0,50,0.4);
				text-shadow: none;
			 	border:none;
				background-color: #508dc0; /*url(images/topnav_a_bg.gif) top left repeat-x; */
			}

			#topnav a span.ui-icon { z-index:1; display:block; position:absolute; top:4px; right:30px;}
			#topnav a.notinstalled { color:#b4c3d7!important;}


	#breadcrumb {
		position: absolute;
		left: 15px;
		top: 51px;
	}
		#breadcrumb li {
			font-size: 12px;
			display: inline;
			margin:0;
			padding: 1px 3px 1px 3px;
		}
			#breadcrumb a {
				color: #b1b8be;
				float:left;
			}
			#breadcrumb li span{
				float:left;
				display:block;
				height:16px;
				width:16px;
				margin: 3px 3px 0 3px;
				background: transparent url(images/breadcrumb.gif) 0 0 no-repeat;
			}
			#breadcrumb a:hover {
				color: #eee;
			}

	#title {
		font-size: 26px;
		line-height: 1.3em;
		font-family: sans-serif;
		color: #333;
		margin: 0 0 0.6em 0;
		/*white-space: nowrap; */
	}

	#ProcessPageSearchQuery {
		position: absolute;
		top:49px;
		right: 15px;
		width: 112px;
		padding: 2px 7px;
		height: 17px;
		border: none;
		background-color:#444!important;
		color:#777;
		opacity:1!important;
		border-radius:3px;
		box-shadow:inset 1px 1px 1px #000;
	}
	#ProcessPageSearchQuery:focus {
		background-color:#fff!important;
		color:#333;
	}


	#userinfo_top{
		position:absolute;
		top:50px;
		right: 155px;
		color:#ddd;
		letter-spacing:0.09em;

	}
	#userinfo_top a,#userinfo_top a:visited{
		color:#5a90bc;
	}
	#userinfo_top a:hover {
		color: #eee;
	}



	/**
		 * The main/primary button for a listing screen, appears in the masthead
		 *
		 */
	#head_button {
		position: absolute;
		top: 163px;
		right: 0;
		display: none;
	}
		#head_button button {
			margin-right: 0;
			margin-left: 10px;
			font-size: 1.1em;
		}


	#head_button{ position:fixed; top:120px; right:5%;}

	/* for backward compatibility */
	button#submit_save_top{ position:fixed; top:120px; right:5%;}


#notices {
	font-size: 1.3em;
}

/***********************************************************************************************
 * CONTENT
 *
 */


#wrapper-content{ margin:100px 0 0 0;}
#content {
	position: relative;
	background-color: #f4f4f5;
	padding-top: 1em;
	padding-bottom: 2em;
	font-family: sans-serif;
	font-size: 1.3em;
	box-shadow: 0 4px 5px 0px #ddd;
	border-bottom:1px solid #ddd;

}
	#content .container {
		min-height: 50px;
	}
	.modal #wrapper-content{
		margin-top:0;
		background-color: #f5f5f7;
	}

		.content img {
			display: block;
		}

		.content .WireTabs a {
			font-size: 1em;
		}
		.content .nav a.label {
			font-size: 1em;
		}

	.content p,
	.content ul
	.content ol,
	.content table {
		margin: 1em 0;
	}

	#content table th.header,
	.content h4 {
		font-family: "Helvetica Neue", Arial, sans-serif;
		color: #b0ced8;
	}
		#content table th.headerSortUp,
		#content table th.headerSortDown,
		#content table th:hover {
			color: #690033;
		}

	.content table.AdminDataList {
		margin-top: 0;
		border-collapse:separate;
	}

	.content table.AdminDataList th{
		color:#5f7683!important;
		border-bottom:2px solid #ddd;
		padding: 0 8px;
	}
	.content table.AdminDataList th.headerSortDown{
		color:#90aebe!important;

	}
	.content table.AdminDataList td{
		border:0;
		padding: 5px 8px;
		border-bottom:1px solid #d1d6da;
		border-collapse:separate;
	}

	.content table.AdminDataList tr:hover td{ background-color:#eaeaea;}

	.content input, .content textarea { border-radius:5px; background-color: #fff!important; border:1px solid #aaa; padding:5px!important; font-size:13px!important;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	div.uploader span.action{
		background-color:#f2f2f3;
	}

	.content h2 {
		font-family: sans-serif;
		margin: 1em 0;
		padding: 0 0 4px 0;
		font-size: 18px;
		line-height: 1.2em;
		color: #b3311b;
		font-weight:normal!important;
		border-bottom:1px solid #e9c9c4;
	}
		.container > h2,
		.container > form > h2 {
			margin-top: 0;
		}

	.content h3 {
		margin: 1em 0;
		font-size: 1.5em;
	}

	.content h4 {
		margin: 1em 0 0.25em 0;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 0.916666666666667em;
	}
	.content ul,
	.content ol {
	}

		.content li {
			margin: 1em 0;
			display: block;
			list-style: disc;
		}

		.content ol li {
			display: list-item;
			list-style-type: decimal;
			margin-left: 1em;
		}

		/**
		 * Actions: like the "|edit|view|new" in the PageList
		 *
		 */
		.content ul.actions {

		}
			.content ul.actions li,
			li.action {
				display: inline;
				border:none;
				margin: 0;
				line-height:1em;

				text-transform: lowercase;
			}

			.content ul.actions li a,
			li.action a {
				padding: 2px 6px 2px 6px;
				background-color:#eee;
				border-bottom: none;
				color:#5f7c9a;
				border-radius:4px;
			}
			.content ul.actions li a:hover,
			li.action a:hover {
				color:#428ac4;
				background-color:#fff;
				box-shadow: 0 0 4px #555;
			}

			.PageListActionMore a{margin-top:15px!important;}

		/**
		 * Content navigation like when on the root page of "templates" or "access"
		 *
		 */
		.content dl {
			margin: 1em 0;
			border-bottom: 1px dotted #eee;
		}
			.content dt,
			.content dt {
				display: block;
				font-weight: bold;
				border-top: 1px dotted #eee;
				padding-top: 1em;
			}
			.content dt a {
				font-size: 1em;
				text-transform: none;
			}
			.content dl dd {
				padding-bottom: 1em;
			}

			.content dl,.content dl dt{
				border:0;
				padding: 0 2px;
				border-bottom:1px solid #ddd;
			}
			.content dl{border-bottom:0!important;}
			.content dt{font-size:16px;font-weight:normal;}
			.content dd{padding-left:2px;}


	.content .description {
		font-family: sans-serif;
		font-style: italic;
		color: #8d9eaa;
		line-height:17px;
	}

	.content p.notes {
		font-size: 1em;
		color: #5d572c;
		background: #e3e0cb;
		padding:5px 10px;
		font-style: italic;
		margin:1em 0 1em 0;
		line-height:1.4em;
	}

	.content span.notes {
		display:block;
		font-size: 1em;
		color: #5d572c;
		background: #e3e0cb;
		padding:5px 10px;
		font-style: italic;
		margin:1em 0 1em 0;
		line-height:1.4em;
	}

	.content .error {
		color: red;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 0.9166666em;
	}



/***********************************************************************************************
 * FOOTER
 *
 */

#footer {
	margin: 2em 0 2em 0;
	font-size: 1.1em;
	color: #546873;
	font-family: sans-serif;
}
	body.modal #footer {
		display: none;
	}
	#footer p {
		margin-top: 0;
	}
	#footer #userinfo {
		display: block;
		float: right;
	}
	#footer #userinfo a {
		font-weight: bold;
		text-transform: uppercase;
	}

	#debug {
		margin-top: 2em;
	}
		#debug .container {
			width: 100%;
		}
		#debug p {
			margin: 1em 0;
		}
		#debug ol {
			margin: 1em 0;
		}
		#debug h4 {
			font-weight: bold;
		}



/***********************************************************************************************
 * MISC
 *
 */

.align_left {
	float: left;
	margin: 0 1em 0.5em 0;
}

.align_right {
	float: right;
	margin: 0 0 0.5em 1em;
}

.align_center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.detail {
	font-size: 0.9166em;
	color: #999;
}




/**
 *
 * Some custom Teflon Theme styles
 *
 */

	.ProcessLoginForm #content .container,
	#content .container {
		/*border-top:1px solid #ccd3d9;*/
		border-bottom:2px solid #ccd3d9;
		padding:20px 20px 30px 20px;
		margin-bottom: 20px;
		background-color:#f8f8f9;
		border-radius:15px;
		-webkit-box-shadow: 0 0 20px #ccd3d9;
		-moz-box-shadow: 0 0 20px #ccd3d9;
		-ms-box-shadow: 0 0 20px #ccd3d9;
		-o-box-shadow: 0 0 20px #ccd3d9;
		box-shadow: 0 4px 20px #ccd3d9;
	}
	#content form{
		position:relative!important;
		border-top:1px solid #ccd3d9;
	}

	#content #ProcessLoginForm{
		background-color:transparent;
		border:0;
		box-shadow:none;
		padding:0;
		margin:0 auto;
	}
	.ProcessLoginForm #logo {
		position:relative;
		margin:0 auto;
		top:2px;
	}
	.ProcessLoginForm #topnav{ display:none; }
	.ProcessLoginForm #content {
		padding:20px 0 0 0;
		box-shadow:none;
	}
	.ProcessLoginForm #content .container{
		min-width:200px;
		max-width:300px!important;
		padding:20px 15px 20px 15px;
	}


	.ProcessLoginForm #content .InputfieldText{
		width:100%;
		float:none;
	}
	.ProcessLoginForm #content .InputfieldSubmit{
		float:right;
	}
	.ProcessLoginForm #content .InputfieldText input{
		width:100%;
	}
	.ProcessLoginForm .footer {text-align:center;}


	#content #ProcessPageSearchOptionsForm
	{
		width:100%;
		border:0;
		padding:15px!important;
	}
	#content #ProcessPageSearchResults.show_options{
		padding-left:300px;
	}



	#content #fieldgroupContext{ top:1em; right:8em;}
		body.modal #content #fieldgroupContext{ position:absolute; top:-9999px!important; right: 0; }

	.WireTabs{
		padding: 5px 0;
		margin: 0 0 0 2px!important;
		border-bottom:1px solid #ccd3d9;
		position:absolute!important;
		top:-31px!important; left:0!important;
	}
	.WireTabs li{
		padding:0 1px 0 0!important;
		background:none!important;
		height:24px;
		}

	.WireTabs li a{
		border:1px solid #ccd3d9!important;
		padding:6px 15px 8px 15px;
		background:#ddd url(images/tabs.gif) 0 0 repeat-x;
		color:#747b7f;
		border-radius:5px 5px 0 0 ;
		}
		.WireTabs li a:hover{
			border:1px solid #ccd3d9!important;
			border-bottom:1px solid #fff;
			color:#333;
			padding:8px 15px 8px 15px;
			background:#eee url(images/tabs.gif) 0 -60px repeat-x;
		}
	.WireTabs li a.on{
			color:#333;
			background-image:none;
			border:1px solid #ccd3d9;
			border-bottom:1px solid #f8f8f9!important;
			position:relative;
			z-index:1;
			background-color:#f8f8f9;
			padding:8px 15px 8px 15px;

		}

	.WireTabs li a#_ProcessPageEditView{
		padding:4px 12px;
		border-radius:5px;
		margin:0 0 0 1em;
	}




.ui-state-highlight,
.iui-state-error{ margin:0 0 0 0;}
.PageListSelectActionToggle { color: #35709f!important; }