/***********************************************
Motionspire.com
Design by: The Wojo Group
Stylesheet: Stephen McKinney
Contact:steve[at]thewojogroup.com
Last Updated: 5/25/08
************************************************/
/***********************************************
TABLE OF CONTENTS

RESETS------------------------------36
MAIN LAYOUT-------------------------68
HEADER------------------------------83								
SIDEBAR-----------------------------110
GALLERY-----------------------------143
ADVERTISEMENTS----------------------146
GLOBAL CLASSES----------------------152
PAGE NUMBERS------------------------193
FORMS-------------------------------234
	INFO----------------------------305
	SECTIONS------------------------326
	FIELD AND LABELS----------------327
	TEXT DIRECTION------------------425
	SIZES---------------------------432
	FIELD FLOATING------------------460
	ERRORS--------------------------484
	REQUIERED-----------------------535
	INSTRUCTIONS--------------------542
	ALT INSTRUCTIONS----------------567
	LABEL LAYOUT--------------------579
	NO INSTRUCTIONS-----------------631
	NO INSTRUCTIONS LABEL LAYOUT----641
LIGHTBOX----------------------------664
************************************************/
/***********************************************
RESETS
************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
img{
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/***********************************************
MAIN LAYOUT
************************************************/

body{
	margin:0;
	padding:0;
	background:#e0f5e4 url(../images/bg.png) top left repeat-x;
	font: 100 12px Helvetica, Arial, sans-serif;
	line-height:14px;	
	color:#555;
}
#container{
	width:985px;
}
/***********************************************
HEADER
************************************************/
#header{
	margin: 30px 40px 30px 26px;
	float: left;
	width: 100%
}
h1 a{
	background:url(../images/searchSprite.png) -354px -57px;
	width:172px;
	height:27px;
	text-indent: -9999px;
	display:block;
	float: left;
	margin-right: 35px
}
#nav{float:left}
#nav li{
	display: inline;
}
#navHome,
#navSubmit,
#blog,
#navContact{
	height:28px;
	display: block;
	background: url(../images/searchSprite.png);
	text-indent: -9999px;
	float: left;
	overflow: hidden;
}
#navHome{
	width:72px;
	background-position: -354px 0;
}
#navHome.on{
	background-position: -354px -28px;
}
#navSubmit{
	width:78px;
	background-position: -426px 0;
}
#navSubmit.on{
	background-position: -426px -28px;
}
#blog{
	width:60px;
	background-position: -504px 0;
}
#navContact{
	width:90px;
	background-position: -564px 0;
}
#navContact.on{
	background-position: -564px -28px;
}
/***********************************************
SIDEBAR
************************************************/
strong{
	font-weight: bold;
}
#sidebar{
	clear: both;
	float:left;
	margin: 0px 26px;
	width:175px;
	color:#524b44;
	display: inline;
}
#itemsPerPageTitle{
	width:175px;
	height:37px;
	text-indent: -9999px;
	background: url(../images/searchSprite.png) -179px 0;
}
#tagsTitle,
#archiveTitle{
	width:175px;
	height:42px;
	text-indent: -9999px;
	background: url(../images/searchSprite.png);
}
#tagsTitle{
	background-position:-179px -79px;
}
#archiveTitle{
	background-position:-179px -37px;
}
#sidebar ul li.subMenu{
	background: url(../images/BGSubmenu.png);
	padding:5px 0;
}
#sidebar a:link,
#sidebar a:visited{
	color:#666;
}
#sidebar a:hover,
#sidebar a:active{
	color:#333;
}
#sidebar strong a:hover{
	color:#524b44;
}
#sidebar li.subMenu li{
	color:#666;
	border-bottom: 1px solid #d7dddd;
	padding:5px 0;
	margin:0 13px;
}
#sidebarBottom{
	background: url(../images/searchSprite.png) -179px -174px;
	font-size: 0px;
	height: 6px;
}
#handle{
	width:15px;
	height:15px;
	background: url(../images/searchSprite.png) -179px -150px;
}
#handle.active{
	background-position: -194px -150px;
}
#track{
	width:158px;
	height:29px;
	background: url(../images/searchSprite.png) -179px -121px;
	margin-left:-5px;
}
/***********************************************
GALLERY
************************************************/
#gallery{
	float:right;
	width:756px;
	display: inline;
}
.item{
	float:left;
	margin:0 10px 10px 0;
	width:171px;
	height:185px;
	padding: 8px 0 0 8px;
	display: inline;
	background: url(../images/searchSprite.png) no-repeat;
}
.item .right{
	width:12px;
}
.preview{
	width:170px;
	height:128px;
}

.description{
	width:160px;
	padding:3px 0;
}
.description h3{
	height: 23px;
}
.creatorContainer{
	height:14px;
}
.creatorContainer a:link,
.creatorContainer a:visited{
	color:#08c;
	font: 11px Lucida Grande, Arial, sans-serif;
}
a.arrow {
  width:12px;
  height:12px;
  background:url(../images/searchSprite.png) -209px -162px no-repeat;
  float:right;
  margin-top:2px
} 
a.arrow:hover {
  background-position: -209px -150px;
}
a.arrow span{
	display: none;
}

/***********************************************
ADVERTISEMENTS
************************************************/
.bannerAd{
	margin: 0 0 11px 8px;
	float: left;
	clear: left;
}
/***********************************************
GLOBAL CLASSES
************************************************/
a:link,a:visited{
	text-decoration:none;
	color:#666;
}
a:hover,a:active{
	text-decoration:underline;
}
h2{
	display:block;
	text-indent: -9999px;
	width: 175px;
	height:43px;
}
#galleryTitle{
	background: url(../images/searchSprite.png) -354px -84px;
}
#submitTitle{
	background: url(../images/BGSubmit.png);
}
#contactTitle{
	background: url(../images/BGContact.png);
}
#pageDesc{
	background: url(../images/BGSubmenu.png);
	padding:5px 13px;
}
h3{
	color:#000;
	font: bold 12px Helvetica, Arial, sans-serif;
	margin-bottom: 6px;
}
h3 a:link,
h3 a:visited{
	color:#000;
	font: bold 12px Helvetica, Arial, sans-serif;
	margin-bottom: 6px;
}
h3 a:hover{
	text-decoration:underline;
}
p{
	margin-top:20px;
}
.left{
	float:left;
}
.right{
	float:right;
}
#contentTop{
	background: url(../images/contentBgTop.png);
	width:743px;
	height: 6px;
	font-size: 0px;
	float: left;
}
#contentBottom{
	background: url(../images/contentBgBottom.png);
	width:743px;
	height: 6px;
	font-size: 0px;
	float: right;
	clear: right;
	margin-left:10px
}
/***********************************************
PAGE NUMBERS
************************************************/
.pages {
    clear: left;
    font-size: 12px;
	font-weight:bold;
	color:#333;
	float:right;
	margin:0 15px 20px 0;
	display: inline;
}
.pages a, .pages span {
    display: inline-block;
    padding: 0.2em 0.5em;
    margin-right: 0.1em;
}
.pages span.current {
    font-weight: bold;
    background: #fff;
    color: #333;
}
.pages a {
    text-decoration: none;
	color:#333;
}
.pages a:hover {
    font-weight: bold;
    background: #fff;
    color: #333;
}
.pages a.nextprev {
    font-weight: bold;
}
/***********************************************
SUBMIT PAGE
************************************************/
#submitFormWrap{
	background: url(../images/contentBg.png);
	width:713px;
	float: left;
	padding:10px 15px 0 15px;
}
#submitForm,
form.submit{
	float: left;
	width:743px;
}
.alertBox{
	width:490px;
	height:130px;
	position: absolute;
	top:200px;
	left:50%;
	margin:0 0 0 -260px;
	background: #fff;
	z-index: 3;
}
.alertMessage{
	color: #333;
	font: bold 16px Helvetica, Arial, sans-serif;
	text-align: center;
	margin-top: 30px;
}
span.success{
	color: #00b577;
}
span.error{
	color: #b00;
}
a.btnAlertClose{
	width: 61px;
	height: 25px;
	background: url(../images/btnAlertClose.gif);
	text-indent: -9999px;
	display: block;
	margin: 0 auto;
	overflow: hidden;
}
a.btnAlertClose:hover{
	background-position: 0 -25px;
}
a.btnAlertClose:active{
	background-position: 0 -50px;
}
#button{
	background: url(../images/btnSubmit.png);
	width: 61px;
	height: 25px;
	border: none;
	text-indent: -9999px;
	cursor: pointer;
}
#button:hover{
	background-position: 0 -25px;
}
#button:active{
	background-position: 0 -50px;
}
/***********************************************
FORMS
************************************************/
/* - - - - - - - - - - - - - - - - - - - - -

Title : Form Foundation
Author : Stephen McKinney (based on Wufoo's Form Foundation by Infinity Box Inc.)

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


.submit li{
width:610px;
background: #fff;
}
form ul{
margin:0;
padding:0;
list-style-type:none;
width:100%;
font-size:100%;
-webkit-padding-start: 0;
}
form li{
margin:0 0 0 15px;
padding:4px 0 2px 0;
position:relative;
clear:both;
width:610px;
}
form li:after, .buttons:after{
content:"."; 
display:block;
height:0; 
clear:both; 
visibility:hidden;
}
form li, .buttons{display: inline-block;}
* html form li, * html .buttons{height: 1%;}
form li, .buttons{display: block;}
* html form li div{
display:inline-block;
}
form li div, form li span{
margin:0 4px 0 0;
padding:0 0 8px 0;
color:#444;
}
form li span{
float:left;
}
form li div.address{
padding-bottom:0;
}
form li div.left{
display:inline;
float:left;
width:47%;
}
form li div.right{
display:inline;
float:right;
width:47%;
}
.clear{
clear:both !important;
}
/* ----- INFO ----- */
.info{
display:inline-block; 
clear:both;
border-bottom:1px dotted #ccc;
margin:0 0 1em 0;
}
.info[class]{
display:block;
}
.info h2{
font-weight:normal;
font-size:160%;
margin:0 0 3px 0;
clear:left;
}
.info p{
font-size:95%;
line-height:135%;
margin:0 0 12px 0;
}
/* ----- SECTIONS ----- */
/* ----- FIELDS AND LABELS ----- */
label.desc{
line-height:150%;
padding:0 0 1px 0;
border:none;
color:#222;
display:block;
font-size:95%;
font-weight:bold;
}
label.choice{
font-size:100%;
display:block;
line-height:1.4em;
margin:-1.55em 0 0 25px;
padding:4px 0 5px 0;
color:#222;
width:90%;
}
form li div label, form li span label{
margin:0;
padding-top:3px;
clear:both;
font-size:9px;
line-height:9px;
color:#444;
display:block;
}
input.text, input.file, textarea.textarea, select.select{
margin:0;
font-size:100%;
color:#333;
}
input.text, textarea.textarea, .firefox select.select{
border-top:1px solid #7c7c7c;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-bottom:1px solid #ddd;
background:#fff url(/images/fieldbg.gif) repeat-x top;
}
input.text, input.file{
padding:2px 0 2px 0;
}
input.currency{
text-align:right;
}
input.checkbox, input.radio{
display:block;
line-height:1.4em;
margin:6px 0 0 3px;
width:13px;
height:13px;
}
textarea.textarea{
font-family:"Lucida Grande", Tahoma, Arial, sans-serif;
}
select.select{
font-family:"Lucida Grande", Tahoma, Arial, sans-serif;
margin:1px 0;
padding:1px 0 0 0;
}
select.select[class]{
margin:0;
padding:1px 0 1px 0;
}
*:first-child+html select.select[class]{
margin:1px 0;
}
.safari select.select{
margin-bottom:1px;
font-size:120% !important;
}
span.symbol{
font-size:115%;
line-height:130%;
}
form li .datepicker{
float:left;
margin:.1em 5px 0 0;
padding:0;
width: 16px;
height: 16px;
cursor:pointer !important;
}
/* ----- BUTTONS ----- */
input.btTxt{
padding:0 7px;
width:auto;
overflow:visible;
}
.buttons{
clear:both;
padding: 10px;
float: left;
}
.buttons input{
font-size:120%;
margin-right: 5px;
}
/* ----- TEXT DIRECTION ----- */
.rtl .info h2, .rtl .info p, .rtl label.desc, .rtl label.choice, 
.rtl div label, .rtl span label, .rtl input.text, 
.rtl textarea.textarea, .rtl select.select, .rtl p.instruct, 
.rtl .section h3, .rtl .section p, .rtl input.btTxt{
direction:rtl;
}
/* ----- SIZES ----- */
.third{
width:32% !important;
}
.half{
width:48% !important;
}
.full{
width:100% !important;
}
input.small, select.small{
width:25%;
}
input.medium, select.medium{
width:50%;
}
input.large, select.large, textarea.textarea{
width:60%;
}
textarea.small{
height:5.5em;
}
textarea.medium{
height:10em;
}
textarea.large{
height:20em;
}
/* ----- FIELD FLOATING -----*/
form li.leftHalf{
width:270px;
border-right: 1px solid #ccc;
display:inline;
margin-bottom: 5px;
} 
form li.rightHalf{
width:295px;
display: inline;
}
li.leftHalf{
clear:left;
float:left;
}
li.rightHalf{
clear:none;
float:left;
margin-left: 30px;
display: inline;
}
li.leftHalf .medium, 
li.rightHalf .medium,
li.leftHalf .small, 
li.rightHalf .small{
width:95%;
}
/* ----- ERRORS ----- */
#errorLi{
width:99%;
margin:0 auto;
background:#fff;
border:1px dotted red;
margin-bottom:1em;
text-align:center;
padding-top:4px;
padding-left:0px;
padding-right:0px;
}
#errorMsgLbl{
margin:7px 0 5px 0;
padding:0;
font-size:125%;
color:#DF0000;
}
#errorMsg{
margin:0 0 .8em 0;
color:#000;
font-size:100%;
}
#errorMsg strong{
background-color: #FFDFDF;
padding:2px 3px;
color:red;
}
form li.error{
display:block !important;
background-color: #FFDFDF !important;
margin:3px 0;
}
form li.error label{
color:#DF0000 !important;
}
form p.error{
color:red;
font-weight:bold;
font-size:10px;
margin:-2px 0 5px 0;
clear:both;
}
.leftLabel p.error, .rightLabel p.error{
margin-left:30%;
padding-left:15px;
}
.noI .leftLabel p.error, .noI .rightLabel p.error{
margin-left:35%;
padding-left:15px;
}
/* ----- REQUIRED ----- */
form .req{
float:none;
color:red !important;
font-weight:bold;
margin:0;
}
/* ----- INSTRUCTIONS ----- */
form li.focused{
margin:0 0 0 0;
padding:4px 0 2px 15px;
position:relative;
clear:both;
width:610px;
}
form li.rightHalf.focused{
	width:295px;
	clear:none;
}
form li.leftHalf.focused{
	width:280px;
}
form .instruct{
position:absolute;
top:0;
left:100%;
z-index:1000;
width:42%;
margin:0 0 0 8px;
padding:8px 10px 9px 10px;
border:1px solid #e6e6e6;
background:#f5f5f5;
line-height:130%;
font-size:80%;
color:#444;
visibility:hidden;
}
form .instruct small{
font-size:105%;
}
form li.focused .instruct, form li:hover .instruct{
visibility:visible;
}
/* ----- LABEL LAYOUT ----- */
.leftLabel li, .rightLabel li, li.leftLabel, li.rightLabel{
width:74% !important;
padding-top:9px;
}
.leftLabel .small, .rightLabel .small{
width:17%;
}
.leftLabel .medium, .rightLabel .medium{
width:35%;
}
.leftLabel .large, .leftLabel textarea.textarea,
.rightLabel .large, .rightLabel textarea.textarea,
.leftLabel .address, .rightLabel .address{
width:64%;
}
* html .leftLabel .small, * html .rightLabel .small{
width:23%;
}
* html .leftLabel .medium, * html .rightLabel .medium{
width:55%;
}
* html .leftLabel .large, * html .leftLabel textarea.textarea,
* html .rightLabel .large, * html .rightLabel textarea.textarea{
width:97%;
}
.leftLabel label.desc, .rightLabel label.desc{
float:left;
width:30%;
margin:2px 15px 0 0;
}
.rightLabel label.desc{
text-align:right;
}
.leftLabel .address, .rightLabel .address{
float:left;
}
.leftLabel p.instruct, .rightLabel p.instruct{
width:27%;
margin-left:5px;
}
.leftLabel .altInstruct .instruct, .rightLabel .altInstruct .instruct{
margin-left:30% !important;
padding-left:15px;
width:65%;
}
.leftLabel .buttons, .rightLabel .buttons{
margin-left:15px;
}
.leftLabel .buttons input, .rightLabel .buttons input{
margin-left:30%;
}
/* ----- NO INSTRUCTIONS ----- */
.noI .instruct{
display:none !important;
}
.noI form li, .noI form li.buttons{
width:97% !important;
}
.noI form li.section{
padding-left:9px !important;
}
/* ----- NO INSTRUCTIONS LABEL LAYOUT ----- */
.noI .leftLabel .large, .noI .leftLabel textarea.textarea,
.noI .rightLabel .large, .noI .rightLabel textarea.textarea,
.noI .leftLabel .address, .noI .rightLabel .address{
width:60%;
}
* html .noI .leftLabel .small, * html .noI .rightLabel .small{
width:23%;
}
* html .noI .leftLabel .medium, * html .noI .rightLabel .medium{
width:55%;
}
* html .noI .leftLabel .large, * html .noI .leftLabel textarea.textarea,
* html .noI .rightLabel .large, * html .noI .rightLabel textarea.textarea{
width:97%;
}
.noI .leftLabel label.desc, .noI .rightLabel label.desc{
width:35%;
}
.noI .leftLabel .buttons input, .noI .rightLabel .buttons input{
margin-left:35%;
}
/***********************************************
LIGHTBOX
************************************************/
#lightbox{
	color:#fff;
	background:#000;
	position:absolute;
	top:50%;
	left:50%;
}
#lightboxTop{
	height:15px;
	background:#fff;
	padding:3px;
}
#playerTopTitle{
	color: #000;
	font: bold 13px/15px Helvetica, Arial, sans-serif;
	padding:0 5px 0 15px;
	vertical-align: top;
}
#lightboxTop a{
	
	line-height: 16px;
}
#lightboxAd{
	margin:10px auto;
	width:468px;
}
#lightboxbg
{
	-moz-opacity: 0.8;
	opacity:0.8;
	filter: alpha(opacity=80);
	width: 100%;
	position:absolute;
	left:0;
	top:0;
	background: #000;
	z-index: 2;
}
#creatorLink{
	vertical-align: top;
}