* {margin:0px; padding:0px; font-family:Helvetica,sans-serif; font-size:16px;}
html,body {margin:0px; padding:0px; height:100%;}
a {outline:0; color:rgb(32,56,72);}
a:hover, a:active, a:focus {outline:0;}
body {background:rgb(128,152,208); width:auto; display:block;}
button, button:active {outline:0;}
figure {display:inline-block; vertical-align:top;}
footer,h2 {background:linear-gradient( rgb(176,208,248) 65%, rgb(208,232,248) 85%, rgb(208,232,248) 95%, rgb(176,208,248) 99%);}
footer{height:64px; padding:8px 0px; width:100%;}
gap {display:inline-block; width:20px;}
h2 {width:100%; margin-bottom:8px; padding:4px 0px; font-size:20px; text-align:center;}
h3 {font-size:20px; font-family:Georgia; font-weight:bold;}
h4 {font-size:16px; font-family:Georgia; font-weight:bold; text-shadow:-1px 1px 0px rgba(0,0,0,0.25);}
h5 {font-size:16px; font-family:Georgia; color:rgb(24,72,96); margin-bottom:12px;}
hr {border:0px; background: #907860; height:1px; box-shadow:0px 1px 0px #c0b098;}
p {margin-top:16px;}
span {display:inline-block; vertical-align:top; margin:0px;}
ul,li {margin:2px 16px; padding:0px;}
/**/
project {display: table; width:100%; max-width:1500px; height:100%;}
nav,main {vertical-align:top; display: table-cell; height: 100%;}
nav {text-align:center; background: url(./layout/wallpaper.png); min-width: 120px; max-width: 250px;}
main {background: white; width:83.3%; max-width:1250px; border-right:1px solid rgb(40,48,56); border-left:1px solid rgb(40,48,56);}
/**/
.buttonSend, #buttonSend {
	font-size:14px; font-family: "Lucida Sans", Arial, sans-serif; width:136px; height:36px; color:rgb(248,248,248); font-weight:bold; border-radius:8px;
	background:linear-gradient(to bottom, rgb(112,168,248) 0px, rgb(64,120,216) 4px, rgb(64,120,216) 40%, rgb(32,80,176) calc(100% - 4px));
	border:1px solid rgb(64,120,200);
}
	#buttonSend:active {
		background:linear-gradient(to bottom, rgb(64,120,216) 0px, rgb(32,80,176) 4px, rgb(32,80,176) 40%, rgb(64,120,216) calc(100% - 4px));
	}
	#buttonSend:disabled {
		border:2px solid rgb(72,72,72);
		background: linear-gradient(rgb(96,96,96) 0%, rgb(72,72,72) 10%, rgb(120,120,120) 40%, rgb(160,160,160) 90%, rgb(72,72,72) 100%)
	}
#fullheight{height:100%; width:100%; max-width:1520px;}
#homeIntro, #homeSubBar {max-width:960px; font-family:Georgia; font-size:15px; margin:0px 4px 16px 4px; padding:8px; text-align:justify; border:1px solid rgb(144,120,96); background:url(./layout/yarn_ball.png)no-repeat bottom 5px right 5px, url(./layout/yarnbox_bg2.png) repeat-x bottom, rgb(248,240,216); border-radius:4px;}
#homeIntro p{font-family:Georgia; text-align:justify;}
#homeIntro ul, #homeIntro li {margin:4px 16px; padding:0px; font-family:Georgia;}
#homeIntro {padding-bottom:32px;}
	#homeIntro a{font-family:Georgia; font-size:15px; font-weight:bold;}
	#homeIntro div,#homeIntro .email1 {font-family:Georgia; font-size:15px;}
	#homeIntro .emailBox{padding:2px; max-width:640px;}
	#homeIntro .email1 {text-align:left; width:128px;}
	#homeIntro .email2 {text-align:left; width:calc(100% - 136px);}
	#homeIntro input, #homeIntro textarea {width:100%; padding:2px; height:18px; border:1px solid rgb(160,144,112); font-family:Georgia; font-size:15px;}
	#homeIntro textarea {height:104px;}
#homeSubBar {background:url(./layout/yarnbox_bg2.png) repeat-x bottom, rgb(248,240,216); padding:3px 9px; margin-top:30px;}
#postSign {width:calc(100% - 12px); height:auto; background-size:contain; border:2px solid rgb(64,160,112); border-radius:8px; margin:4px 2px 4px 0px; box-shadow:-2px 2px 0px rgb(144,120,96);}
#signX {max-width:192px;}
#headerImg{width:100%; height:64px; background:url(./layout/header_small.jpg) no-repeat; background-size:cover;}
/**/
.sideB0, .sideB1, .sideB2, .sideC0{
	transition:all 0.25s ease; height:22px; text-align:left; width:calc(100% - 4px); max-width:184px; margin:0px 4px 6px 0px; border-radius:4px; background:white; border:1px solid rgba(0,0,0,0); box-shadow:-2px 2px 0px rgb(144,120,96);
}
	.sideB2 {background:#ffeedd; font-size:12px;}
.sideB2 ul, .sideB2 li {margin:2px 8px; padding:0px;}
	
.sideC0{width:calc(100% - 4px); max-width:184px; height:64px; text-align:center;}
/**/
.sideB1{font-weight:bold; border:1px solid rgba(64,160,112,0.75);}
.sideT1{width:20px; height:12px; float:right; margin-top:4px; margin-right:4px; background:url(./layout/sidebar_tag.png);}
.sideA1{margin-left:4px; margin-top:1px;}
	.sideB0:hover,.sideB1:hover,.sideB2:hover {background:rgb(144,192,232); color:rgb(248,248,248);}
.facebookBar {padding:2px 0px; margin:0px 4px 6px 0px; width:calc(100% - 2px); max-width:184px; border-radius:4px; background: linear-gradient( rgb(64,96,160) 58%, rgb(72,104,184) 62%, rgb(88,120,200) 93%, rgb(40,48,64) 99%); box-shadow:-2px 2px 0px rgb(144,120,96);}
.facebookIcon {height:32px; width:32px; background:url(./img/facebook_button.png); background-size:cover;}

/* Images */
.imgThumb {padding:4px; margin-bottom:16px;}
	.imgThumb img {border:2px solid #907860; border-radius:8px; background:#907860; position:relative; padding:1px;}
	.imgThumb div {text-align:center; cursor:pointer; z-index:2; position:absolute;
		width:20px; height:19px; padding-top:1px;
		background:black; color:white; font-weight:bold; border:2px solid #f8f8f8; border-radius:12px; opacity:0.5;
		transition:all 0.25s ease;
	}
		.imgThumb div:hover {opacity:1.0;}

/* Home Page*/
.newsBlock {display:block; position:absolute; width:100%; height:280px; font-size:13px;}
	.newsBlock h3 {background: rgb(248,240,216);}
#newsBar {position:absolute; top:272px;}
#newsBox {position:relative; max-width:640px; height:288px; margin-top:16px;}
	#newsBox div a {font-weight:bold;}
.newsClick {cursor:pointer; width:40px; height:24px; font-weight:bold; font-family:Georgia; }
.mapBox{width:280px; height:140px; background:url(./img/map_small.png) no-repeat; border:2px solid rgb(192,200,208); border-radius:8px; margin-bottom:16px;}
.timeH{width:120px;}
.timeD{width:96px; text-align:left;}
.timeL0,.timeL1{padding:4px; width:224px;}
	.timeL0{background:rgb(216,200,184);}
	.timeL1{background:rgb(240,232,224);}
.timeBox {display: table;}
.timeCol {display: table-cell;}
/* News Page */
.newsThumb{border:2px solid rgb(144,120,96); border-radius:8px; cursor:pointer;}
/* Yarn Page */
.yarnBox{width:92px; height:92px; margin-bottom:4px; border-radius:4px; float:none;}
	.homeDetails{margin-right:16px; min-height:106px;}
.yarnSetup {width:92px; height:152px; background:white; margin:5px; border:1px solid rgb(176,152,128); font-weight:bold; border-radius:4px; transition:all 0.25s ease; background:url(./layout/yarnbox_bg2.png) bottom repeat-x, rgb(248,232,208);}
	.yarnSetup:hover {border:1px solid rgba(32,32,32); background:url(./layout/yarnbox_bg.png) bottom repeat-x, rgb(240,216,192);}
.belowX {font-family:Georgia; font-weight:normal; font-size:12px;}
.sleepyKitty {width:144px; height:157px; background:url(./img/sleepy_kitty_small.png); margin-top:32px;}
.yarnThumb {width:91px; margin:4px;}
.yarnThumb div:first-child{width:87px; height:41px; background-size:cover; border-radius:4px; border:1px solid rgb(128,128,128);}
.yarnThumb div:last-child{font-family:Georgia; font-weight:normal; font-size:12px; text-align:left;}
.yarnDetails{width:95%;}
/*Editing*/
#deleteSubBox{position:fixed; width:240px; height:240px; background:white; border-radius:8px; border:2px solid rgb(144,120,96); box-shadow: -2px 2px 2px rgb(0,0,0,0.5);}
/**/
@media only screen and (min-width: 600px){
	#headerImg{height:88px; background:url(./layout/header_medium.jpg) no-repeat; background-size:cover;}
	#newsBar {top:192px;}
	#newsBox {height:220px;}
	.newsBlock{height:208px; font-size:16px;}
	.mapBox{width:440px; height:220px; background:url(./img/map_medium.png) no-repeat;}
	.sleepyKitty {width:240px; height:262px; background:url(./img/sleepy_kitty.png);}
	.yarnBox{width:120px; height:108px; float:right;}
		.homeDetails{min-height:118px;}
	.yarnSetup {width:120px; height:160px;}
	.belowX {font-size:13.5px;}
	.facebookIcon {height:40px; width:40px;}
	.sideB0,.sideB1,.sideB2{height:24px;}

}
@media only screen and (min-width: 800px){.yarnDetails{width:48%;}}
@media only screen and (min-width: 1100px){
	#headerImg{height:112px; background:url(./layout/header_large.jpg) no-repeat; background-size:cover;}
	.mapBox{width:640px; height:320px; background:url(./img/map_large.png) no-repeat;}
	.yarnBox{width:144px; height:120px; float:right;}
		.homeDetails{min-height:130px;}
	.yarnSetup {width:144px; height:168px;}
	.belowX {font-size:15px;}
	.facebookIcon {height:48px; width:48px;}
	.sideB0,.sideB1,.sideB2{height:26px;}
	#homeIntro{
		max-width:832px;
		padding:8px 72px;
		background:url(./layout/yarn_ball.png)no-repeat bottom 5px right 77px, url(./layout/wallpaper_small_left.png) repeat-y left, url(./layout/wallpaper_small_right.png) repeat-y right, url(./layout/yarnbox_bg2.png) repeat-x bottom, rgb(248,240,216);
	}
}
/**/
.aLine {text-align:left; width:96px; font-weight:bold;}
.aLine2 {text-align:center; margin: 8px 0px;}

/* Overlay stuff */
#overImage {background:rgba(32,64,96,0.5); width:100%; height:100%; position:fixed; top:0px; left:0px; display:none; z-index:3; opacity:0; cursor:zoom-out;}