/*------------------------------------------------------------*/
/* Perfect Layout                                             */
/*   Version 1.0 Beta                                         */
/*                                                            */
/*   Created by Dwight House                                  */
/*   http://perfect.dwightdesign.com/                         */
/*------------------------------------------------------------*/

/*------------------------------------------------------------*/
/* constructors.css                                           */
/* Handles the special constructors like columns, images, and */
/*    blockquotes inserting. This stylesheet is optional, but */
/*    highly recommended.                                     */
/*------------------------------------------------------------*/

/*------------------------------------------------------------*/
/* Image constructors.                                        */
/*------------------------------------------------------------*/

/* By default, an image will float left with the appropriate padding (see "Global Styles" heading in styles.css). */
/* Use when the clearing effect is desired on left aligned images. */
.leftImage
{
	padding:0 10px 10px 0;
	clear:left;
	float:left;
}

/* Use for right aligned images. */
.rightImage
{
	padding:0 0 10px 10px;
	clear:right;
	float:right;
}

/* Use with larger images or if text wrapping is not desired. */
.centerImage
{
	margin:0 auto;
	padding:0 0 1em 0;
	display:block;
	float:none;
}

/* Force top padding on an object. */
.topPadding
{
	padding-top:1em;
}

/*------------------------------------------------------------*/
/* Floating containers.                                       */
/*------------------------------------------------------------*/

/* The following containers assume images are 150px wide (150px wide image + 10px of padding = 160px wide constructor). */
/* Left floated container. */
.leftContainer
{
	padding:0 10px 0 0;
	clear:left;
	float:left;
	width:150px;
}

/* Right floated container. */
.rightContainer
{
	padding:0 0 0 10px;
	clear:right;
	float:right;
	width:150px;
}

/* Container paragraph styles. */
#content .leftContainer p, #content .rightContainer p
{
	padding:5px 0 5px 0;
	text-align:center;
	font-style:italic;
}

/* Container image styles. */
.leftContainer img, .rightContainer img
{
	padding:0 0 5px 0;
}

/* Container header styles. */
#content .leftContainer h3, #content .rightContainer h3
{
	padding:0 0 0.3em 0;
	text-align:center;
}

/* Pullquote styles (for use with containers). */
#content .leftContainer blockquote, #content .rightContainer blockquote
{
	padding:0;
}

#content .leftContainer blockquote p, #content .rightContainer blockquote p
{
	text-align:left;
}

/*------------------------------------------------------------*/
/* Rounded corner box constructor.                            */
/*------------------------------------------------------------*/

.corners
{
	margin-bottom:1em;
	position:relative;
	clear:both;
}

.cornersPadding
{
	padding:20px;
}

.type1
{
	background:url(../images/layout/highLines.png) #505050;
	color:#fff;
}

.type2
{
	background:url(../images/layout/blueSquares.png) #505050;
	color:#fff;
}

/* Universal rounded corner code. */
.tl
{
	position:absolute;
	top:0;
	left:0;
	height:18px;
	width:18px;
	background:url(../images/layout/topLeft.png) no-repeat;
}

.tr
{
	position:absolute;
	top:0;
	right:0;
	height:18px;
	width:18px;
	background:url(../images/layout/topRight.png) no-repeat;
}

.bl
{
	position:absolute;
	bottom:0;
	left:0;
	height:18px;
	width:18px;
	background:url(../images/layout/bottomLeft.png) no-repeat;
}

.br
{
	position:absolute;
	bottom:0;
	right:0;
	height:18px;
	width:18px;
	background:url(../images/layout/bottomRight.png) no-repeat;
}

/*------------------------------------------------------------*/
/* Columns constructors.                                      */
/*------------------------------------------------------------*/

.half
{
	clear:both;
	width:100%;
}

.half .leftColumn
{
	float:left;
	width:49%;
}

.half .rightColumn
{
	float:right;
	width:49%;
}

/*------------------------------------------------------------*/
/* Hoverbox image gallery constructors and styles.            */
/*------------------------------------------------------------*/

/* Hoverbox was created by Nathan Smith (http://sonspring.com/journal/hoverbox-image-gallery). */

.imageGalleryContainer
{
	margin:0 auto;
	width:98%;
	padding:0 0 1em 0;
}

.hoverbox
{
	cursor:default;
	list-style:none;
}

.hoverbox a
{
	cursor:pointer;
}

.hoverbox a .preview
{
	display:none;
}

.hoverbox a:hover .preview
{
	display:block;
	position:absolute;
	top:-33px;
	left:-45px;
	z-index:1;
}

.hoverbox img
{
	background:#fff;
	border-color:#aaa #ccc #ddd #bbb;
	border-style:solid;
	border-width:1px;
	color:inherit;
	padding:2px;
	vertical-align:top;
	width:100px;
	height:75px;
}

.hoverbox li
{
	background:#eee;
	border-color:#ddd #bbb #aaa #ccc;
	border-style:solid;
	border-width:1px;
	color:inherit;
	display:inline;
	float:left;
	margin:3px;
	padding:5px;
	position:relative;
}

.hoverbox .preview
{
	border-color:#000;
	width:200px;
	height:150px;
}

/*------------------------------------------------------------*/
/* Forms styling.                                             */
/*------------------------------------------------------------*/

/* Forms positioning. */
.formRow
{
	width:100%;
	clear:both;
	font-size:1em;
}

.formLabel
{
	padding-bottom:1em;
	float:left;
	clear:both;
	font-weight:bold;
	text-align:left;
	width:150px;
}

.formElement
{
	margin-left:150px;
	padding:0 0 1em 10px;
}

/* Input boxes of all kinds resize with the window. */
.formElement input, .formElement textarea, .formLabel input
{
	padding:0.2em;
	width:90%;
	background:#f9f9f9; /* So you can see the bottom and right sides in Firefox. */
}

.formElement textarea
{
	margin-bottom:1em;
	height:150px;
}

.formElement select
{
	max-width:90%; /* At this time, Safari can't recognize max-width on a select element, so know that really long options in a dropdown will expand the dropdown horizontally as far as necessary. */
}

/* Checkboxes and radio buttons need a fixed width, so each one's description can be just to the right. */
.selectors input
{
	padding:0;
	width:auto;
}

/* Positioning for buttons and other non-inputs. */
.moveOver
{
	padding-left:160px;
	clear:both;
}

/* Button styles. */
button
{
	margin-bottom:1em;
	padding:0.3em 0.8em;
}