/********************************************************************************
 *
 *	Style Sheet for Mio-SF Web Site
 *
 *	This is the readable version not used on live site.
 *	Production version is styleCSS.php which has comments and whitespace removed,
 *	and is served up as PHP so it can be compressed by zlib.
 *
 *	Author:	Ron Kamlan <rjkamlan@yahoo.com>
 *	Version: 10-04-08
 *
 ********************************************************************************/


/* Basic Styles
*********************************************/

html, body {
	height: 101%;
	margin: 0;
	padding: 1em 0 12px;
}

body {
	text-align: center;
}

img {
	border: none;
}

a {
	text-decoration: none;
}

input {
	width: 244px;
	height: 16px;
	border: none;
	margin: 3px 0 5px;
	font-size: 12px;
}

textarea {
	width: 244px;
	height: 84px;
	border: none;
	margin-top: 3px;
	font-size: 12px;
}

table {
	border-collapse: collapse;
}

td {
	margin: 0;
	padding: 0;
}

#bkgd { background: url(images/background.gif); }

.contactBkgd { background: #626469; }

.error {
	background-color: #bad200;
	margin: 0 1em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20px;
	color: #FF0000;
	text-align: center;
}

#wrapper, #thanksWrapper {
	margin: 0 auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: left;
	border: 1px solid #000000;
}

#wrapper {
	width: 900px;
}

#thanksWrapper {
	position: relative;
	width: 800px;
	height: 402px;
	background-image: url(images/thanks.gif);
}

#header {
	background-image: url(images/mio_site_01.jpg);
}

#contactHeader {
	background-image: url(images/mio_contact_01.jpg);
}

#header, #contactHeader {
	width: 900px;
	height: 100px;
	font-size: 10px;
	text-align: right;
}

#header p, #contactHeader p {
	margin: 0;
	padding: 7.5em 13em 0 0;
}

#header span {
	color: #bad200;
}

#contactHeader span {
	color: #000;
}

#header a:link, #header a:visited, #contactHeader a:link, #contactHeader a:visited, #thanksWrapper a:link, #thanksWrapper a:visited, #footer a:link, #footer a:visited {
	color: #FFFFFF;
}

#header a:hover, #footer a:hover, #footer a:active {
	color: #bad200;
}

#contactHeader a:hover, #thanksWrapper a:hover, #thanksWrapper a:active {
	color: #000;
}

#main {
	background-image: url(images/home_main.jpg);
	height: 370px;
}

#construction {
	background-image: url(images/under_construction.jpg);
	height: 370px;
}

#left, #sale {
	float: left;
	width: 580px;
	height: 370px;
	color: #000000;
	text-align: center;
}

#left a:link, #left a:visited, #justinLeft a:link, #justinLeft a:visited, #design a:link, #design a:visited, #detail a:link, #detail a:visited, #sale a:link, #sale a:visited {
	color: #000;
}

#left a:hover, #left a:active, #justinLeft a:hover, #justinLeft a:active, #design a:hover, #design a:active, #detail a:hover, #detail a:active {
	color: #bad200;
}

#sale a:hover, #sale a:active {
	color: #FFFFFF;
}

#right, #trendsRight, #aboutRight {
	float: left;
	width: 320px;
	height: 220px;
	padding-top: 150px;
	font-size: 20px;
	text-align: center;
}

#right {
	position: relative;
	background-color: #96979B;
	color: #000000;
}

#trendsRight {
	background-color: #E2E2E2;
	color: #000000;
}

#aboutRight {
	background-color: #E2E2E2;
	color: #000000;
}

#justinLeft {
	float: left;
	width: 580px;
	height: 368px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	text-align: center;
}

#categoryImage {
	float: left;
}

#categoryList {
	float: right;
	background-color: #636369;
	width: 290px;
	height: 368px;
	text-align: left;
}

#categoryList a:link, #categoryList a:visited {
	color: #FFF;
}

#categoryList a:hover, #categoryList a:active {
	color: #bad200;
}

#collection {
	margin: 20px 0 15px 60px;
	font-size: 14px;
}

#leftList {
	float: left;
}

#leftList ul {
	margin: 0 0 0 60px;
	padding: 0;
}

#rightList {
	float: right;
}

#rightList ul {
	margin: 0 60px 0 0;
	padding: 0;
}

#categoryList li {
	margin-bottom: 3px;
	font-size: 10px;
	list-style-type: none;
}

#slideRight, #justinRight {
	position: relative;
	float: left;
	width: 320px;
	height: 370px;
	color: #FFF;
}

#slideRight {
	background-image: url(images/trippen/animation.gif);
}

#justinRight {
	background-image: url(images/just_animation.gif);
}

#justinRight div {
	position: absolute;
	bottom: 10px;
	left: 30px;
}

#slideRight a:link, #slideRight a:visited, #justinRight a:link, #justinRight a:visited {
	color: #FFF;
}

#slideRight a:hover, #slideRight a:active, #justinRight a:hover, #justinRight a:active, #justinRight span {
	color: #bad200;
}

.justIn div {
	float: left;
	background-color: #96979B;
	width: 115px;
	height: 143px;
	border: 1px solid #000000;
	border-left: none;
}

.justInDesc div {
	float: left;
	background-color: #E2E2E2;
	width: 115px;
	height: 27px;
	padding-top: 12px;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

.noTopBorder div {
	border-top: none;
}

.noBottomBorder1 div {
	height: 28px;
	border-bottom: none;
}

#noBR1, #noBR2, #noBR3, #noBR4 {
	width: 116px;
	border-right: none;
}

.trends {
	float: left;
	background-color: #FFFFFF;
	width: 289px;
	padding-top: 80px;
	height: 103px;
	border: 1px solid #000000;
	border-left: none;
	font-size: 16px;
}

.noBottomBorder2 div {
	height: 104px;
	border-bottom: none;
}

.saleLeft, .saleMid, .saleRight {
	position: relative;
	background-color: #C7DB00;
	height: 103px;
	border: 1px solid #000000;
	border-left: none;
	padding-top: 80px;
	font-size: 16px;
}

.saleLeft {
	float: left;
	width: 192px;
}

.saleMid {
	float: left;
	width: 193px;
}

.saleRight {
	float: right;
	width: 193px;
	border-right: none;
}

#detail, #design {
	float: left;
	background-color:#FFFFFF;
	width: 580px;
	height: 368px;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	color: #000000;
	text-align: center;
}

.detailLeft {
	width: 290px;
	height: 368px;
}

.designLeft, .designRight {
	width: 290px;
	height: 208px;
	padding-top: 160px;
}

.detailLeft, .designLeft {
	float: left;
	font-size: 16px;
}

.detailRight, .designRight, .saleRight {
	position: relative;
	float: left;
}

.detailRight {
	background-color: #96979B;
	width: 269px;
	height: 338px;
	padding: 30px 0 0 20px;
	text-align: left;
	border-left: 1px solid #000;
}

#caption {
	font-size: 18px;
	font-weight: bold;
}

.detailRight p {
	margin: 0 15px 15px 0;
	font-size: 11px;
	line-height: 15px;
}

.detailRight span {
	font-size: 16px;
	font-weight: bold;
}

p.trippenDetails {
	font-size: 12px;
}

.designRight {
	font-size: 16px;
}

.colors, .sizes {
	clear: left;
	width: 80px;
}

.colors select, .sizes select {
	width: 80px;
	font-size: 12px;
	border: 1px solid #000000;
}

#designNav {
	position: absolute;
	bottom: 8px;
	right: 20px;
	width: 80px;
	height: 20px;
	font-size: 12px;
	text-align: right;
}

#detailNav {
	position: absolute;
	bottom: 15px;
	right: 15px;
	width: 100px;
	height: 20px;
	padding-top: 5px;
	text-align: center;
	border: 1px solid #000000;
}

#about1 {
	background-color:#000000;
	width: 579px;
	height: 188px;
	color: #FFFFFF;
	font-size: 16px;
	padding-top: 140px;
	border: 1px solid #000000;
	border-left: none;
}

#about2 {
	float: left;
	background-color:#FFFFFF;
	width: 465px;
	height: 28px;
	padding: 11px 0 0 15px;
	text-align: left;
	border-bottom: 1px solid #000000;

}

#about3 {
	position: relative;
	float: right;
	background-color:#FFFFFF;
	width: 99px;
	height: 39px;
	text-align: left;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

#aboutNav {
	position: absolute;
	top: 11px;
	margin-right: 20px;
	width: 80px;
	height: 20px;
	font-size: 12px;
	text-align: right;
}

#paypal {
	font-size: 16px;
	padding: 40px;
	text-align: left;
}

#paypal a:link, #paypal a:hover, #paypal a:hover {
	color: #0000FF;
	text-decoration: underline;
}

#paypal a:visited {
	color: #990099;
	text-decoration: underline;
}

#lower1 {
	float: left;
	width: 580px;
	height: 100px;
	background-image: url(images/banner.gif);
	text-align: center;
}

#lower1 p {
	margin-top: 4.5em;
}

#lower2 {
	float: left;
	width: 580px;
	height: 100px;
	background-image: url(images/just_banner.gif);
	text-align: center;
}

#lower3 {
	float: left;
	width: 320px;
	height: 100px;
	background: #879905;
}

#lower3 p {
	margin: 0.7em 1.4em 0;
	font-size: 10px;
	line-height: 1.4em;
}

#lower3 span {
	color: #4d5a11;
}

#contactForm {
	float: right;
	width: 320px;
	height:470px;
	background: #bad200;
}

#contactForm form {
	margin: 1.5em 3em 0;
}

#contactForm p span {
	font-size: 32px;
}

#address {
	font-size: 9px;
}

#state, #zip {
	float: left;
}

#state {
	padding: 7px 2px 0 0;
}

#zip {
	padding: 7px 2px 0 54px;
}

#stateInput, #zipInput {
	float: left;
	margin: 5px 0 8px;
}

#stateInput {
	width: 42px;
}

#zipInput {
	width: 82px;
}

#email {
	clear: both;
	margin-bottom: 2px;
}

#required {
	float: left;
	margin-top: 20px;
	color: #FF0000;
}

#submit {
	float: right;
	margin-top: 18px;
}

#send {
	background: #bad200;
	padding: 0;
	font-size: 12px;
	font-weight: bold;
	text-align: right;
	color: #FFFFFF;
	border: none;
}

#thanks {
	position: absolute;
	bottom: 60px;
	left: 120px;
}

#thanks p {
	display: inline;
	font-size: 14px;
}

#footer, #contactFooter, #footerNav {
	clear: both;
	width: 900px;
	text-align: center;
}

#footer, #contactFooter {
	background-color: #000;
	height: 30px;
	color: #FFFFFF;
}

#footer p, #contactFooter p {
	margin: 0;
	padding-top: 8px;
	font-size: 10px;
}

#footerNav {
	background-color: #c8db00;
	height: 22px;
	padding-top: 8px;
	color: #000;
}

#footerNav a {
	margin-top: 8px;
}

#footerNav a:link, #footerNav a:visited {
	color: #000;
}

#footerNav a:hover, #footerNav a:active {
	color: #FFF;
}

#margRight {
	padding-right: 3em;
}

#error {
	color: #FF0000;
	font-weight: bold;
	font-size: 22px;
	line-height: 24px;
}

#justinLeft p#error {
	background-color: #E2E2E2;
	height: 100%;
	margin: 0;
	padding: 40px 20px 0;
	text-align: left;
}

#success {
	color: #0000FF;
	font-size: 22px;
	font-weight: bold;
}

.h1 {
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
}

#h2 {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}

#h3 {
	font-size: 18px;
}

.header_1 {
	font-size: 18px;
	text-align: center;
	padding: 1em 0em;
}

.imgBorder {
	border: 1px solid #000000;
}

ul.list {
	padding-left: 2em;
	margin-left: 0;
	margin-top: 0.7em;
}

#inline {
	list-style: none;
	padding: 0;
}

.black {
	background-color: #000000;
	width: 30px;
	height: 30px;
	border: 1px solid #000000;
}

.grey {
	background-color: #666666;
	width: 30px;
	height: 30px;
	border: 1px solid #000000;
}

.white {
	background-color: #FFFFFF;
	width: 30px;
	height: 30px;
	border: 1px solid #000000;
}

.blue {
	color: #0000FF;
}

.red {
	color: #FF0000;
}

.lightBlue {
	color: #0099FF;
}

#font_1 {
	color: #666633;
	font-weight: bold;
}

.textRight {
	text-align: right;
}

.textLeft {
	text-align: left;
}

.center td {
	text-align:center;
}

.underline {
	text-decoration: underline;
}

img.imgLeft {
	float: left;
	margin: 0 10px 0 3px;
	border: 1px dotted #0000FF;
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;

}

#clear {
	clear: both;
}

.clearLeft {
	clear: left;
}

.clearRight {
	clear: right;
}

#mailForm div {
	margin: 5px;
}

.formLeft {
	float: left;
	width: 9em;
	padding-top: 2px;
}

caption {
	font-size: 18px;
	padding: 1em 0em;
}