/*************************************************************
**															**
**	Styles for supersuper! media - supersupermedia.com		**
**															**
**	February 2009 - Drew Loomer								**
**															**
**	drew@supersuperthings.com								**
**															**
*************************************************************/


/* Broad Statements */

body
{
	background-color:				#202326;
	color:							#fff;
	font-family:					sans-serif;
	font-size:						12px;
	margin:							0px;
	padding:						0px;
}





/* mainDiv - This centers the page and everything is included inside of it. */

#mainDiv
{
	margin:							0px;
	padding:						0px;
	width:							100%;
}






/* Banner - Links and Logo Stuff */

#bannerDiv
{
	background-image:				url(../images/ssm_banner_loop.jpg);
	background-repeat:				repeat-x;
	font-size:						14px;
	height:							57px;
	margin:							0px;
	padding:						0px;
	width:							100%;
}



#bannerContent
{
	font-size:						14px;
	height:							52px;
	margin-left:					auto;
	margin-right:					auto;
	padding:						0px;
	width:							900px;
}



#linksDiv
{
	float:							left;
	margin-left:					20px;
	vertical-align:					middle;
	z-index:						2;
}


.bannerLink
{
	color:							#fff;
	float:							left;
	padding-left:					10px;
	padding-right:					10px;
	padding-top:					18px;
}


.bannerLink a
{
	color:							#fff;
	text-decoration:				none;
}


.bannerLink:hover
{
	background-color:				#4f1406;
}	


.bannerImg
{
	border:							0px;
	float:							right;
	margin-right:					20px;
	margin-top:						4px;
	text-align:						right;
	z-index:						1;
}







/* Background Div - This sets the parchment style background */

#backgroundDiv
{
	background-image:				url(../images/ssm_background.jpg);
	background-repeat:				repeat;
	float:							left;
	color:							#000;
	top:							-20px;
	width:							100%;
}





/* Content Div - This centers everything.  General page styles in here.  Specifics at the bottom. */

#contentDiv
{
	color:							#000;
	margin-left:					auto;
	margin-right:					auto;
	min-height:						300px;
	text-align:						justify;
	top:							-20px;
	width:							900px;
}


.titleImg
{
	margin-left:					40px;
	margin-top:						10px;
}


.centerDiv
{	
	margin-left:					auto;
	margin-right:					auto;
	text-align:						center;
}


.centerImg
{	
	float:							left;
	border:							1px solid #1e3750;
	margin-left:					50px;
}


.contentBox
{
	font-size:						14px;
	line-height:					20px;
	margin-left:					auto;
	margin-right:					auto;
	width:							820px;
}






/* Bottom Bar - This also holds the copyright info */

#bottomBar
{
	background-image:				url(../images/ssm_bottom_loop.jpg);
	background-repeat:				repeat-x;
	float:							left;
	height:							37px;
	padding-top:					25px;
	text-align:						center;
	width:							100%;
}


#bottomBar a
{
	color:							#fff;
	font-weight:					bold;
	text-decoration:				none;
}


#bottomBar a:hover
{
	text-decoration:				underline;
}









	/* Index Page */
	.highlight, .highlight2
	{
		clear:						none;
		float:						left;
		font-size:					15px;
		line-height:				22px;
		margin-bottom:				0px;
		margin-left:				5px;
		margin-top:					5px;
		width:						700px;
	}
	
	.highlight img
	{
		float:						left;
	}
	
	.highlight2 img
	{
		float:						right;
	}

	.highlight .text
	{
		float:						left;
		margin-left:				20px;
		margin-top:					15px;
		text-align:					left;
		width:						480px;
	}
	
	.highlight2 .text
	{
		float:						left;
		margin-right:				20px;
		margin-top:					20px;
		text-align:					right;
		width:						480px;
	}
	
	.highlight2 a
	{
		
	}
	
	.arrowsLeft
	{
		clear:						left;
		float:						left;
		margin-left:				50px;
	}
	
	.arrowsRight
	{
		float:						right;
		margin-right:				50px;
	}






	/* Services Page */	
	
	#servicesSlugDiv
	{
		float:							left;
		margin-bottom:					25px;
		margin-top:						65px;
		z-index:						2;
	}
	
	
	
	#servicesDiv
	{
		background-image:				url(../images/ssm_services_background.jpg);
		color:							#fff;
		float:							right;
		margin-bottom:					5px;
		margin-top:						25px;
		padding:						0px;
		width:							411px;
		z-index:						2;
	}
	
	
	.serviceDiv p
	{
		font-size:						14px;
		line-height:					18px;
		margin:							10px;
		margin-top:						0px;
		text-align:						justify;
	}

	
	.serviceDivThumbs
	{		
		height:							85px;	
		margin-bottom:					5px;
		text-align:						center;
		width:							411px;
	}
		
	
	.serviceThumbsImg
	{
		border:							1px solid #696969;
		cursor:							pointer;
		display:						inline;
		margin-left:					12px;
		margin-right:					12px;
		margin-bottom:					10px;
	}
	
	
	.serviceDivNav
	{
		display:						inline;
		float:							left;
		margin-top:						15px;
		vertical-align:					top;
	}
	
		
	.servicesSlug
	{
		clear:							left;
		float:							left;
		margin:							7px;
	}
	
	

	.littleServicesSlug
	{
		clear:							left;
		margin:							10px;
		margin-bottom:					0px;
	}
	


	/* blackBox - This makes the servicesDiv seem transparent. */
	
	#blackBox
	{
		background-color:				#000;
		display:						none;
		height:							0px;
		position:						absolute;
		text-align:						center;
		width:							411px;
	}
 
	
	.closeBox
	{
		color:							#fff;
		cursor:							pointer;
		float:							right;
		padding:						5px;
	}
	
	
	
	#videoBox
	{
		float:							left;
		text-align:						center;
		width:							411px;
		z-index:						2;
	}
	
	
	#demoBox
	{
		float:							left;
		margin-bottom:					25px;
		margin-left:					25px;
	}


	#flashErrorBox
	{
		margin-top:						40px;
		text-align:						center;
		width:							360px;
	}
	
	.sampleImg
	{
		margin-left:					auto;
		margin-right:					auto;
		margin-top:						10px;
		text-align:						center;
	}
	
	.disclaimer
	{
		clear:							both;
		color:							#333;
		float:							right;
		font-size:						10px;
		padding-bottom:					25px;
		text-align:						center;
		width:							411px;
	}
	
	
	
	
	
	
	
	
	/* Log In Page */
	
	#loginBox
	{
		margin-left:					auto;
		margin-right:					auto;
		margin-top:						20px;
		text-align:						center;
		width:							180px;
	}
	
	
	#loginError
	{
		color:							#511105;
		font-size:						14px;
		font-weight:					bold;
		margin-bottom:					10px;
	}
	
	
	.loginGroup
	{
		margin-bottom:					10px;
	}
	
	
	.loginText
	{
		font-size:						16px;
		font-weight:					bold;
		margin-left:					15px;
		text-align:						left;
	}
	
	
	.loginInput
	{
		border:							1px solid #202326;
		font-size:						14px;
	}
	
	
	
	
	
	
	
	
	/* Admin/Client Pages */
	
	#adminLinks
	{
		float:							left;
		font-size:						14px;
		width:							200px;
	}
	
	.adminLink 
	{
		background-color:				#6a2c1f;
		clear:							left;
		color:							#fff;
		float:							left;
		padding:						5px;
		text-decoration:				none;
		width:							100px;
	}
	
	.adminLink:hover
	{
		background-color:				#4f1406;
	}
	
	#adminContent
	{
		float:							left;
		width:							600px;
	}

	/* The Blog Listings for editing */
	.blogListEven
	{
		background-color:				#aaa;
		float:							left;
	}
	
	.blogListOdd
	{
		background-color:				#ddd;
		float:							left;
	}
	
	.blogListEven a, .blogListOdd a
	{
		color:							#4f1406;
		text-decoration:				none;
	}
	
	.blogListEven a:hover, .blogListOdd a:hover 
	{
		text-decoration:				underline;
	}
	
	.blogListHeading
	{
		background-color:				#202326;
		color:							#fff;
		float:							left;
		font-weight:					bold;
	}
	
	.blogListHeading a
	{
		color:							#fff;
		text-decoration:				none;
	}
	
	.blogListHeading a:hover
	{
		text-decoration:				underline;
	}
	
	.blogListTitle
	{
		float:							left;
		margin-left:					10px;
		width:							150px;
	}
	
	.blogListContent
	{
		float:							left;
		margin-left:					10px;
		width:							300px;
	}
	
	.blogListUser
	{
		float:							left;
		margin-left:					10px;
		width:							75px;
	}
	
	.blogListDate
	{
		float:							left;
		margin-left:					10px;
		width:							75px;
	}
	
	.blogListDel
	{
		float:							left;
		margin-left:					10px;
		text-align:						center;
		width:							50px;
	}
	
	/*The form for entering blogs */
	.blogEntryForm
	{
		float:							left;
		margin-top:						50px;
	}
	
	.blogEntryInput
	{
		clear:							left;
		float:							left;
		margin-bottom:					20px;
		width:							400px;
	}
	
	.blogEntryTitle
	{
		font-size:						16px;
		font-weight:					bold;
	}
	
	.blogEntryButton
	{
		background-color:				#202326;
		border:							0px;
		clear:							left;
		color:							#fff;
		float:							left;
		font-size:						14px;
		margin-right:					15px;
		width:							65px;
	}
	
	
	/* Admin Section - Pages */
	#adminPage
	{
		float:							left;
		width:							500px;
	}
	
	.adminPageForm
	{
		margin-bottom:					20px;
	}
	
	.adminPageTextarea
	{
		height:							300px;
		width:							500px;
	}
	
	.adminPageTitle
	{
		float:							left;
		font-size:						20px;
		font-weight:					bold;
	}
	
	
	/* Admin Section - People */
	.peopleBox
	{
		float:							left;
		margin-top:						20px;
		width:							200px;
	}
	
	.peopleForm
	{
		float:							left;
		width:							550px;
	}
	
	.peopleInput
	{
		margin-bottom:					10px;
		width:							150px;
	}
	
	.peopleTextarea
	{
		float:							right;
		font-size:						14px;
		font-weight:					bold;
		margin-top:						20px;
	}
	
	.peopleTitle
	{
		
		float:							left;
		font-size:						14px;
		font-weight:					bold;
	}
	
	.peopleListEven
	{
		background-color:				#aaa;
		float:							left;
		padding-left:					5px;
		width:							500px;
	}
	
	.peopleListOdd
	{
		background-color:				#ddd;
		float:							left;
		padding-left:					5px;
		width:							500px;
	}
	
	.peopleListEven a, .peopleListOdd a
	{
		color:							#4f1406;
		text-decoration:				none;
	}
	
	.peopleListEven a:hover, .peopleListOdd a:hover 
	{
		text-decoration:				underline;
	}
	
	/* Admin Section - Logins */
	.loginListHeading
	{
		background-color:				#202326;
		color:							#fff;
		float:							left;
		font-weight:					bold;
		width:							700px;
	}
	
	.loginListName
	{
		float:							left;
		padding-left:					5px;
		width:							200px;
	}
	
	.loginListPass
	{
		float:							left;
		width:							200px;
	}
	
	.loginListClient
	{
		float:							left;
		width:							200px;
	}
	
	.loginListAdmin
	{
		float:							left;
		text-align:						center;
		width:							45px;
	}
	
	.loginListDel
	{
		float:							right;
		padding-right:					5px;
	}
	
	.loginListEven
	{
		background-color:				#aaa;
		float:							left;
		width:							700px;
	}
	
	.loginListOdd
	{
		background-color:				#ddd;
		float:							left;
		width:							700px;
	}
	
	.loginListEven a, .loginListOdd a
	{
		color:							#4f1406;
		text-decoration:				none;
	}
	
	.loginListEven a:hover, .loginListOdd a:hover 
	{
		text-decoration:				underline;
	}
	
	
	
	
	
	
	/* About Page */
	.aboutLeft
	{
		float:							left;
		line-height:					20px;
		margin-left:					40px;
		width:							300px;
	}
	
	
	.aboutRight
	{
		background-image:				url(../images/ssm_misc_background.jpg);
		float:							left;
		height:							296px;
		margin-left:					40px;
		padding:						10px;
		text-align:						center;
		width:							350px;
	}
	
	
	.aboutImg
	{
		clear:							both;
	}
	
	
	.aboutImgThumb
	{
		cursor:							pointer;
		margin:							2px;
	}
	
	
	.aboutLinks a
	{
		color:							#4e1305;
	}
	
	
	.aboutLinks a:hover
	{
		text-decoration:				none;
	}
	
	
	#aboutSel
	{
		background-image:				url(../images/ssm_misc_background.jpg);
		float:							left;
		font-weight:					bold;
		
		margin-left:					28px;
		margin-top:						20px;
		padding:						10px;
		text-align:						center;
	}
	
	
	#aboutSel a
	{
		color:							#fff;
		text-decoration:				none;
	}
	
	
	.aboutSelThumb, .aboutSelThumbGray
	{
		clear:							left;
		float:							left;
		margin-bottom:					10px;
	}
	
	
	.aboutSelThumbGray
	{
		filter:							alpha(opacity=50);
		opacity:						.5;
	}
	
	
	.aboutSelThumbGray:hover
	{
		filter:							alpha(opacity=100);
		opacity:						1;
	}
	
	
	.aboutEntry
	{
		float:							left;
		padding-bottom:					20px;
		margin-top:						20px;
	}
	
	
	
	
	
	/* Contact Page */
	
	#contactBox
	{
		background-image:				url(../images/ssm_services_background.jpg);
		color:							#fff;
		float:							left;
		margin-bottom:					10px;
		margin-left:					60px;
		margin-top:						30px;
		padding:						10px;
		width:							355px;
	}
	
	
	#contactBoxSmall
	{
		background-image:				url(../images/ssm_services_background.jpg);
		color:							#fff;
		float:							right;
		margin-bottom:					10px;
		margin-right:					60px;
		margin-top:						30px;
		padding:						10px;
		text-align:						justify;
		width:							200px;
	}	
	
	
	#contactError
	{
		color:							#aa1e1e;
		float:							left;
		font-size:						14px;
		font-weight:					bold;
		margin-left:					10px;
		margin-top:						6px;
	}
	
	
	.contactGroup
	{
		margin-bottom:					10px;
	}
	
	
	.contactText
	{
		background-color:				#e1e1d7;
		border:							0px;
		font-family:					sans-serif;
		font-size:						16px;
		height:							150px;
		text-align:						left;
		width:							350px;
	}
	
	
	.contactInput
	{
		background-color:				#e1e1d7;
		border:							0px;
		color:							#aaaaaa;
		font-family:					sans-serif;
		font-size:						14px;
		margin-bottom:					10px;
		width:							350px;
	}
	
	
	.contactImg
	{
		margin-bottom:					5px;
	}
	
	
	.contactBlurb
	{
		float:							left;
		font-size:						14px;
		margin-left:					45px;
		margin-right:					45px;
		width:							820px;
	}
	
	
	.contactButton
	{
		background-color:				#e1e1d7;
		border:							1px solid #202326;
		color:							#202326;
		font-size:						14px;
	}
	
	#recaptcha_area
	{
		margin-top:						10px;
	}
	
	/* This is the "or" floating between contact options */
	.or
	{
		float:							left;
		margin-left:					72px;
		margin-top:						125px;
	}
	
	
	
		
	
	

	
	/* General Element Styles */
	
	img
	{
		border:							0px;
	}
	
	
	
	
	
	
	/* Headings */
	
	h2
	{
		font-size:						18px;
		font-weight:					bold;
		margin-bottom:					0px;
		margin-top:						0px;
	}
	
	
	h3 
	{
		font-size:						16px;
		font-weight:					bold;
		margin-bottom:					0px;
	}
	
	
	h5 
	{
		font-size:						10px;
		font-weight:					bold;
		margin-bottom:					0px;
		margin-top:						-5px;
	}