/*
Theme Name: Just Ceramics
Theme URI: http://www.just-ceramics.com/
Description: A theme by <a href="http://www.creativemonster.net">Creative Monster</a>.
Version: 1.0
Author: Daniel Wilson
Author URI: http://www.creativemonster.net/
*/

body { 							background: url(../images/bg.jpg) no-repeat left top #F2F2F2; font-family: Arial, Helvetica; font-size: 12px; text-align: center; -webkit-text-size-adjust:none; }

@font-face { 					font-family: Archer; src: url('../images/Archer-Semibold-Pro.otf'); }

@font-face { 					font-family: Archer-Book; src: url('../images/Archer-Book-Pro.otf'); }

/******************** HEADER START ********************/

#header { 						background: url(../images/header.png) no-repeat right top; height: 140px; margin: -8px auto; width: 960px }

#head_nav {						display: inline; float: right; height: 42px; margin-right: 50px; width: 500px; }						

#logo { 						display: inline; float: left; height: 56px; margin-top: 55px; width: 251px; }

#logo a:link { 					filter: alpha(opacity=100); opacity: 1; }

#logo a:visited { 				filter: alpha(opacity=100); opacity: 1; }

#logo a:hover { 				filter: alpha(opacity=50); height: 56px; opacity: 0.5; width: 251px; }

#follow {						display: inline; float: right; height: 24px; margin: -15px 0 0 906px; width: 54px; }

#follow a:link { 				filter: alpha(opacity=100); opacity: 1; }

#follow a:visited { 			filter: alpha(opacity=100); opacity: 1; }

#follow a:hover { 				filter: alpha(opacity=50); height: 24px; opacity: 0.5; width: 54px; }

/******************** HEADER END ********************/

/******************** NAV START ********************/

ul.nav {						font-family: 'Archer', Arial, Helvetica; font-size: 15px; list-style: none; margin: 0 auto; padding: 0; text-align: center; filter:alpha(opacity=90); opacity: 0.9; }

ul.nav li {						color: #242A2D; display: inline; float: left; margin: 0; text-align: center; }

ul.nav li a {					background: #242A2D; display: inline; float: left; margin: 0; padding-bottom: 10px; padding-top: 13px; }

ul.nav li.about a {				background: #242A2D; color: #FFFFFF; text-decoration: none; width: 100px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; }

ul.nav li.about a:hover {		background: #F7931E; color: #FFFFFF; text-decoration: none; width: 100px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; }

ul.nav li.about a:selected {	background: #242A2D; color: #FFFFFF; text-decoration: none; width: 100px; -moz-border-radius-bottomleft: 20px; -webkit-border-bottom-left-radius: 20px; }

ul.nav li.just a {				background: #242A2D; color: #FFFFFF; text-decoration: none; width: 100px; }

ul.nav li.just a:hover {		background: #ED1C24; color: #FFFFFF; text-decoration: none; width: 100px; }

ul.nav li.just a:selected {		background: #242A2D; color: #FFFFFF; text-decoration: none; width: 100px; }

ul.nav li.gallery a {			background: #242A2D; color: #FFFFFF; text-decoration: none; width: 100px; }

ul.nav li.gallery a:hover {		background: #2E3192; color: #FFFFFF; text-decoration: none; width: 100px; }

ul.nav li.gallery a:selected {	background: #242A2D; color: #FFFFFF; text-decoration: none; width: 100px; }

ul.nav li.parties a {			background: #242A2D; color: #FFFFFF; text-decoration: none; width: 100px; }

ul.nav li.parties a:hover {		background: #00AEEF; color: #FFFFFF; text-decoration: none; width: 100px; }

ul.nav li.parties a:selected {	background: #242A2D; color: #FFFFFF; text-decoration: none; width: 100px; }

ul.nav li.contact a {			background: #242A2D; color: #FFFFFF; text-decoration: none; width: 100px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; }

ul.nav li.contact a:hover {		background: #99CA3C; color: #FFFFFF; text-decoration: none; width: 100px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; }

ul.nav li.contact a:selected {	background: #242A2D; color: #FFFFFF; text-decoration: none; width: 100px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; }

/******************** NAV END ********************/

/******************** ROTATOR START ********************/

#rotater {						height: 150px;  position: relative; width: 880px; }

.slide { 						height: 150px; position: absolute; width: 880px; }

.slide p { 						padding: 5px; }

/******************** ROTATOR END ********************/

/******************** CONTENT START ********************/

#container {					background: #FFFFFF; border: solid 1px #DCDDDE; margin: 0px auto; overflow: auto; padding: 40px 0 40px 0; text-align: center; width: 960px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px; }

#content_left_index	{			display: inline; float: left; margin: 0 0 -12px 40px; padding: 0; text-align: justify; width: 500px; }

#content_right_index {			background: url(../images/painted-hands_01.png) no-repeat right bottom; display: inline; float: right; height: 253px; margin: 105px 0 -40px 0; padding: 0; width: 380px; }

#content_left	{				display: inline; float: left; margin: 0 0 0 40px; padding: 0; text-align: justify; width: 420px; }

#content_right	{				display: inline; float: right; margin: 73px 40px 0 0; margin: 68px 40px 0 0\9; padding: 0; text-align: justify; width: 420px; } /*IE8*/

h1 { 							border-bottom: solid 1px #F2F2F2; color: #DCDDDE; font-family: 'Archer', Arial, Helvetica; font-size: 60px; font-weight: normal; margin: -10px 0 0 0; padding: 0; padding-bottom: 10px; text-align: left; width: 880px; }

h2 { 							border-top: solid 1px #F2F2F2; color: #0099FF; font-family: 'Archer', Arial, Helvetica; font-size: 16px; font-weight: normal; margin-bottom: -6px; padding: 20px 0 0 0; text-align: left; }

h2.top { 						border-top: none; color: #0099FF; font-family: 'Archer', Arial, Helvetica; font-size: 16px; font-weight: normal; margin-bottom: -6px; padding: 20px 0 0 0; text-align: left; }

h4 { 							border-top: solid 1px #F2F2F2; color: #0099FF; font-family: 'Archer', Arial, Helvetica; font-size: 16px; font-weight: normal; margin-bottom: 0px; padding: 20px 0 0 0; text-align: left; }

h4 a:link {						color: #0099FF; text-decoration: none; }

h4 a:visited {					color: #0099FF; text-decoration: none; }

h4 a:hover {					color: #666666; text-decoration: none; }

h4.top { 						border-top: none; color: #0099FF; font-family: 'Archer', Arial, Helvetica; font-size: 16px; font-weight: normal; margin-bottom: 0px; padding: 20px 0 0 0; text-align: left; }

p.content {						color: #666666; line-height: 20px; }

p.content a:link {				color: #333333; text-decoration: none; }

p.content a:visited {			color: #333333; text-decoration: none; }

p.content a:hover {				color: #0099FF; text-decoration: underline; }

p.times_left {					border: solid 1px #F2F2F2; color: #666666; display: inline; float: left; line-height: 20px; padding: 5px 0 5px 5px; width: 153px; }

p.times_right {					border: solid 1px #F2F2F2; border-left: none; color: #666666; display: inline; float: left; line-height: 20px; padding: 5px 0 5px 5px; width: 254px; }

ol {							color: #666666; list-style: arabic numbers; line-height: 20px; list-style-position: outside; margin: 0; padding: 0; }

ol li {							margin-left: 20px; padding-bottom: 5px; padding-left: 20px; padding-top: 11px; }

ol li a:link {					color: #333333; text-decoration: none; }

ol li a:visited {				color: #333333; text-decoration: none; }

ol li a:hover {					color: #0099FF; text-decoration: underline; }

ol li.about {					margin-left: 20px; padding-bottom: 0px; padding-left: 20px; padding-top: 11px; }

p.map {							color: #666666; line-height: 20px; }

p.map a:link {					filter: alpha(opacity=100); opacity: 1; }

p.map a:visited {				filter: alpha(opacity=100); opacity: 1; }

p.map a:hover {					filter: alpha(opacity=50); height: 290px; opacity: 0.5; width: 420px; }

.blue {							color: #0099FF; }

.red {							color: #ED1C24; }

.grey {							color: #CCCCCC; }

.italic {						font-style: italic; }

.party {						color: #0099FF; font-size: 12px; text-decoration: underline; }

#just_image {					background: url(../images/painted-hands_02.jpg) no-repeat left bottom; display: inline; float: left; height: 260px; margin: 20px 0 -40px -40px; padding: 0; width: 420px; }

p.details {						color: #666666; display: inline; float: left; line-height: 20px; padding-bottom: 10px; width: 200px }

p.details a:link {				color: #333333; text-decoration: underline; }

p.details a:visited {			color: #333333; text-decoration: underline; }

p.details a:hover {				color: #0099FF; text-decoration: underline; }

p.gallery {						margin-top: 20px; }

p.gallery a:link { 				filter: alpha(opacity=100); opacity: 1; }

p.gallery a:visited { 			filter: alpha(opacity=100); opacity: 1; }

p.gallery a:hover { 			filter: alpha(opacity=50); height: 150px; opacity: 0.5; width: 208px; }

p.party_plate {					margin-top: 30px; }

p.party_plate a:link { 			filter: alpha(opacity=100); opacity: 1; }

p.party_plate a:visited { 		filter: alpha(opacity=100); opacity: 1; }

p.party_plate a:hover { 		filter: alpha(opacity=50); height: 150px; opacity: 0.5; width: 208px; }

p.invitation {					color: #666666; margin-top: 20px; }

p.invitation a:link { 			filter: alpha(opacity=100); opacity: 1; }

p.invitation a:visited { 		filter: alpha(opacity=100); opacity: 1; }

p.invitation a:hover { 			filter: alpha(opacity=50); height: 51px; opacity: 0.5; width: 420px; }

.alert {						border: 1px solid #DEDEDE; margin: 10px 0 0 0; padding: 0px 15px; width: 470px; }

/******************** CONTENT END ********************/

/******************** SLIDE EFFECT START ********************/

#accordion {						color: #666666; margin: 0 0 0 0; padding: 0 0 0 0; }

h3.toggler {						color: #0099FF; cursor: pointer; font-family: 'Archer', Arial, Helvetica; font-size: 14px; margin: 0; padding: 0; }

div.element {						margin-top: -49px; padding: 0 0 0 0;  }

/******************** END SLIDE EFFECT ********************/

/******************** CONTACT FORM START ********************/

form { 							color: #666666; margin: 12px 0 0 0; padding: 0; width: 420px;  }

fieldset { 						border: none; margin: 0; padding: 0; }

form div { 						padding: 5px 0 30px 0; }

label {							display: inline; float: left; padding: 5px 0 0 0; } 

input, textarea { 				background: #FFFFFF; border: 1px solid #DCDDDE; color: #666666; display: inline; float: right; margin-bottom: 10px; padding: 3px; width: 330px; } 

textarea { 						border: 1px solid #DCDDDE; display: inline; float: right; font-family: Arial, Helvetica; font-size: 12px; height: 100px; overflow: auto; padding: 3px; width: 330px; }

.button input { 				background: #0099FF; border: none; color: #FFFFFF; cursor: pointer; float: right; font-size: 1.2em; margin-left: 100px; padding: 3px 8px;  width: auto; }

p { 							color: #666666; padding: 0; }

.hoverfocus { 					border: 1px solid #DCDDDE; }

#error, #response { 			color: #666666; margin: -23px 0 -35px -35px; padding: 3em; width: 400px; }

#response ul { 					float: left; margin: 5px 0 0 0; padding: 5px 0 0 0; }

#error li, #response li { 		background:url(../images/bullet.gif) no-repeat 0 4px; border: none; list-style: none; margin: 0 0 5px 0; padding: 3px 0 8px 20px; }

#working { 						background: url(../images/loading.gif) no-repeat left center; padding: 3em; }

/******************** CONTACT FORM END ********************/

/******************** FOOTER START ********************/

#footer { 						background: none; height: 100px; margin: 0px auto; text-align: center; }

#foot_container { 				margin: 0px auto; text-align: center; width: 960px; }

ul.footer {						float: left; font-family: 'Archer-Book', Arial, Helvetica; font-size: 13px; list-style: none; margin: 35px 0px 0px 0px; padding: 0px; }

li.footer {						float: left; padding-right: 30px; }

li.footer a:link {				color: #999; text-decoration: none; }

li.footer a:visited {			color: #999; text-decoration: none; }

li.footer a:hover {				color: #0099FF; text-decoration: none; }

p.footer {						color: #999; float: right; font-family: 'Archer-Book', Arial, Helvetica; font-size: 13px; margin: 35px 0px 0px 0px; text-align: right;  }

p.footer a:link {				color: #F7931E; text-decoration: none; }

p.footer a:visited {			color: #F7931E; text-decoration: none; }

p.footer a:hover {				color: #0099FF; text-decoration: none; }

/******************** FOOTER END ********************/

html body div.clear, html body span.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; }