/* HOSTBABY Redesign stylesheet
Visual Design - Stacy Bias (www.hostbaby.com)
Coding - Andrew Tay (www.andrewtay.com) February-March 2009
Modified for the Hostbaby Wizard UI - Rebecca Bateman and James Gifford  (www.hostbaby.com) September-October 2009
*/


/* Global HTML tags
------------------------------------------------------------------------------*/

html, body, div	{
	margin: 				0; 
	padding: 				0; }

html, body { 
	background: 			#fff url("../img/bluegradient.gif") repeat-x;
	color: 					#000;
	font-family: 			"Trebuchet MS", "Lucida Grande", sans-serif;
	font-size: 				13px;
	/*height: 				100%;*/
	line-height: 			1.5;
	text-align: 			center; /* page auto-centering for IE5win */ }

a {
	color: 					#0060b6;
	font-weight: 			bold; 
	outline:				0;
	text-decoration: 		none; }
	
	a:hover {
		color: 				#fd6509; 
		text-decoration: 	underline; }
	
	a.function, a.addnew, a.options_link, a.custom_change_link {
		color:				#8f0000; }
	
	a.addnew {
		background: 		transparent url(../img/addnew.gif) no-repeat left center;
		display:			block;
		float:				left;
		padding-left: 		19px; }
	
	a.options_link {
		background: 		transparent url(../img/list_settings.gif) no-repeat left center;
		display:			block;
		float:				right;
		padding-left:		19px; }

dl { 
	line-height: 			1.33;
	margin: 				1em 0; }

form {
	margin-top:				5px; }

	form p {
		border-top: 			1px solid #ccc;
		padding-top:			1em;
		width:					100%; }
		
		form p.header {
			border:					none;
			text-align:				center; }
		
		form p.controls {
			text-align:				center; }
		
		form p.description {
			text-align:				center; }
	
	form label {
		display:				block;
		float:					left;
		font-weight: 			bold;
		line-height:			1.2;
		margin-top:				2px;
		width:					15%; }

	form input[type="radio"], form input[type="checkbox"] {
		background: 			transparent;
		border: 				0; }

	form input, form textarea, form select {
		border: 				1px solid #999999;
		padding: 				2px 4px; }
		
		form input:focus, form textarea:focus, form select:focus {
			background-color: 		#FFFFE3;
			border: 				1px solid #5D88D5; }
	
	input[type="submit"], form input#action, form input#submit, form input#imageupload, form input#groupaction, form input#go, form body#settings .submitbutton {
		background-color: 		#4F902A;
		border: 				1px solid #000000;
		border-top-color: 		#CDF79D;
		border-left-color: 		#CDF79D;
		color: 					#ffffff;
		cursor: 				hand;
		font-weight: 			bold;
		letter-spacing: 		1px;
		padding: 				2px 6px; }

		form input#action:hover, form input#submit:hover, form input#imageupload:hover, form input#groupaction:hover, form input#go:hover, form body#settings input.submitbutton:hover {
			background-color: 		#E36F00;
			border: 				1px solid #7E1D00;
			border-top-color: 		#FBCE8A;
			border-left-color: 		#FBCE8A; }

	form textarea {
		height: 				200px;
		width: 					98%; }
		
		form textarea.small {
			height:					100px;
			width:					98%; }
	
	form input.upfile {
		border:					1px solid #c4c4c4; }

	form select {
		border: 				1px solid #c4c4c4;
		margin: 				0 3px; }
	
	form .subdesc {
		color: 					#777;
		font-weight: 			normal;
		line-height:			1.2; }

h1, h2, h3 {
	font: 					bold 1.6em "Trebuchet MS", "Lucida Grande", sans-serif; }

h1 { 
	margin: 				.67em 0;
	text-align: 			center;
	text-transform: 		uppercase; }

h2 { 
	margin: 				.83em 0; }
	
	h2 span {
		background:				url(../img/heading.png) 0 0 no-repeat;
		display:				block;
		line-height:			2.1em;
		margin-left:			-10px;
		padding-left:			10px; }

h3 { 
	font-size:				1.5em;
	margin: 				1em 0 0 0;
	text-transform: 		uppercase; }

h4 {
	color:					#444; }

hr {
	border: 				none;
	margin: 				0 0 20px 0; }

img { 
	border: 				none; }

p, blockquote { 
	line-height: 			1.2;
	margin: 				1em 0; }
	
	p.blurb {
		margin-bottom:			2em; }

ul, ol {
	list-style:				none; 
	margin: 				1em 0 1em 40px; 
	padding: 				0; }

table {
	border: 				0;
	border-top: 			1px solid #ccc;
	width: 					100%; }

	table th, table td {
		border-bottom: 			1px solid #ccc;
		font-weight: 			normal;
		line-height:			1.2;
		padding: 				10px;
		vertical-align: 		top; }
	
	table th {
		text-align: 			left; }
	
		table tr.roweven td {
			background-color: 		#ededed; }
		
		table tr.rowodd td {
			background-color: 		#ffffff; }


/* Page layout
------------------------------------------------------------------------------*/

#accessibility { 
	left: 					-9999px;
	position: 				absolute; }

#container {
	min-height: 			100%;
	position: 				relative; }

/* Header and Main Navigation */

#header { 
	background: 			#00aeef url("../img/colorbars.png") 0 100% repeat-x;
	min-height: 			45px; 
	position: 				relative; 
	z-index: 				50;	/* this allows the header to overlap the top point of the star logo */ }

#headercontainer { 
	margin:	 				0 auto;
	width: 					960px; }

a#top_preview { 
	background: 			url("../img/previewbutton-sprite.png") 0 0 no-repeat;
	float: 					left; 
	height: 				28px;
	line-height: 			28px;
	margin-top: 			3px;
	padding-top: 			1px;
	text-indent: 			4px;
	width:	 				100px; }
	
	a#top_preview:link, a#top_preview:visited { 
		background-position:	top left;
		color: 					#222; }

	a#top_preview:hover, a#top_preview:active {
		background-position: 	bottom left; 
		color: 					black; }

#mainnav { 
	color: 					#e5f1f5; 
	font: 					bold 1.3em "Trebuchet MS", "Lucida Grande", sans-serif; 
	line-height: 			2em; 
	margin-right: 			-5px;
	text-align: 			right; }
	
	#mainnav ul { 
		margin: 				0; }
		
		#mainnav ul li { 
			display: 				inline; }
			
			#mainnav ul li a {
				color: 					#e5f1f5;
				padding: 				0 5px;
				text-transform: 		uppercase; }
				
				#mainnav ul li a:hover {
					text-decoration: 		underline; }

/* highlight current page */
.home #mnavhome a, .pricing #mnavpricing a, .website #mnavfeatures a, .members #mnavmembers a, .help #mnavhelp a, .signup #signup a {
	/*	color: #bababa !important; */
	/*	text-decoration: none !important; */ }

/* Content */
	
#content {
	padding-bottom: 		170px; /* approx the height of the footer and secondnav */
	position:				relative; }

#contentcontainer {
	margin: 				0 auto;
	position: 				relative; /* this is needed so that the #logolink and #logo can use position: absolute; */
	text-align: 			left;
	width: 					960px; }

	/* In order to place the logo img behind the #header and #contenthead, and yet still have it clickable (to take
		you back to home), it was necessary to make them siblings along with #contenthead (normally, you would make
		the img a child of the link). Basically, this allows z-index to work. */
	
a#logolink, img#logo {
	background:				url(../img/hostbabystarlogo-ui.gif) 0 0 no-repeat;
	height: 				90px;
	left: 					5px;
	position: 				absolute;
	top: 					0px;
	width: 					97px; }

#logolink {
	background: 			url("fakeurl");	/* this forces IE and Opera to create the link correctly */
	z-index: 				200; }

#logo {
	z-index: 				0; }

#contenthead {
	border-bottom: 			2px solid #00aeef;
	margin: 				0 0px 25px 0px;
	min-height: 			75px;
	padding-top: 			6px;
	position: 				relative; /* this is needed so that it can appear above the star logo */
	z-index: 				70; }

#overview {
	background-color: 		#c7edf9;
	height:					60px;
	margin: 				0 0 0 220px;
	padding: 				8px 10px 0 10px;
	position: 				relative; /* this is needed to position rounded corners */
	width: 					720px; /* IE6 needs this to trigger hasLayout for rounded corners. bad ie! */ }

#domainid {
	background-color: 		#c7edf9;
	border-right: 			2px solid #00aeef;
	float: 					left;
	height: 				50px;
	line-height: 			28px;
	margin-top: 			0px;
	padding-top: 			1px;
	text-align: 			center;
	width: 					450px; }
	
#domainid.long_domain {
	margin-top:				-10px; }
	
	#domainid h1 {
		font: 					bold 1.5em "Trebuchet MS", "Lucida Grande", sans-serif;
		margin: 				2px 0 0 0;
		width: 					100%; /* this gives hasLayout to IE, which it needs to render it properly */ }
	
	#domainid h2 {
		font-size:				1.3em;
		margin: 				0;
		width: 					100%; /* this gives hasLayout to IE, which it needs to render it properly */ }

#toolsnav {
	display: 				inline;
	float: 					right;
	height: 				20px;
	margin: 				0 0px 0px 0px;
	padding:	 			0;
	text-align: 			right;
	width: 					220px; }
	
	#toolsnav ul {
		float: 					right;
		list-style-type: 		none;
		margin: 				0;
		padding: 				0;
		width: 					220px; }
		
		#toolsnav ul li {
			background-position:	left top;
			background-repeat: 		no-repeat;
			float: 					left;
			font: 					bold 0.8em "Trebuchet MS", "Lucida Grande", sans-serif;
			margin: 				0 20px 0 0;
			text-align: 			center;
			text-transform:			uppercase; }
			
			#toolsnav ul li a {
				background-position: 	left top;
				background-repeat: 		no-repeat;
				color: 					black;
				display: 				block;
				margin: 				0;	
				padding: 				44px 0 0 0;
				text-align: 			center;
				width: 					52px; }
				
				#toolsnav li a:hover {
					color: 					black;
					text-decoration: 		none; }

#tnwebsite, #tnwebsite a {
	background-image: 		url(../img/button_website.gif); }

#tnpublish, #tnpublish a {
	background-image: 		url(../img/button_publish.gif); }

#tnsettings, #tnsettings a {
	background-image: 		url(../img/button_settings.gif); }

#contentbody {
	margin: 				0 0 25px 0px;
	padding: 				0 0 0 18px; }

#preview, #preview_modal {
	position: 				absolute;
	right: 					10px;
	top: 					5px;
	text-align: 			right;
	width: 					180px; }

#preview_modal {
	right: 					35px;
	top: 					47px; }

	#preview a, #preview_modal a {
		background: 			transparent url(../img/search.png) no-repeat right top;
		color: 					#555;
		float: 					right;
		height: 				24px;
		line-height: 			24px;
		outline: 				0;
		padding-right: 			30px;
		text-decoration: 		none; }
		
		#preview a span, #preview_modal a span {
			display: 				inline;
			font-size: 				12px;
			font-weight: 			normal; }

/* Footer */
	
#footer {
	background: 			#ff6014 url("../img/colorbars.png") 0 0 repeat-x;
	bottom: 				0;
	clear: 					both;
	left: 					0;
	min-height: 			150px;
	min-width: 				800px;
	position: 				absolute;
	width: 					100%; }

.clubs #footer, .studios #footer {
	background-color: 		#c13e1b; }
	
#footercontainer {
	margin: 				0 auto;
	padding-top: 			10px;
	position: 				relative;
	text-align: 			left;
	width: 					960px; }

#footer_links {
	left: 					0;
	position: 				absolute; /* was originally float: left, but in IE6, it interfered with the slider floats */ 
	top: 					13px; 
	width: 					325px; }
	
	#footer_links dl {
		font: 					bold 1.1em "Trebuchet MS", "Lucida Grande", sans-serif;
		text-transform: 		uppercase; }
	
	#footer_links dt {
		color: 					#e5f1f5; }
	
	#footer_links dd a { color: 		black !important; }

/* Second Navigation */

#secondnav {
	background-color: 		#fff;
	bottom: 				0;
	color: 					#00a0c6;
	font-family:			"Trebuchet MS", "Lucida Grande", sans-serif;
	font-weight: 			bold;
	height: 				25px;
	left: 					0;
	line-height: 			24px;
	position: 				absolute;
	width: 					100%; }
	
	#secondnav ul {
		list-style: 			none;
		margin: 				0;
		padding-top: 			1px; }
		
		#secondnav ul li {
			display: 				inline;
			margin: 				0; }
			
			#secondnav ul li#snavcopy {
				color: 					#000;
				padding: 				0 10px; }
			
			#secondnav ul li a {
				color: 					#00a0c6;
				padding: 				0 10px;
				text-transform: 		uppercase; }
				
				#secondnav ul li a:hover {
					color: 					#ff6014; 
					text-decoration: 		underline; }
	
/* highlight current page */
.home #snavhome a, .pricing #snavpricing a, .website #snavfeatures a, .members #snavmembers a, .help #snavhelp a, .signup #snavsignup a {
	color: 					#c13e1b !important;
	text-decoration: 		none !important; }



/* Page-specific styles
------------------------------------------------------------------------------*/

/* Login page */

body.login #contentbody {
	margin: 				0 auto;
	position: 				relative;
	text-align:				center;
	width:					960px; }

#login_form {
	margin:					0 auto;
	width:					400px; }

	#login_form form {
		text-align:			left; }
	
		#login_form form label {
			font-size:				1.5em;
			line-height:			1.5em;
			text-align:				right;
			margin-right:			20px;
			width:					35%; }
		
		#login_form form input {
			margin-top:				2px; }

#login_email {
	margin:					0 auto;
	position:				relative;
	text-align:				center;
	width:					500px; }
	
	#login_email #try_again {
		display:				block;
		font-size:				1.5em;
		font-weight:			bold;
		text-align:				center; }

body.merge #merge_div

/* basic page */

#basic label {
	width:					20%; }

/* contact page */

#contact { }

	#contact label {
		width:					25%; }

/* calendar page */

#calendar_tabs br {
	clear:					both; }

#calendar_tabs p {
	margin:					0.1em 0;
	padding:				0.3em 0; }
	
	#calendar_tabs p.controls {
		padding:			1em 0; }
	
	#calendar_tabs p.description {
		color:					#0060b6; }
	
	#calendar_tabs .subdesc { }
	
	#calendar_tabs .full {
		margin-left: 		0; }

#calendar_tabs .toggle_editor_html_button_link {
	margin-top:	-5px; }

#calendar_tabs label {
	width:					30%; }

/* files page */

#files label {
	width:					40%; }

#files #edit_form label {
	width:					25%; }

#files #link_form label {
	width:					15%; }

/* home page */

#home label {
	width:					32%; }

/* image page */

#imageupload label {
	width:					40%; }

#imageupload .subdesc {
	margin-left:			40%; }

/* music */

#music_options_modal {
	text-align:				left; }

/* news page */

#news label {
	width:					20%; }

/* photos page */

#photos label {
	width:					100%; }

/* splash page */

#index label {
	width:					28%; }

/* Calendar Settings */

#calendar_options_modal {
	padding: 7px 10px 0px 10px;
	background-color: #ffffff;
}

#calendar_options_modal h2 {
	background:	url(../img/heading_slice.png) 0 0 repeat-x; }

#calendar_options_modal .blurb {
	margin-top: 40px;
	text-align: left;
}

#calendar_options_modal fieldset {
	text-align: left;
	min-height: 100px;
}

/* Photo Gallery Settings */

#photos_options_modal {
	padding: 7px 10px 0px 10px;
	background-color: #ffffff;
}

#photos_options_modal .blurb {
	margin-top: 40px;
	text-align: left;
}

#photos_options_modal fieldset {
	text-align: left;
	min-height: 80px;
}


/* venues page */

#venues {
	padding:				10px;
	text-align:				left; }
	
	#venues h2 span {
		background:			none; }
	
	#venues label {
		width:					25%; }

#calendar_modal {
	text-align:				left; }


/* Website and Members */

#submenu {
	border-right: 			2px solid #b5dce5;
	float: 					left;
	font: 					normal 1.2em "arial black", impact, sans-serif;
	left:					0;
	margin: 				0;
	position:				absolute;
	width: 					215px; }
	
	#submenu ul { 
		margin: 			0 20px 0 0; }
		
		#submenu ul li {
			list-style: 			none;
			padding-left: 			10px; }
			
			#submenu ul li a {
				border-bottom: 			2px solid #b5dce5;
				color: 					#0060b6;
				display: 				block;
				font-weight: 			normal !important;
				line-height: 			1.5em;
				padding: 				4px 0 4px 7px;
				text-decoration: 		none;
				width: 					100%; }
				
				#submenu ul li a:hover {
					color: 					#ef5e45; }
				#submenu ul li a:current {
					color: 					#0060b6; 
					text-transform: 		uppercase; }

#subsubmenu li { 
	font-size: 				0.9em; } 

.website #contentbody, .members #contentbody {
	margin: 				0 0 25px 220px;
	padding: 				0 0 0 30px;
	width: 					710px; /* needed for layout, and IE6 needs it to cure 3px text jog by giving hasLayout */ }
	
	.website #contentbody h2, .members #contentbody h2 {
		margin-top: 		0; /* IE6 and IE7 need this because the won't collapse margin-top like they should */ }


body.publish #contentbody, body.merge #contentbody {
	margin:					0 auto;
	position:				relative;
	text-align:				center;
	width:					600px; }

#merge_div {
	margin:					0 auto;
	text-align:				left; }
	
	#merge_div h1 {
		border-bottom:			1px solid #ccc;
		padding-bottom:			5px; }
	
	#merge_div dl {
		border-bottom:			1px solid #ccc;
		padding-bottom:			1.5em;
		padding-left:			70px; }
		
		#merge_div dl.big1 {
			background: url(../img/big1.jpg) 0 0 no-repeat; }
		
		#merge_div dl.big2 {
			background: url(../img/big2.jpg) 0 0 no-repeat; }
		
		#merge_div dl.big3 {
			background: url(../img/big3.jpg) 0 0 no-repeat; }
	
	#merge_div dd {
		margin-left:			0;
		padding-left: 			0; }


body.settings #contentbody {
	margin:					0 auto;
	position:				relative;
	text-align:				center;
	width:					600px; }

#settings_div {
	margin:					0 auto;
	text-align:				left; }
	
	#settings_div h2 {
		margin-bottom: 		0;
		padding-bottom:		0; }
	
	#settings_div form {
		margin-top:			0;
		padding-bottom:		1em;
		padding-top:		0; }



/* Common graphic elements
------------------------------------------------------------------------------*/

/* Buttons */

.buttons {
	display: 				block;
	font: 					bold 1em "Trebuchet MS", "Lucida Grande", sans-serif;
	text-align: 			center;
	text-decoration: 		none !important;
	text-transform: 		uppercase; /* for form buttons, safari ignores this so it must be uppercase in the html */ }

/* Lists */

ul.editlist, ol.editlist, ul#add2gallery {
	border-top: 			1px solid #ccc;
	margin: 				6px 0 0 0;
	min-height: 			20px; }

ul.editlist li, ol.editlist li, ul#add2gallery li {
	border-bottom: 			1px solid #ccc;
	line-height: 			18px;
	margin-bottom: 			2px;
	padding: 				8px 0; }

ul.editlist input {
	border: 				0; }

ul.editlist a img, ul#add2gallery a img {
	padding: 				0 4px; }

ul.editlist a:hover img, ul#add2gallery a:hover img {
	background-color: 		yellow; }

/* Next/Back Links */

#next, #back {
	font-weight: 			bold;  }
	
	#next a, #back a {
		color:					#0060b6;
		display: 				block;
		font-size: 				1.2em;
		height: 				32px;
		line-height: 			2em;
		margin: 				30px 0 40px 0; }

#next {
	float: 					right;
	text-align: 			right; }
	
	#next a {
		background: 			transparent url(../img/arrow_fwd.gif) no-repeat right top;
		padding-right: 			36px; }
		
		#next a:hover {
			background-position:	right bottom;
			text-decoration: 		none; }

#back {
	clear:					both;
	float:					left;
	text-align: 			left; }
	
	#back a {
		background: 			transparent url(../img/arrow_bck.gif) no-repeat left top;
		padding-left: 			36px; }
		
		#back a:hover {
			background-position:	left bottom;
			text-decoration: 		none; }

/* Rounded corners */

	/* A different, float-based technique is used for IE6, which has trouble with this one due to rounding 
		errors. The IE6 version is hand-tweaked using negative margins. See hostbaby-ie6.css. */

.corners {
	background-repeat: 		no-repeat;
	font-size: 				0px;
	position: 				absolute; }

.nw {
	background-position: 	top left;
	left: 					0;
	top: 					0; }

.ne {
	background-position: 	top right;
	right: 					0;
	top: 					0; }

.sw {
	background-position: 	bottom left;
	bottom: 				0;	
	left: 					0; }

.se {
	background-position: 	bottom right;
	bottom: 				0;
	right: 					0; }

#overview .corners {
	background-image: 		url("../img/overviewcorners.gif");
	height: 				14px;
	width: 					14px; }

.help dl#address .corners {
	background-image: 		url("../img/helpcorners.gif");
	height: 				14px;
	width: 					14px; }

.signup .moreinfo .corners {
	background-image: 		url("../img/signupcorners.gif");
	height: 				12px;
	width: 					12px; }
	
/* Fancy bubble tooltips */

	/* These are driven by tooltip.js, a jquery-based custom script. When js is disabled, they degrade to
		regular tooltips. */

#tooltip {
	display: 				none;
	position: 				absolute;
	width: 					200px;
	z-index: 				500; }
	
	#tooltip p {
		background: 			#f7f1b2;
		color: 					#333;
		font: 					bold 0.9em Arial, Helvetica, sans-serif;
		line-height: 			1.5;
		margin: 				0;
		padding: 				0 13px;	
		text-align: 			left; }
	
	#tooltip .tiptop, #tooltip .tipbottom {
		background: 			url("../img/tooltip-sprite.gif") top left no-repeat;
		display: 				block;
		font-size: 				1px; /* keeps IE6 from expanding box vertically */ }
	
	#tooltip .tiptop {
		height: 				10px; }
	
	#tooltip .tipbottom {
		background-position: 	bottom left;
		height: 				25px; }

/* Noscript */

	/* NEW!! Before, there wasn't a #safenoscript div and these styles were applied to the actual noscript tag.
		Worked fine in all browsers incl. Opera 9, but it triggered a bug (actually a design flaw in Opera 9.5+. This
		workaround solves it. */

#safenoscript {
	/* can't use borders or padding because in some browsers, they'll always appear */
	background-color: 		#ffffe1;
	color: 					#333;
	display: 				block;
	position: 				relative;
	width: 					100%;
	z-index: 				400; /* needed to position higher than sidebar background */ }

noscript { }

	noscript p {
		font: 					normal 0.9em Arial, Helvetica, sans-serif !important;
		margin: 				0;
		padding: 				4px 10px;
		text-align: 			left !important; }


/* Common features
------------------------------------------------------------------------------*/

.js_required, .hidden {
	display: 				none; }

/* Grouping */

#grouping { 
	margin-top: 			12px; }
	
	#grouping .group_option {
		float:					left; }
	
	#grouping .group_option_separator {
		float:					left;
		margin:					15px 20px 0 20px; }
	
	#grouping .group_remove_unused {
		float:					left;
		margin:					18px 0 0 14px; }

#groups_modal {
	text-align: 			left; }

#groups_modal label {
	width:					100%; }

#rename_group_textbox {
	 width: 				470px; }

#rename_group_button, #move_group_button {
	width:					120px; }

select#group_move_select {
	width:					480px;
	margin:					0px; }

.check_all_or_none {
	margin: 				10px 0px;
	padding-left:			7px; }

.check_all, .check_none {
	color:					#8f0000;
	cursor: 				pointer;
	text-decoration: 		underline; }

.generic_placeholder {
	background-color: 		#cccccc;
	height: 				18px;
	line-height: 			18px; }

.navbar_placeholder {
	background-color: 		#cccccc;
	height: 				30px;
	line-height: 			30px; }

h2#alert {
	font-size: 				1.4em;
	font-weight: 			bold;
	background-color: 		#c7e8f4;
	border: 				1px solid #d31d29;
	color: 					#000;
	text-align: 			center;
	margin: 				4px 0 18px 0;
	padding:				8px 5px;
}


/* !!! End of new style definitions. Everything below this point is recycled from the previous hostbaby.css !!! */



/* The index page: */

#wordymenu dt {
	font-size: 				1.2em;
	line-height: 			16px;
	margin: 				14px 0 4px 0;
	padding: 				0 0 1px 0; }
	
	#wordymenu dt a {
		display: 				block;
		padding-left:	 		18px; }
		
	#wordymenu dd {
		border-top: 			1px solid #ccc;	
		margin: 				0 0 0 18px;
		padding: 				0; }

/* New Image Bank and Photo Gallery stuff */

.clear { clear: both; float: none; }

.edit_thumb { position: absolute; top: 85px; left: 6px; display: block; width: 100px; text-decoration: none; height: 20px; line-height: 20px; text-indent: -9999px; padding-top: 2px; text-align: center; font-size: 90%; z-index: 2; }
	
	.image_lists .connectedList li:hover .edit_thumb, .edit_thumb:hover { background: url(../img/transparent_link.png) 0 0 repeat; color: #fff; text-indent: 0; }
	
	.edit_thumb:hover { text-decoration: underline; }

.image_lists { float: left; width: 100%; }

.image_lists .connectedList { border: 2px dashed #ccc; float: left; list-style-type: none; margin: 0; padding: 0px 0; width: 100%; }

	.image_lists .connectedList a.image_link { border: 1px solid #fff; display: block; color: #fff; position: relative; }
		
		.edit_thumb .image_lists .connectedList a.image_link, .image_lists .connectedList a.image_link:hover { border: 1px solid #8f0000; }
		
		.image_lists .connectedList a span { display: block; position: absolute; height: 20px; line-height: 20px; top: 0; left: 0; width: 100px; font-size: 90%; text-indent: -9999px; }
		
			.image_lists .connectedList a.image_link:hover span { background: url(../img/transparent_link.png) 0 0 repeat; color: fff; text-indent: 0; }

	.image_lists .connectedList li { float: left; width: 102px; padding: 5px; text-align: center; position: relative; z-index: 1; }
	
		.image_lists .connectedList li.empty { height: 136px; line-height: 136px; width: 0; padding: 0; margin: 0; }
	
	.ui-state-highlight, .ui-state-highlight a.image_link { display: block; height: 100px; width: 100px; background: green; border: 1px solid green; }

#images_area .connectedList { background-color: #e9e9e9; border-color: #aaa; }

#images_area .connectedList li { background: none; }


/* Calendar */

/* pre-emptively adding this for the new toggle editor width, using colspan="2" in all edit view files that have the editor. */
.toggle_editor_td, .toggle_editor_th {
	padding: 2px;
	text-align: left;
}

.toggle_editor_link {
	color: #8f0000;
	float: right; }

.toggle_editor_html_button_link {
	color:#888;
	cursor: pointer;
	margin-top: -10px;
	margin-left: 3px;
	text-align: right;
}

/* These classes used to differentiate the javascript enabled calendar edit form from the "noscript" version */
.calendar_td, .calendar_th {
	padding: 2px;
	text-align: left;
}

.calendar_readonly {
	background-color: #eeeeee;
}

.calendar_width_270px {
	width: 270px;
}

.calendar_width_120px {
	width: 120px;
}

.calendar_width_50px {
	width: 50px;
}

.calendar_width_290px {
	width: 290px;
}

.calendar_textarea {
	width: 390px;
}

/* Venues */

#venues #name, #v_name {
	width: 270px;
}
#venues #address, #v_address {
	width: 270px;
}
#venues #city, #v_city {
	width: 270px;
}
#venues #state, #v_state {
	width: 120px;
}
#venues #zip, #v_zip {
	width: 50px;
}
#venues #country, #v_country {
	width: 270px;
}
#venues #url, #v_url {
	width: 270px;
}
#venues #phone, #v_phone {
	width: 270px;
}

/* Navbar */
#navbar .navbar_layout {
	display: -moz-inline-stack; display: inline-block; 
	padding: 3px 0px 3px 0px;
}

#navbar .column_1 {
	width: 50px;
	margin-left: 5px;
}

#navbar .column_2 {
	width: 155px;
}

#navbar .column_3 {
	width: 160px;
}

#navbar .column_4 {
	width: 80px;
}

#navbar .column_5 {
	width: 80px;
}

#navbar .navbar_showname {
	width: 88px;
}

#navbar input:focus {
	border: 1px solid #5d885d;
	border: 1px dotted #5d885d;
	background-color: #ffffe3;
}

/* Music Settings */

#music_options_modal {
	padding: 7px 10px 0px 10px;
	background-color: #ffffff;
}

#music_options_modal #music_options_tab_menu,
#music_options_modal #tab1,
#music_options_modal #tab2 {
	font-size: 1.2em;
	text-align: left;
	cursor: pointer;
}

#music_options_modal #music_options_tab_menu {
	margin: 0px 0px 10px 0px;
}

#music_options_modal .blurb {
	margin-top: 5px;
	text-align: left;
}

#music_options_modal fieldset {
	text-align: left;
	min-height: 320px;
}

#music_options_modal #tooltip {
	position: absolute;
	left: 88px;
	width: 250px;
	border: 1px solid #333;
	background: #f7f5d1;
	padding: 2px 5px;
	color: #333;
	display: none;
}

#color_xspf {
	margin-left: 30px;
	width: 50px;
}

#color_picker_block_xspf,
#color_picker_block_wp {
	margin-left: 0px;
}

#music_options_modal #color_picker_wp,
#music_options_modal #color_wp {
	margin-left: 85px;
}

#music_options_modal #color_picker_xspf {
	margin: 15px 10px 0px 5px;
	display: -moz-inline-stack;
	display: inline-block;
	width: 150px;
}

#music_options_modal table,
#music_options_modal td {
	border: none;
}

#music_options_modal #flash_player_preview_xspf,
#music_options_modal #flash_player_preview_wp {
	height: 30px;
	width: 325px;
	padding-top: 5px;
}

#music_options_modal .transparent_overlay {
	width: 335px;
	height: 25px;
	position: absolute;
	margin-top: 25px;
	left: 22px;
	z-index: 2;
}

#music_options_modal #playlist_track_order {
	/*
	color: #315791;
	*/
	text-align: left;
}

#music_options_modal .sortable_track {
	padding-left: 10px;
	color: #315791;
	font-weight: normal;
	text-decoration: none;
	cursor: pointer;
}

#music_options_modal .music_options_tabs {
	height: 25px;
	padding: 0px 10px 0px 10px;
	text-align: center;
	vertical-align: text-bottom;
	background: #cccccc;
}

.ui-widget-header { color: #222; background: url(../img/heading_slice.png) 0 0 repeat-x; border-color: #00aeef; }

/* swfupload */

.progressWrapper {
	/*
	width: 357px;
	*/
	width: 535px;
	overflow: hidden;
}

.progressContainer {
	margin: 5px;
	padding: 4px;
	border: solid 1px #E8E8E8;
	/*
	border: solid 1px #000000;
	background-color: #F7F7F7;
	*/
	background-color: #00AEEF;
	overflow: hidden;
}

/* Message */
.message {
	margin: 1em 0;
	padding: 10px 20px;
	border: solid 1px #FFDD99;
	background-color: #FFFFCC;
	overflow: hidden;
}

/* Error */
.progressRed {
	border: solid 1px #B50000;
	background-color: #FF0000;
	/*
	background-color: #FFEBEB;
	*/
}

/* Current */
.progressGreen {
	border: solid 1px #DDF0DD;
	background-color: #EBFFEB;
}

/* Complete */
.progressBlue {
	border: solid 1px #CEE2F2;
	/*
	background-color: #F0F5FF;
	*/
	background-color: #00AEEF;
}

.progressName {
	font-size: 8pt;
	font-weight: bold;
	color: #ffffff;
	/*
	color: #555;
	font-weight: 700;
	width: 323px;
	*/
	width: 500px;
	height: 14px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
}

.progressBarInProgress,
.progressBarComplete,
.progressBarError {
	font-size: 0;
	width: 0%;
	height: 2px;
	background-color: blue;
	margin-top: 2px;
}

.progressBarComplete {
	width: 100%;
	background-color: green;
	visibility: hidden;
}

.progressBarError {
	width: 100%;
	background-color: red;
	visibility: hidden;
}

.progressBarStatus {
	margin-top: 2px;
	width: 337px;
	font-size: 7pt;
	font-family: Arial;
	text-align: left;
	white-space: nowrap;
}

a.progressCancel {
	font-size: 0;
	display: block;
	height: 14px;
	width: 14px;
	background-image: url(../js/swfupload/cancelbutton.gif);
	background-repeat: no-repeat;
	background-position: -14px 0px;
	float: right;
}

a.progressCancel:hover {
	background-position: 0px 0px;
}

/* -- SWFUpload Object Styles ------------------------------- */
.swfupload {
	vertical-align: top;
}


/* 
 * ---------------------------------------
 * Social Media Settings
 * ---------------------------------------
 */
 #
 
#sm_settings_modal {		text-align: 	left; 			}
#iFrameWrapper { height: 100%; width: 100%; }
.sm_state_column        {	width:			18%; 			}
.blogcomments_column 	{	width:			12%; 			}
.editlist td 			{	padding:		4px 2px;		}
.entrydescription 		{	width:			69%; 			}
.draftstatus {
	width:					1%;
	color:					red;
	}
.bloglist_iconstyle {
	font-size:				90%;
	text-align:				center;
	} 
.blog_legend {
	font-size:				90%;
	padding:				2px 0;
	text-align:				right;
	}
.blog_legend .warning {
	color:					red;

}


#style_gfx_tip {
	position:absolute;
	border:1px solid #ccc;
	width: 180px;
	text-align: center;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
}