@import url("normalize.css");
@import url("typography.css");

body {
	text-align: center; /* positioning hack pt 1/2 */
	background: url(/images/bg-html.jpg) repeat-x left -20px;
}

hr {
	margin: 1em 0;
	height: 1px;
	border: 0;
	color: rgb(95,67,58); /* ie */
	background-color: rgb(95,67,58); /* opera, mozilla */
}

div#page {
	width: 1024px;
	min-height: 700px;
	margin: 0% auto;
	text-align: left; /* positioning hack pt 2/2 */
	position: relative;
	background: url(/images/bg-body.jpg) no-repeat center 360px;
}

/* @group h1 */

h1 {
	text-indent: -9999em;
	background-position: center top;
	background-repeat: no-repeat;
}

#home h1 {
	height: 420px;
	background-image: url(/images/h1-home.jpg);
}

#sustainability h1 {
	height: 390px;
	background-image: url(/images/h1-sustainability.jpg);
}

#story h1 {
	height: 421px;
	background-image: url(/images/h1-story.jpg);
}

#gallery h1 {
	height: 371px;
	background-image: url(/images/h1-gallery.jpg);
}

#ornamentalglass h1 {
	height: 371px;
	background-image: url(/images/h1-ornamentalglass.jpg);
}

#ordering h1 {
	height: 399px;
	background-image: url(/images/h1-ordering.jpg);
}

#press h1 {
	height: 413px;
	background-image: url(/images/h1-press.jpg);
}

#installation h1 {
	height: 317px;
	background-image: url(/images/h1-installation.jpg);
}

#professional h1 {
	height: 281px;
	background: url(/images/h1-professional.jpg);
}

#recycle h1 {
	height: 281px;
	background: url(/images/h1-recycle.jpg);
}

/* @end */

/* @group navi */

ul#navi {
	position: absolute;
	width: 165px;
	top: 30px;
	left: 70px;
}

ul#navi li {
	background: transparent;
}

ul#navi li a {
	text-indent: -9999em;
	width: 165px;
	background-position: right top;
	background-repeat: no-repeat;
	position: absolute;
	height: 24px;
}

ul#navi li a:hover,
#sustainability #nav-sustainability a,
#story #nav-story a,
#gallery #nav-gallery a,
#ornamentalglass #nav-ornamentalglass a,
#ordering #nav-ordering a,
#press #nav-press a,
#recycle #nav-recycle a   {
	background-position: right -24px;
}

ul#navi li#nav-glassroots a {
	height: 189px;
	background: transparent url(/images/nav-glassroots.png) no-repeat right top;
}

ul#navi li#nav-glassroots a:hover,
ul#navi li#nav-glassroots a#here {
	background-position: right top;
}

li#nav-sustainability a {
	background-image: url(/images/nav-sustainability.png);
	top: 200px;
}

li#nav-story a {
	background-image: url(/images/nav-story.png);
	top: 230px;
}

li#nav-gallery a {
	background-image: url(/images/nav-gallery.png);
	top: 260px;
}

li#nav-ornamentalglass a {
	background-image: url(/images/nav-ornamentalglass.png);
	top: 290px;
}

li#nav-ordering a {
	background-image: url(/images/nav-ordering.png);
	top: 320px;
}

li#nav-press a {
	background-image: url(/images/nav-press.png);
	top: 350px;
}
/*
li#nav-installation a {
	background-image: url(/images/nav-installation.png);
	top: 350px;
}
*/
li#nav-blog a {
	background-image: url(/images/nav-blog.png);
	top: 380px;
}

li#nav-recycle a {
	background-image: url(/images/nav-recycle.png);
	top: 410px;
}


/* @end */

#content {
	position: absolute;
	left: 240px;
	top: 25px;
	width: 470px;
	padding: 20px 50px 30px;
	min-height: 680px;
	background: url("/images/bg-shadow.png") repeat-y left top;
	overflow: hidden;
}

div#content {
	background-image: 
		url(/images/bg-shadbtm.jpg),
		url(/images/bg-shadow.png);

	background-position: 
		bottom left,
		top left;

	background-repeat: 
		no-repeat,
		repeat-y;
}

address {
	position: absolute;
	top: 650px;
	left: 20px;
	width: 210px;
}

h3#order {
	float: right;
	text-indent: -9999em;
	width: 131px;
	height: 55px;
	background: url(/images/btn-howToOrder.png) no-repeat left top;
}

h3#order a {
	position: relative;
	display: block;
	width: 131px;
	height: 55px;
}
h3#jewelry {
	float: right;
	text-indent: -9999em;
	width: 131px;
	height: 55px;
	background: url(/images/btn-jewelry.png) no-repeat left top;
}

h3#jewelry a {
	position: relative;
	display: block;
	width: 131px;
	height: 55px;
}


/* @group page-specific content overrides */

#home h3,
#sustainability h3,
#ordering h3 {
	float:left;
	width: 150px;
	margin-right: 20px;
	margin-top: 0;
}

#home #content p,
#sustainability #content p,
#ordering #content p {
	width: 300px;
	float: right;
}

#story #content img {
	float: left;
	margin: 0 35px 0 30px;
}

#ordering #content img {
	margin: 15px auto 10px;
}

img#recycled { /* recycled logo on sustainability page */
	float: right;
	padding-left: 1em;
}

#recycle-left { 
	float: left;
	width: 210px;
}

#recycle-right {
	float: left;
	width: 210px;
	margin-left: 30px;
}


/* @end */

/* @group tile samples */

#tile-description {
	margin-top: 2em;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin-bottom: -7px;
	position: relative;
	padding: 5px 0;
	font-size: .9em;
}

/* @end */

/* @group sample boards */

ul#sample-boards {
	margin-top: 10px;
	overflow: hidden;
}

ul#sample-boards li {
	text-indent: -9999em;
	width: 24px;
	height: 24px;
	margin: 0 3px 2px 0;
	background-repeat: no-repeat;
	background-position: left top;
	float: left;
}

li#green1 {
	background: url(/images/board_green1.png);
}

li#green2 {
	background: url(/images/board_green2.png);
}

li#coke1 {
	background: url(/images/board_coke1.png);
}

li#coke2 {
	background: url(/images/board_coke2.png);
}

li#coke3 {
	background: url(/images/board_coke3.png);
}

li#coke4 {
	background: url(/images/board_coke4.png);
}

li#coke5 {
	background: url(/images/board_coke5.png);
}

li#blue1 {
	background: url(/images/board_blue1.png);
}

li#blue2 {
	background: url(/images/board_blue2.png);
}

li#clear1 {
	background: url(/images/board_clear1.png);
}

li#clear2 {
	background: url(/images/board_clear2.png);
}

li#clear3 {
	background: url(/images/board_clear3.png);
}

li#clear4 {
	background: url(/images/board_clear4.png);
}

li#residence1 {
	background: url(/images/board_residence1.png);
}

li#olive1 {
	background: url(/images/board_olive1.png);
}

li#brown1 {
	background: url(/images/board_brown1.png);
}

li#pine {
	background: url(/images/board_pine.png);
}

li#multi1 {
	background: url(/images/board_multi1.png);
}

li#multi2 {
	background: url(/images/board_multi2.png);
}

li#multi3 {
	background: url(/images/board_multi3.png);
}

li#multi4 {
	background: url(/images/board_multi4.png);
}
li#multi5 {
	background: url(/images/board_multi5.png);
}

ul#sample-boards a {
	display: block;
	width: 24px;
	height: 24px;
	position: relative;
}

p#description {
	margin-top: .5em;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin-bottom: -7px;
	position: relative;
	padding: 5px 0;
	clear: left; /* ie necessity to make padding take effect */
	font-size: .9em;
}

/* @end */

/* @curtain and jewelry samples */

ul#sample-curtains {
	margin-top: 10px;
	overflow: hidden;
}

ul#sample-curtains li {
	text-indent: -9999em;
	width: 24px;
	height: 24px;
	margin: 0 3px 2px 0;
	background-repeat: no-repeat;
	background-position: left top;
	float: left;
}

li#curtain1 {
	background: url(/images/sample_curtain1.png);
}
li#curtain2 {
	background: url(/images/sample_curtain2.png);
}
li#jewelry1 {
	background: url(/images/sample_jewelry1.png);
}
li#jewelry2 {
	background: url(/images/sample_jewelry2.png);
}
li#jewelry3 {
	background: url(/images/sample_jewelry3.png);
}

ul#sample-curtains a {
	display: block;
	width: 24px;
	height: 24px;
	position: relative;
}

/* @end */

a[href$=".pdf"] {
	padding-right: 20px;
	background: url(/images/ico-pdf.gif) no-repeat right center;
}

/* external links list (w/i press room) */
ul.links-out li {
	margin-bottom: .3em;
}