/* General Element Styling
--------------------------*/
*, *:before, *:after {
    box-sizing: inherit;
}
html, body {
    height: 100%;
    box-sizing: border-box;
		font-family:"Zapf Humanist",candara,helvetica,arial,sans-serif;
}
html
	{
		min-height:100%;
		padding:0;
		margin:0;
	}
body
	{
		min-height:100%;
		padding:0;
		margin:0;
		background:#4B9CFF url("../img/sidebar.png") repeat-x fixed bottom left;
		background-color:#4B9CFF;
	}
img
	{
		border-width:0;
	}
tr:nth-child(2n+0)
	{
		background-color:#EEF7FF;
	}
header
	{
		text-align:left;
		padding:3em 0 0 2em;
		margin:0;
		background:#4B9CFF url("../img/clouds.jpg") no-repeat;
		background-size: cover;
}
header a
	{
		text-decoration:none;
	}
header img
	{
		height:100%;
		width:auto;
	}
header img:nth-child(2)
	{
		margin-left:-2.7em;
	}


#houselogo
{
	animation:twist 11s infinite;
  animation-direction: alternate;
	animation-timing-function: ease-out;
	transform-origin: 48% -10%;
}
@keyframes twist
{
	0% 	
	{
		transform: rotateX(20deg) rotateY(20deg) rotateZ(0deg);
		animation-timing-function: ease-in;
		opacity:0.8;
	}
	25%  
	{
		transform: rotateX(10deg) rotateY(-5deg) rotateZ(1deg);
		opacity:0.9;
		animation-timing-function: ease-out;
	}
	50% 
	{
		transform: rotateX(1deg) rotateY(-30deg) rotateZ(0deg);
		animation-timing-function: ease-in;
	}
	75%
	{
		transform: rotateX(-7deg) rotateY(-10deg) rotateZ(0deg);
		opacity:1;
		animation-timing-function: ease-out;
	}
	100%
	{
		transform: rotateX(-15deg) rotateY(0deg) rotateZ(-1deg);
		animation-timing-function: ease-in-out;
	}
}


		/* Navigation Tabs
		------------------*/
		#linkbar
			{
				padding:0;
				margin-bottom:0;
				margin-left: 8em;

				list-style:none;
				border:0 solid black;
			}
		#linkbar li
			{
				margin:0;
				padding:0;
				border:0 solid black;
				border-bottom-width:0.16em;
				display:inline-block;
			}
		#linkbar a
			{
				display: block;
				padding: 8px 16px 0 16px;
				font-weight: bold;
				color: #002940;
				background-color: hsl(220 40% 50%);
				border-radius: 1em 1em 0 0;
				box-shadow: inset -6px 6px 10px -1px hsl(220 35% 35%), inset 6px 6px 10px -1px hsl(220 35% 35%);
			}
		#linkbar a:hover
			{
				color:hsl(205 100% 70%);
			}
		.cur-home #n1, .cur-looks #n2, .cur-cloth #n3, .cur-screen #n4, .cur-logo #n5, .cur-emb #n6, .cur-promo #n7, .cur-about #n8
			{
				border-bottom-width:0;
			}
		.cur-home #n1 a, .cur-looks #n2 a, .cur-cloth #n3 a, .cur-screen #n4 a, .cur-logo #n5 a, .cur-emb #n6 a, .cur-promo #n7 a, .cur-about #n8 a
			{
				position:relative;
				width:100%;
				height:100%;
				color:hsl(34deg 100% 60%);
				margin-bottom:0;
				padding-bottom:0.15em;
				background-color: hsl(213 100% 60% / 1);
				box-shadow:none;
			}		
		.cur-home #n1 a:after, .cur-looks #n2 a:after, .cur-cloth #n3 a:after, .cur-screen #n4 a:after, .cur-logo #n5 a:after, .cur-emb #n6 a:after, .cur-promo #n7 a:after, .cur-about #n8 a:after
			{
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 1.2em;
				border-radius: 1em 1em 0 0;
				box-shadow: inset 0px 15px 5px -8px rgb(100 200 255 /1);
			}	

#container
	{
		display:flex;
	}
#sidebar
	{
		min-width:10em;
		width:10em;
		padding:1em;
		padding-bottom:3em;
		/*background:url("../img/sidebar.png") repeat-x top;*/
	}
#sidebar img
	{
		width:100%;
	}
#sidebar a
	{
		color:#FF8F00;
	}
#contentBody
	{
		background-color:#FFFFFF;
		padding:0 1em;
		padding-bottom:2em;
	}
#contentBody a[href ^="image"] img
	{
		padding:1em;
	}
#news
	{
		position;relative;
		padding:0;
		text-align:left;
		padding-left:1em;
		margin:0 2em;
		padding:1em;
		padding-bottom:0;
	}
#news h2
	{
		margin-top:0.8em;
	}
#news h3
	{
		margin-top:0;
		margin-bottom:0;
	}
#news h4
	{
		margin-top:0;
		font-style:oblique;
		font-size:0.9em;
	}
#news img
	{
		float:right;
		width:4em;
		height:auto;
		padding-right:2em;
	}
#infobar
	{
		position:absolute;
		visibility:hidden;
		top:0;
		right:0;
		margin:0;
	}
#infobar ul
	{
		list-style:none;
		padding:0;
		margin:0;
	}
#infobar li
	{
		float:left;
		display:block;
		padding:0.4em 1em;
		margin:0;
	}
#footer
	{
		position:absolute;
		top:0.4em;
		right:0.4em;
		margin:0;
		text-align:right;
	}
#footer a
	{
		text-decoration:none;
		font-weight:bold;
		color:#FF8F00;
	}
#footer a:hover
	{
		text-decoration:underline;
	}
#footer h5
	{
		position:fixed;
		right:0;
		bottom:-0.4em;
		padding:0.4em;
		margin:0;
		font-size:1em;
		background-color:#FFFFFF;
	}
#login
	{
		position:absolute;
		top:19.6em;
		left:0.6em;
		width:13em;
		padding:0;
		font-size:0.7em;

		z-index:9;
		opacity:0.4;
		filter:alpha(opacity=40);
	}
#login input
	{
		padding:0;
		padding-bottom:0.2em;
		margin:0;
		width:5em;
		font-size:1em;
	}
#login input.submit
	{
		width:6px;
		height:14px;
	}
#login-tab
	{
		position:relative;
		float:right;
		left:0.2em;
		width:0.8em;
		cursor:pointer;
		display:block;
		line-height:0.9em;
		font-size:0.9em;
		text-align:center;
		z-index:10;
	}
#logout-tab
	{
		position:relative;
		float:right;
		left:0.2em;
		width:0.8em;
		cursor:pointer;
		display:block;
		line-height:0.9em;
		font-size:0.9em;
		text-align:center;
		z-index:10;
	}
#btnLogout
	{
		height:1.7em;
		line-height:0.8em;
	}

#showMap:hover
	{
		text-decoration:underline;
		cursor:pointer;
	}
#mapFrame
	{
		width:99%;
		height:99%;
	}
#gMap
	{
		position:relative;
		left:0;
		top:0;
		width:100%;
		height:400px;
		margin:0;
		padding:0;
		overflow:visible;
	}
#signup
	{
		position:relative;
		width:15em;
	}
#signup label
	{
		line-height:1.8em;
	}
#signup label:after
	{
		content:": ";
	}
#signup input, #signup select
	{
		position:absolute;
		margin-top:0.1em;
		margin-bottom:-0.4em;
		right:0;
		width:10em;
	}
#signup button
	{
		position:absolute;
		margin-top:0;
		margin-bottom:0;
		right:-10em;
		width:9em;
	}
#image-view img
	{
		max-width:100%;
		height:auto;
	}

#qty
	{
		width:4em;
	}

#color-chart
	{
		width:70%;
		max-width:400px;
		background-color:rgba(197,226,255,0.5);
		margin:0 auto;
		text-align:center;
	}
#color-chart br
	{
		clear:both;
	}
#color-chart .color
	{
		width:79px;
		height:65px;
		float:left;
		font-size:0.9em;
		padding:0.4em;
		text-align:center;
	}
#color-chart .color img
	{
		margin-bottom:-0.4em;
	}

#info h3
	{
		text-align:center;
		margin:0 auto;
	}
#info img
	{
		margin:0 auto !important;
	}
#info div + div
	{
		background-color:#DDEEFF;
		border:0.27em solid #CCDDEE;
	}
#info div
	{
		float:left;
		position:relative;
		max-width:17em;
		min-width:6em;
		width:40%;
		margin:0.6em;
		padding:1em;
	}
#cartlog
	{
		float:none !important;
		margin:0 !important;
		padding:0 !important;
	}
#info b + ul
	{
		padding-left:1.8em;
		margin-top:0;
	}
#info hr
	{
		visibility:hidden;
		clear:both;
	}
#cart
	{
		text-align:right;
	}
#cart thead
	{
		font-weight:bold;
	}
#cart td
	{
		padding:0.1em 0.8em;
	}


/* Item Classes
---------------*/
.item
	{
		width:31%;
		max-width:16.4em;
		min-width:13.7em;
		height:11em;
		float:left;
		padding:0;
		margin:0.3em;
		background-image:url("../img/sheen.png");
		position:relative;
		border:0.12em solid #CCCCCC;
	}
.item h3 a
	{
		padding:0;
		margin:0;
		line-height:1em;
		font-family:helvetica, arial, sans-serif;
		font-size:1em;
		color:hsl(10 100% 20%);
		text-decoration:none;
	}
.item h3 a:hover
	{
		text-decoration:underline;
	}
.item h3
	{
		padding:0;
		margin:0;
		line-height:1em;
		color:#662200;
	}
.item h4
	{
		padding:0;
		margin:0;
		line-height:1em;
		font-size:0.9em;
		color:#225500;
	}
.itemColor
	{
		position:relative;
		right:20px;
		margin-right:-17px;
		border:0.10em dashed #999999;
		width:1.1em;
		height:1.1em;
	}
.itemColor:hover
	{
		border:0.12em solid #007FFF;
	}
.itemColor:active
	{
		border:0.12em solid #FF0000;
	}
.item input[type=radio]:checked + label img
	{
		border:0.12em solid #FF7F00;
	}
.item h6
	{
		padding:0;
		margin:0;
		line-height:1em;
		font-weight:bold;
		font-size:0.75em;
		position:absolute;
		bottom:1em;
	}
.itemContainer
	{
		position:absolute;
		bottom:0;
		left:0;
		height:7em;
		padding-left:7.9em;
	}
.cart
	{
		position:absolute;
		bottom:0;
		right:0;
	}
.itemImg
	{
		position:absolute;
		width:5.8em;
		left:1em;
		bottom:0.5em;
		height:auto;
	}
.itemImg:hover
	{
		opacity:0.8;
		cursor:pointer;
		border:0 solid #996633;
		border-bottom-width:0.2em;
	}
.contact span
	{
		cursor:pointer;
	}
.itemOpt input[type=radio]
	{
		opacity:0;
	}


.bface
	{
		background-color:buttonface;
	}
.wrong
	{
		color:#DD0000;
	}

/* Classes
------------------*/
.article
	{
		border:0 solid #0E76CF;
		border-left-width:0.15em;
		border-bottom-width:0.15em;
		padding:0.2em 0.6em;
		margin:1.4em 0;
	}
.error
	{
		color:#EE3311;
	}
#new-looks
	{
		display:flex;
		margin-bottom:1em;
	}
#new-looks>div
	{
		flex:1 1 1%;
		border:0 dotted #B5464F;
		min-width:1px;
		padding-right:1em;
		margin:0;
	}
#new-looks>div+div
	{
		padding-left:1em;
		border-left-width:1px;
	}
#new-looks>div:last-child
	{
		padding-right:0em;
	}
#new-looks h3
	{
		text-align:center;
	}
#new-looks ul
	{
		padding:0.4em 0 0 0.8em;
		margin:1em 0;
		border:0 dotted #AAAAAA;
		border-top-width:1px;
		width:auto;
		display:inline-block;
	}
#new-looks img
	{
		width:100%;
		max-width:300px;
		height:auto;
		max-height:400px;
	}
#new-looks>div div
	{
		text-align:right;
		border:0px solid black;
		border-bottom-width:1px;
	}

@media screen and (max-width:680px)
{
	header>a
	{
		display:flex;
    flex-direction: column-reverse;
    align-items: center;
	}
	header img
	{
		width:unset;
		height:unset;
	}
	#linkbar
	{
		margin-left:0;
	}
	#new-looks
	{
		display:block;
	}
	#new-looks ul
	{
		margin:0;
	}
	#new-looks>div
	{
		margin-bottom:3em;
	}
	#new-looks img
	{
    display: block;
		margin: 0 auto;
	}
	#info div
	{
		float:none;
		max-width:17em;
		min-width:unset;
		width:unset;
		margin:0 auto;
	}
	#info div img
	{
		display:block;
		margin:0 auto;
	}
}