PetitTeton/public/admin/main.styl

@import url('http://fonts.googleapis.com/css?family=PT+Sans|Grand+Hotel|Open+Sans:400,600');

html {
	scrollbar-face-color: #808080;
	scrollbar-highlight-color: #808080;
	scrollbar-3dlight-color: #707070;
	scrollbar-darkshadow-color: #808080;
	scrollbar-shadow-color: #7e7e7e;
	scrollbar-arrow-color: #ffffff;
	scrollbar-track-color: #505050;
}

html, body, #archives ul, #overall-footer, #content ul {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

body {
	background: #F6F6F6;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 1.0em;
}

/* These three styles are to allow for the produce table which spans three columns. */
.produceTable .list {
	list-style-type: none;
	background: none;
	text-indent: 0px;
}
.produceTable .listHeading {
	font-weight: bold;
	background: none;
	text-indent: 0px;
}
.produceTable .listItem {
	font-weight: normal;
	background: none;
	text-indent: 15px;
}

/* Container Formats */

#overall {
	position: relative;
	max-width: 950px;
	min-width: 250px;
	margin: 0 auto;
}

#page {
	/*background: url('images/GrassBackground_v1.jpg') repeat;
	background: #F6F6F6;*/
	background: #FDFDFD;
}

#menu {
	width: 100%;
}

/* Small Devices (phones) */
@media(max-width: 549px) {
	#head {
		margin: 0 auto;
		/*background: url(images/Header_v1.jpg) no-repeat top center;
		height: 171px;*/
		height: 0px;
	}
	.page {
		margin: 0px auto;
		padding: 6px 4px;
		position: relative;
	}
	
	#menuBackground {
		height: 20px;
		max-width: 950px;
		background: #FFF;
	}
	#menu {
		white-space: nowrap;
		position: absolute;
		height: 20px;
		z-index: 200;
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: 600;
		font-size: .7em;
	}
	#menu a {
		margin: 0 0 0 9px;
		text-decoration: none;
		color: black;
		line-height: 20px;
		display: inline-block;
		height: 20px;
		border-bottom: 1px solid transparent;
		/* Force the browser to include padding and border as part of the size of the block. */
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	#menu a:hover {
		opacity: .7;
		color: black;
		border-bottom: 1px solid red;
	}
}

/* Large(r) Devices (tablets and full computers) */
@media(min-width: 550px) {
	#head {
		margin: 0 auto;
		background: url(images/Header_v1.jpg) no-repeat top center;
		max-width: 950px;
		height: 171px;
	}
	.page {
		margin: 0px auto;
		padding: 30px 20px;
		position: relative;
	}
	
	#menuBackground {
		height: 31px;
		max-width: 950px;
		background: #FFF;
	}
	#menu {
		white-space: nowrap;
		position: absolute;
		height: 30px;
		margin-bottom: 1px;
		z-index: 200;
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: 600;
		font-size: 1em;
	}
	#menu a {
		margin: 0 0 0 16px;
		text-decoration: none;
		color: black;
		line-height: 30px;
		display: inline-block;
		height: 30px;
		border-bottom: 3px solid transparent;
		/* Force the browser to include padding and border as part of the size of the block. */
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	#menu a.holidayMenuItem {
		font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: 400;
		font-size: 1.3em;
		letter-spacing: 1px;
		vertical-align: top;
	}
	#menu a.shippingMenuItem {
		font-family: "Grand Hotel", "Open Sans", Arial, Helvetica, sans-serif;
		font-weight: 400;
		font-size: 1.3em;
		letter-spacing: 1px;
		vertical-align: top;
	}
	#menu a:hover {
		opacity: 1;
		color: black;
		background: transparent;
		border-bottom: 3px solid #a20010;
	}

}

#title-shadow {
	position: absolute;
	top: 227px;
	left: 106px;
	width: auto;
	height: auto;
	color: #cacaca;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 3.6em;
	font-weight: bold;
	z-index: 6;
}

#title {
	position: absolute;
	top: 225px;
	left: 104px;
	width: auto;
	height: auto;
	color: #77b145;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 3.6em;
	font-weight: bold;
	z-index: 7;
}

#content {
	min-height: 700px;
}

p {
	text-align: justify;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1 {
	white-space: nowrap;
	color: black;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 1.6em;
	font-weight: 800;
	padding-left: 0px;
	text-transform: uppercase;
}
h1:after {
	border-bottom: 2px solid #222; 
	width: 100%;
	margin-bottom: 10px;
	content: "";
	display: block;
}

h2 {
	display: inline;
	color: #333;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 1.125em;
	font-weight: 800;
	padding-left: 0px;
	text-transform: uppercase;
}

h3 {
	display: inline;
	color: #333;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: 1em;
	font-weight: 800;
	padding-left: 0px;
	text-transform: uppercase;
}

h5 {
	display: block;
	color: #333;
	font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
	font-size: .875em;
	font-weight: 400;
	font-style: oblique;
	padding-left: 0px;
	text-transform: uppercase;
	margin: 60px 0 0px 0;
}

li {
	list-style-type: none;
	/*background: url(images/Bullet3_v1.jpg) no-repeat 10px 5px;*/
	text-indent: 26px;
}

sup, sub {
	line-height: 0.1em;
}

.submenu {
	h2:after {
		border-bottom: 1px solid gray; 
		width: 100%; 
		margin-bottom: 10px;
		content: "";
		display: block;
	}
	
	@media(max-width: 499px) {
		.columnContainer {
			width: 250px;
		}
		.columned {
			column-count: 1;
		}
	}
	@media(min-width: 500px) and (max-width: 749px) {
		.columnContainer {
			width: 500px;
		}
		.columned {
			column-count: 2;
		}
	}
	@media(min-width: 750px) {
		.columnContainer {
			width: 750px;
		}
		.columned {
			column-count: 3;
		}
	}
	.columnContainer {
		margin: 0 auto;
	}
	.columned {
		-webkit-columns: 250px auto; 
		-moz-columns: 250px auto; 
		columns: 250px auto; 
		-webkit-column-gap: 0px; 
		-moz-column-gap: 0px; 
		column-gap: 0px;
	}
	.columnContent {
		text-align: center;
		cursor: pointer;
		margin: 4px 15px 4px 15px;
		width: 220px;
		display: inline-block;
	}
	.columnContent:hover {
		background: #EEE;
	}
	.columnContent {
		h2 {
			font-size: 1.1em;
			font-family: 'trebuchet ms', verdana, arial, helvetica, sans-serif;
			font-weight: 400;
			font-style: oblique;
			text-transform: uppercase;
			color: #333;
			margin: 0;
			padding: 0;
		}
		img {
			width: 220px;
		}
		a:hover {
			background: transparent;
			color: gray;
		}
		img {
			float: none;
			display: block;
		}
		p {
			text-align: left;
			/*font-family: Georgia, serif;*/
			font-family: 'PT Sans', sans-serif;
			font-size: .8em;
			color: black;
			text-decoration: none;
		}
		p:hover {
			color: black;
			text-decoration: none;
		}
	}
}

.hidden {
	display: none;
}

/* Scrolls all five pictures one at a time from right to left. */
.scrollViewport {
	margin: 0;
	/*
	width: 805px;
	height: 145px;
	*/
	width: 568px;
	height: 100px;
	overflow: hidden;
	position: relative;
}
.scrollPage {
	position: relative;
	left: 0;
	top: 0;
	white-space: nowrap;
}
.scrollPage img {
	width: 130px;
	height: 90px;
	border: 0;
	position: relative;
	left: 0px;
	top: 0px;
}
.scrollPage a {
	/*width: 161px;
	height: 145px;*/
	width: 142px;
	height: 100px;
	border: 0;
	background: url('images/shadow_130_90.png') no-repeat scroll 0px 0px;
}
.scrollPage a:hover {
	background-color: white;
	color: white;
}
.scrollPage div { /* In case it isn't clickable (substitute for <a>)/ */
	/*width: 161px;
	height: 145px;*/
	width: 142px;
	height: 100px;
	border: 0;
	float: left;
	background: url('images/shadow_130_90.png') no-repeat scroll 0px 0px;
}

.hidden {
	visibility: hidden;
}
.clickable {
	cursor: pointer;
	cursor: hand;
}
.inlineBlock {
	display: inline-block;
}

.modal-dialog {
	background: white;
}

.selected {
	background-color: #ffe184 !important;
}

/* Footer Lines */

#footer {
	margin-top: 6px;
	color: #666;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 0.7em;
	text-align: left;
}

#footer a {
	color: #666;
	font-family: verdana, arial, helvetica, sans-serif;
	text-decoration: none;
}

#footer a:hover {
	color: #00a55d;
}

#designedBy {
	margin-top: 6px;
	font: Arial, san-serif;
	font-size: .5em;
	line-height: .525em;
	color: #777;
	white-space: nowrap;
	letter-spacing: 1px;
	text-transform: uppercase;
}

#designedBy a {
	color: #777;
	font: Arial, san-serif;
	font-size: .5em;
	line-height: .525em;
	text-decoration: none;
	font-weight: normal;
}

#designedBy a:hover {
	text-decoration: underline;
	color: #000;
}

@require "home"
@require "editor"
@require "users"
@require "venues"
@require "measures"
@require "categories"
@require "subcategories"
@require "items"