/*  
	Coolbox Style Sheet
	--------------------------------------------------------------

	admin.css

	--------------------------------------------------------------
*/

/* 	--------------------------------------------------------------
	zero out all styles except form elements, which are left to default */

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

/* define focus styles */
:focus {
	outline: 0;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* Clearing bug fix */
.clear:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clear {
    display: inline-block;
}
html[xmlns] .clear {
    display: block;
}
* html .clear {
    height: 1%;
}

/*	end zero out
	-------------------------------------------------------------- */

/* 	--------------------------------------------------------------
	basic body styles */

html, body {
	height: 100%;
}
	
body {
	text-align: center;
	background-color: #DDF0EE; /* reveal under bottom of footer */ 
	font-size: 1em;
	font-family: Arial,Tahoma,Helvetica,sans-serif;
	line-height: 1.25em;
}

h1 {
	background-color: #44A3DB;
	margin-bottom: 5px;
	padding: 0 10px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 2em;
}

h2 {
	font-weight: normal;
}

a {
	color: #333333;
	text-decoration: underline;
}
	a:hover, a:focus {
		background-color: #CCCCCC;
		color: #000000;
		text-decoration: none;
	}


/* keep consistent spacing with sub and sup:
   @see http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=5341 */

sup,sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

/*	end basic body styles
	-------------------------------------------------------------- */

/*	useful repeated generic styles
	-------------------------------------------------------------- */


.content { /* content is a bit special as is used in header, footer and main */ 
	width: 980px;
	text-align: left;
	margin: auto;
	position: relative;
}

.hidden {
	display: none;
}


	p.right {
		text-align: right;
		font-size: 0.8em;
	}
	
		p span.left {
			float: left;	
		}
	
		p span.right {
			float: right;
			font-size: 0.8em;	
		}

	
/* 	--------------------------------------------------------------
	set up the styles used on every page */		


/* Header & Footer */

#header {
	background-color: #DDF0EE;
	height: 97px;
	width: 100%;
	border-bottom: 3px solid #44A3DB;
	text-align: center;
	color: #6A7065;
}

	#header .content {
		height: 97px;
	}

	#header h2 {
		position: absolute;
		left: 10px;
		bottom: 15px;
		font-size: 1.5em;
		font-weight: bold;
	}
		#header h2 span {
			display: block;
			font-size: 0.8em;
			color: #44A3DB;
			padding-bottom: 0.2em;
		}
		
	#header p {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 0.8em;
	}

	#header a, #footer a {
		color: #888888;
	}
		#header a:hover, #header a:focus, #footer a:hover, #footer a:focus {
			background-color: #CCCCCC;
			color: #000000;
		}

#footer  {
	color: #6A7065;	
	border-top: 2px solid;
	min-height: 100px; /* fade is 100px high */
}

	#footer .content {
		background: url('../images/powered_by_coolbox.gif') top right no-repeat;
		min-height: 67px; /* powered by sterling image is 67px high */
	}

		#footer .content h2 {
			font-size: 1em;
			font-weight: bold;
			padding-top: 0.5em;
		}

/* login */

#login.content {
	background-color: #fff;
	border: 3px solid #ccc;
	margin-top: 50px;
	padding: 10px;
	width: 805px;
}
		
	#login.content a.forgotten-link {
		text-decoration: none;
		color: #ccc;
	}
		#login.content a:hover.forgotten-link {
			color: #000;
		}
	
	#login.content p {
		margin: 0.6em 0;
	}

	#login form fieldset input[type="text"] {
		width: 33%;
	}


/* main */

#main {
	background: url('../images/stripe_bgd.gif');
}


	/* primary */
	
	#primary {
		float: right;
		width: 805px;
		background-color: #FFFFFF;
		margin-top: -10px;
		padding: 5px;
		margin-bottom: 10px;
	}
	
		#primary .box {
			border: 1px solid #F1F1F1;
			padding: 0 9px;
			margin: 5px 0;
		}
		
		#primary p {
			margin: 0.6em 0;
		}

			#primary div.confirmation p {
				border: 1px solid #FFCC33;
				padding: 5px 9px;
				background-color: #FFFFCC;
				color: #FFCC00;
			}
			
				#primary div.confirmation p.success {
					border: 1px solid #336600;
					background-color: #E3FFD7;
					color: #336600;
				}
			
				#primary div.confirmation p.error { 
					border:1px solid #FF8484;
					background-color: #FFCECE;
					color: #FF0000;
				}
			
		#primary noscript div {
			padding:5px 9px;
			border:1px solid #FF8484;
			background-color: #FFCECE;
			color: #FF0000;
		}
		
		#primary h2 {
			font-size: 1.25em;
			line-height: 1em;
			margin-top: 1.25em;
			margin-bottom: 0;
		}
			#primary h2.first {
				margin-top: 0.5em;
			} 
		
		#primary h3 {
			font-weight: bold;
			margin-top: 1.25em;
			margin-bottom: 0;
		}

		
		#primary ul.desc-list { } /* desc list is the main list style used for display the items */
		
			#primary ul.desc-list li {
				margin: 0.5em 0;
				font-size: 1.2em;
			}
		
				#primary ul.desc-list li span {
					font-size: 0.7em;
					color: #CCCCCC;
					display: block;
				}
		
					#primary ul.desc-list li span a {
						color: #CCCCCC;
					}
						#primary ul.desc-list li span a:hover {
							color: #000000;
					}	
						
		#primary ul.categories { } /* categroies and desc-list are usually on same lists */
		
			#primary ul.categories li {
				border-bottom: 1px dashed #CCCCCC;
				padding-bottom: 5px;
			}
				#primary ul.categories li:last-child {
					border-bottom: none;
				}
		
				#primary ul.categories ul li {
					margin-left: 3em;
					border-bottom: none;
					font-size: 1em;
				}

		
		#primary ul.sortable { /* sortable is applied to any list that is sortable */
			min-height: 1em;
		}
		
			#primary ul.sortable li {
				padding: 0.25em 0;
			}
				#primary ul.sortable li img.handle {
					margin-right:0.25em;
					vertical-align: bottom;
				}
					#primary ul.sortable li img.handle:hover {
						cursor:move;
					}

		
		#primary table { } /* tables are used in some of the forms - eg users, and products */
		
			#primary table thead {
				background-color: #E3E3E3;
				font-weight: bold;
			}		
		
			#primary table td, #primary table th {
				padding: 0.4em 0.8em;
			}
			
				#primary table td ul form {
					margin: 0;
					padding: 0;	
				}
					#primary table td ul form fieldset.submit, 
					#primary table td ul form ol, 
					#primary table td ul form ol li, 
					#primary table td ul form button {
						margin: 0;
						padding: 0;
					}
				
				#primary table td ul li {
					float: left;
					padding-left: 1em;
				}

		
		/* form stuff - nb. can in primary, and login */
		form {
			margin-top: 1em;	
		}
		
		form fieldset {
			padding: 0;
			float: left;
			clear: left;
			width: 100%;
			margin: 0 0 1.5em 0;
			padding: 0;
			border-top: 1px solid #000000;
		}

			form fieldset.even {
				background-color: #F3F3F3;
			}
		
			form fieldset.submit {
				float: none;
				width: auto;
				border: 0 none #FFFFFF;
				padding-left: 10em;
				background-color: transparent;
			}

				form form fieldset.submit button {
					padding: 0.5em 1em;
				}
		
			form fieldset.hidden {
				margin:0;
				float: none;
				width: auto;
				padding: 0;
				border: none;
			}

			form fieldset legend {
				margin-left: 1em;
				font-weight: bold;
				padding: 0 5px;
				white-space: normal; /* add fixes to make long legends wrap */
			}
				form fieldset legend span { 
					display: block; /* add fixes to make long legends wrap */
				}
					form fieldset legend span em {
						color: #006600;
						font-size: 0.85em;
						font-style: normal;
						text-transform: uppercase;
					}

			form fieldset label {
				float: left;
				width: 8em;
				margin-right: 1em;
				text-align: right;
			}

				form fieldset label em {
					display: block;
					color: #006600;
					font-size: 0.85em;
					font-style: normal;
					text-transform: uppercase;
				}

				form fieldset label strong {
					display: block;
					color: #C00;
					font-size: 0.85em;
					font-weight: normal;
					text-transform: uppercase;
				}

			form fieldset button {
				font-size: 1em;
				font-family: Arial,Tahoma,Helvetica,sans-serif;
				line-height: 1.25em;
			}
			
			form fieldset textarea {
				width: 80%;
				font-family: Courier New, Courier, monospace;
				font-size: 0.9em;
			}
			
			form fieldset input {}
			
				#primary form fieldset input[type="text"],
				#primary form fieldset input[type="password"] {
					width: 33%;
				}      

			/* nested fieldsets */
			form fieldset fieldset {
				margin-bottom: -2.25em;
				border-style: none;
				background-color: transparent;
				background-image: none;
			}
			
				form fieldset fieldset legend {
					margin-left: 0;
					padding: 0;
					font-weight: normal;
				}
					
					form fieldset fieldset legend span strong {
						color: #C00;
						font-size: 0.85em;
						font-weight: normal;
						text-transform: uppercase;
					}
			
				form fieldset fieldset label {
					float: right;
					width: 35em;
					text-align: left;
					clear: both;
				}
			
				form fieldset fieldset input {
					float: right;
					width: auto;
					margin-right: 0.5em;
					margin-top: 0.25em;
				}

				form fieldset fieldset ol {
					position: relative;
					top: -1.5em;
					margin: 0 0 0 7em;
					padding: 0;
				}			
					form fieldset fieldset ol li {
						padding-bottom: 0.2em;	
					}
			/* end of nested fieldsets */	
			
			form fieldset ol {
				padding: 1em 1em 0 1em;
				list-style: none;
				margin: 0;
			}
			
				form fieldset ol li {
					margin: 0;
					float: left;
					clear: left;
					width: 100%;
					padding-bottom: 1em;
				}
		
					form fieldset ol li div.help {
						margin-left: 11em;
						font-size: 0.80em;
					}
					
						form fieldset ol li div.help p {
							color: #ccc;
							margin: 0;
							padding: 0;
						}

					/* the alias helper specific stuff */
					#primary form fieldset ol li.permalink-helper {
						margin-top: -2.5em;
						width: 80%;
						margin-left: 13em;
						font-size: 0.7em;
						
					}
				
						#primary form fieldset ol li.permalink-helper label {
							font-weight: bold;
							text-align: left;
							width: auto;
							line-height: 2.1em;
						}	
							#primary form fieldset ol li.permalink-helper label em {
								display: none;
							}
			
						#primary form fieldset ol li.permalink-helper span#editable-alias {
							color: #47A5DE;
							display:none;
						}
						
						#primary form fieldset ol li.permalink-helper span#edit-alias {	}
						
						#primary form fieldset ol li.permalink-helper input#alias_sample {
							width: auto;
						}
						
						#primary form fieldset ol li.permalink-helper span#edit-buttons { 
							display:none;
						}
			
							#primary form fieldset ol li.permalink-helper span#edit-buttons a {
								display: inline-block;
							
							}
								#primary form fieldset ol li.permalink-helper span#edit-buttons a img {
								
								}


						/* the tag helper specific stuff */
						#primary form fieldset fieldset#tags ol li#tag-prompter, 
						#primary form fieldset fieldset#tags ol li#add-tag {
							margin-top: 0.5em;
						}
						
					
							#primary form fieldset fieldset#tags ol li .tag-helper {
								float: right;
								width: 35em;
								text-align: left;
								clear: both;
								margin-right: 1em;
								margin-top: 0em;
							}
							
								#primary form fieldset fieldset#tags ol li .tag-helper label { }
					
									#primary form fieldset fieldset#tags ol li .tag-helper label a {
										font-size: 0.8em;
										text-decoration: underline;
									}
										#primary form fieldset fieldset#tags ol li .tag-helper label a:hover {
											text-decoration: none;
										}
										
										#primary form fieldset fieldset#tags ol li .tag-helper label a img {
											height: 12px;
											width: 12px;
										}							
						
								#primary form fieldset fieldset#tags ol li .tag-helper input {
									float: left;
								}
									#primary form fieldset fieldset#tags ol li .tag-helper input#rename_tag, 
									#primary form fieldset fieldset#tags ol li .tag-helper input#new_tag {
										margin-top: 0;
									}		
								
								#primary form fieldset fieldset#tags ol li .tag-helper #add-tag {
									display: none;
								}


		/* Single fieldset forms */
		
		div.single-fieldset form > fieldset {
			border: none;
			margin-bottom: 0;
		} 
		
			div.single-fieldset form > fieldset > legend {
				display: none;	
			}   
			
			div.single-fieldset form fieldset.submit {
				margin: 0;
			} 

		
		/* form error summary */
		div.error {
			border-top: 2px solid red;
			border-bottom: 2px solid red;
			background-color: #f3f3f3;
			padding: 0 1em;
			margin-bottom: 0.5em;
		}
		
			div.error p {
		  		font-weight: bold;
			}
			
			div.error ul {
				margin: 0.5em;
				margin-left: 2em;
			}
				div.error ul li {
					list-style: square outside;
				} 
					


/* are dl's used anywhere? */
dl {
}
	dt {
		margin: 1em 0;
		font-weight: bold;
	}
 		
		dt span {
			font-weight: normal;	
		}
		
		dl.help dt span a {
			text-decoration: none;
		}

	dd {
		margin: 1em;
		display: none;
	}
/* ??? */
	
	/* secondary */
	
	#secondary {
		float: right;
		width: 155px;
		padding-bottom: 10px;
	}
		
		#secondary .box {
			border: 2px solid #44A3DB;
			background-color: #DDF0EE;
			color: #6A7065;
			margin-top: 10px;
		}
		
			#secondary .box.nav {
				border-top: none;
			}
		
			#secondary .nav a {
				border-top: 2px solid #44A3DB;
				display: block;
				padding: 5px;
				font-weight: bold;
				font-size: 0.90em;
				color: #6A7065;
				text-decoration: none;
			}
			
				#secondary .nav a:hover, #secondary .nav a:focus, #secondary .nav a.cur {
					color: #363636;
					background-color: #ECFAFF;
				}


/*	end every page setup
	-------------------------------------------------------------- */
	
/* 	--------------------------------------------------------------
	module specific styles */	


/* users module */

#primary form fieldset fieldset#roles {
	margin-bottom: -0.25em;
}	
	#primary form fieldset fieldset#roles ol {
		top: 0.5em;
	}
	
	
/* gallery module */

div.image-list {
	padding: 10px 0;
}

	div.image-preview {
		float: left;
		width: 150px;
	}

		div.image-preview img {
			max-width: 150px;
			max-height: 115px;
		}
	
	div.image-details {
		float:left;
		margin-left: 20px;
	}
	

		div.image-details span {
			color:  #CCCCCC;
		}