/* Page Design -------------------*/
body {background:url('images/cream.jpg');}
body {background-repeat:repeat; background-attachment:fixed; background-position:center;}
body {margin:0px;}

/* Layout DIVs ------------------ */
.container {position:relative; margin-left:auto; margin-right:auto; max-width:980px;}

.navigation {position:absolute; top:0px; width:100%; background:url('images/burlap.jpg'); z-index:10;
	-moz-box-shadow:0px 0px 4px #111; -webkit-box-shadow:0px 0px 4px #111; box-shadow:0px 0px 4px #111;}
.logo {position:absolute; top:-15px; left:-20px; width:200px;}
.navigate {padding:0px 0px; text-align:right;}
.navigate a {text-decoration:none;}
.nav {font-family:'SketchRockwell', Arial; font-size:28px; color:white; line-height:54px;
	padding:11px 12px 6px; font-weight:bold; margin-left:-5px; text-shadow:0px 0px 4px #000;}
.color1 {border-bottom:5px solid #e8da5e; transition: background 0.2s ease;} 
.color2 {border-bottom:5px solid #92b55f; transition: background 0.2s ease;} 
.color3 {border-bottom:5px solid #487d76; transition: background 0.2s ease;} 
.color4 {border-bottom:5px solid #776C82; transition: background 0.2s ease;} 
.color5 {border-bottom:5px solid #967D38; transition: background 0.2s ease;}
.color1:hover {background:#e8da5e;} .color2:hover {background:#92b55f;} .color3:hover {background:#487d76;}
.color4:hover {background:#776C82;} .color5:hover {background:#967D38;}
.color1now {background:#e8da5e;} .color2now {background:#92b55f;} .color3now {background:#487d76;} 
.color4now {background:#776C82;} .color5now {background:#967D38;}

#museumnav {position:fixed; width:100%; background:url('images/burlap.jpg'); display:none; z-index:20; bottom:0px; left:0px;
	-moz-box-shadow:0px 0px 4px #111; -webkit-box-shadow:0px 0px 4px #111; box-shadow:0px 0px 4px #111;}
#museumnav .inside {padding:30px; text-align:center;}
#museumnav .inside div {margin-bottom:8px;}
#museumnav a {font-family:'SketchRockwell', Arial; font-weight:bold; font-size:22px; color:white;
	text-decoration:none; color:white; line-height:1.4; text-shadow:0px 0px 4px #000;}

.header {width:100%; padding:84px 0px 30px;
	-moz-box-shadow:0px 0px 10px #111; -webkit-box-shadow:0px 0px 10px #111; box-shadow:0px 0px 10px #111;}
.circle {height:260px;}

.content {padding:50px 0px;
	font-family:Georgia; font-size:18px; line-height:1.5; font-weight:normal; color:#222;}
.centered {width:90%; margin:0px auto; text-align:center; margin-bottom:30px;}

.mainbar {float:right; width:70%;}
.mainbar .inside {padding-left:15px;}
.sidebar {float:left; width:30%;}
.sidebar .inside {padding-right:15px;}
.sideimage {position:relative; margin-bottom:20px; width:100%;}
.sideimage img {width:100%; margin-bottom:-5px;}
.sideimage .inside {padding:15px 0px; font-family:Georgia; font-size:14px; color:#222; text-align:center;}

.halfleft {float:left; width:50%;}
.halfleft .inside {padding-right:15px;}
.halfright {float:right; width:50%;}
.halfright .inside {padding-left:15px;}
.button {margin-bottom:30px; -moz-box-shadow:0px 0px 4px #111; -webkit-box-shadow:0px 0px 4px #111; box-shadow:0px 0px 4px #111; opacity:0.9;}
.button:hover {opacity:1;}
.box {width:100%;}

.homemuseum {background:url('images/homemuseum.png'); background-size:100%; background-size:cover; background-position:top center;
	padding:140px 20px 20px; text-align:center; margin-bottom:0px;}
.homeabout {background:url('images/aboutheader1.jpg'); background-size:100%; background-size:cover; background-position:top center;
	padding:20px; text-align:center;}
.homebrooms {background:url('images/broomsheader1.jpg'); background-size:100%; background-size:cover; background-position:top center;
	padding:20px; text-align:center; margin-bottom:0px;}
.button h1, .button h2 {color:white; text-shadow:0px 0px 4px #000;}

.broomtitle {margin:60px 0px 30px; border-top:1px dashed #333; padding-top:20px;}
.broomtitle .name {float:left; width:40%;
	font-family:'SketchRockwell', Arial; font-weight:bold; font-size:28px; color:#333; line-height:1.4;}
.broomtitle .desc {float:right; width:58%;
	font-family:Georgia; font-weight:normal; font-size:16px; color:#333; line-height:1.5;}
.broomstyle {float:left; width:33.3%; margin-right:0px; margin-bottom:0px; position:relative;}
.broomstyle img {width:100%; float:none;
	-moz-box-shadow:0px 0px 4px #111; -webkit-box-shadow:0px 0px 4px #111; box-shadow:0px 0px 4px #111;}
.broomstyle .broomname {padding:15px; padding-top:5px; color:#333; font-family:Georgia; font-size:16px; text-align:center;}
.broomcare {margin-left:auto; margin-right:auto; border:1px dashed #333; width:300px; margin-top:30px;
	padding:15px 0px; font-family:Georgia; font-size:16px; color:#333; text-align:center;}

.handun {text-align:center; margin:0px 20px;
	font-family:'SketchRockwell', Arial; font-size:22px; color:#000; line-height:1.2;}
.handun img {width:200px;}
.ordering {padding:20px; border:1px #333 dashed; margin-top:50px;}
.ordering .floatleft {float:left; font-size:20px; font-weight:bold; width:30%;}
.ordering .floatright {float:right; width:67%;}

.contactemail, .contactphone {background:#7a6325; text-align:center; padding:20px;}
.contactstring {font-family:Arial; font-style:bold; color:white; text-shadow:0px 0px 4px #000; font-size:20px;}
.contactemail h2, .contactphone h2 {font-size:16px; font-style:italic;}

.footer {width:100%; background:#222; padding:20px 0px;
	-moz-box-shadow:0px 0px 4px #111; -webkit-box-shadow:0px 0px 4px #111; box-shadow:0px 0px 4px #111;}
.footer h3 {color:white;}
.footer .container .leftside {float:left; width:68%;}
.footer .container .rightside {float:right; width:30%; text-align:right;}

/*Museum Styles -----------------*/
.fixedmuseum {position:fixed; bottom:0px; right:40px; background:#cc8159; padding:10px; z-index:10;
	-moz-box-shadow:0px 0px 4px #111; -webkit-box-shadow:0px 0px 4px #111; box-shadow:0px 0px 4px #111;}
.fixedmuseum h2 {color:white; font-size:16px; font-style:italic; text-shadow:0px 0px 4px #000;}

.museumfullwidth {width:100%;}
.museumfullwidth .title {width:100%; background:url('images/burlap.jpg');
	-moz-box-shadow:0px 0px 4px #111; -webkit-box-shadow:0px 0px 4px #111; box-shadow:0px 0px 4px #111;}
.museumfullwidth .title .container {padding:20px 0px; text-align:center;}
.museumfullwidth .title h1 {color:white; text-shadow:0px 0px 4px #000;}
.museumfullwidth .container {padding:30px 0px;
	font-family:Georgia; font-size:18px; color:#222; line-height:1.5;}

.museumimage1 {float:left; position:relative; width:49%; margin-bottom:20px;}
.museumimage2 {float:right; position:relative; width:49%; margin-bottom:20px;}
.museumimage1 img, .museumimage2 img {width:100%; margin-bottom:-3px;}
.museumimage1 .caption, .museumimage2 .caption {position:relative; text-align:center;
	padding:15px; font-family:Georgia; color:#333; font-size:14px; padding-bottom:0px;}
.imgleft {float:left; margin:0px 20px 15px 0px; width:35%;}

.quote {padding:20px 0px; border-top:1px #333 dotted; border-bottom:1px #333 dotted; font-style:italic; color:#333; text-align:center;}

.machine {padding-top:30px; border-top:1px dashed #333; margin-top:30px; text-align:center;}
.oldmachine {float:left; width:33.3%; -moz-box-shadow:0px 0px 4px #111; -webkit-box-shadow:0px 0px 4px #111; box-shadow:0px 0px 4px #111; margin:20px 0px;}
.machinecaption {text-align:center; width:70%; margin:0px auto;}
.sketchimg {max-height:340px; margin-left:auto; margin-right:auto; margin-top:20px; max-width:100%;
	-moz-box-shadow:0px 0px 4px #111; -webkit-box-shadow:0px 0px 4px #111; box-shadow:0px 0px 4px #111;}

#top {padding-top:204px; padding-bottom:160px; height:100%; text-align:center;
	background:url('images/museumheader.jpg'); background-size:100%; background-size:cover; background-position:top center;}
#top .container h2 {color:white; text-shadow:0px 0px 4px #000;}
#top .museumtitle {width:70%;}

/* Font Styles ------------------*/
h1 {font-family:'SketchRockwell', Arial; font-size:36px; line-height:1.4; font-weight:bold; color:#222; display:inline;}
h2 {font-family:Georgia; font-size:20px; line-height:1.4; font-weight:normal; color:#222; display:inline;}
h3 {font-family:Georgia; font-size:14px; line-height:1.4; font-weight:normal; color:#222; display:inline;}

.break {width:90%; border-bottom:1px dashed #222; margin:10px auto;}

.white {color:white;}
.link {text-decoration:none; color:#222; border-bottom:1px dashed #222;}
.link:hover {border-bottom:1px solid #222;}
.whitelink {text-decoration:none; color:white; border-bottom:1px dashed white;}
.whitelink:hover {border-bottom:1px solid white;}

/*Responsive --------------------------*/
@media screen and (max-width: 1150px) {
	.navigation {position:absolute;}
}

@media screen and (max-width: 1060px) {
	.container {width:auto; margin-left:40px; margin-right:40px;}

	.broomstyle {width:33.3%;}
	.contactstring {font-size:18px;}
}

@media screen and (max-width: 900px) {
	.nav {font-size:22px; line-height:48px;}

	.mainbar {width:60%;}
	.sidebar {width:40%;}

	#top {padding:160px 0px 30px;}
	#top .museumtitle {width:100%;}
}

@media screen and (max-width: 800px) {
	.container {margin-left:30px; margin-right:30px;}
	.navigation {position:relative;}
	.navigate {margin-left:150px;}

	#museumnav a {font-size:20px;}

	.header {text-align:center; padding-top:30px;}
	.circle {height:250px; float:none;}

	.content {padding:30px 0px;}
	.centered {width:100%;}
	.mainbar {width:50%;}
	.sidebar {width:50%;}

	h1 {font-size:28px;}
	h2 {font-size:20px;}
	.content {font-size:16px;}

	.museumfullwidth .container {font-size:16px;}
}

@media screen and (max-width: 760px) {
	.broomtitle .name {float:none; width:100%; text-align:center;}
	.broomtitle .desc {float:none; width:100%; text-align:center; font-size:14px;}
	.broomstyle {width:50%;}

	.machinecaption {width:95%;}
}

@media screen and (max-width: 560px) {
	.container {margin-left:20px; margin-right:20px;}
	.logo {position:relative; top:0px; left:50%; width:200px; margin-left:-100px;}
	.navigate {margin:0px; padding:0px; text-align:center;}
	.nav {font-family:Georgia; font-weight:normal; font-size:18px; line-height:43px;}

	#museumnav a {font-family:Georgia; font-weight:normal; font-size:16px;}
	#museumnav .inside nav {margin-bottom:15px;}

	.header {padding:20px 0px;}
	.circle {height:200px;}

	.content {padding:20px 0px;}
	.centered {margin-bottom:20px;}
	.mainbar {width:100%; float:none; margin-bottom:20px;}
	.sidebar {width:100%; float:none;}
	.mainbar .inside, .sidebar .inside {padding:0px;}
	.mainbar .inisde .inside, .sidebar .inside .inside {padding:20px;}

	.halfright, .halfleft {width:100%; float:none;}
	.halfleft .inside, .halfright .inside {padding:0px;}
	.button {margin-bottom:20px;}
	.homemuseum {margin-bottom:20px;}

	.broomstyle {width:100%; float:none;}
	.broomcare {font-size:14px; width:240px;}

	.footer .container .leftside {float:none; width:100%; margin-bottom:15px; text-align:center;}
	.footer .container .rightside {float:none; width:100%; text-align:center;}

	h1 {font-size:24px;}
	h2 {font-size:16px;}
	.content {font-size:14px;}

	.fixedmuseum {display:block; right:0px;}
	.fixedmuseum h2 {font-size:14px;}
	#top {padding:80px 0px;}
	.museumfullwidth .container {padding:20px 0px; font-size:14px;}
	.museumimage1 {float:none; width:100%;}
	.museumimage2 {float:none; width:100%;}
	.museumimage1 .caption, .museumimage2 .caption {font-size:12px;}
	.imgleft {float:none; margin:0px 0px 20px; width:100%;}
}

/* Universal Settings -------------- */
img {border:0;}
.clear {clear:both;}
.nolines {text-decoration:none;}