@charset "utf-8";
/* CSS Document
	global.css includes style for elements global to the entire site.  The global elements include the followin:
	- structural elements (body, wrapper, headers, containers, links, etc.)
	- branding section (aka. header) which contains the site logo, name, call to action, etc.
	- reference section (aka footer) which contains supporting navigation, policies disclosures,
	copyright, signatures, etc.
	- navigation including primary, secondary, etc. navigation.  If navigation styles are complex
	a new navigation.css file might be justified to simplify editing.
*/

/* insert non-standard fonts here 
@font-face {
  font-family: "HighTower";
  src: url(../fonts/HTOWER.TTF) format("truetype");
}
*/

/*--- Element Styles -----*/
* {
	margin: 0;
	padding: 0;
}

html,body {
	height: 100%;
}

html {
	font-size: 125%;
}
body {
	font-size: 50%; /*Reset em to 10px*/
	font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, sans-serif;
    text-align: left;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
    font-size-adjust: none;
    font-stretch: normal;

	background: #253847;
	scrollbar-base-color: grey;
}

h1 { 
	font-size: 1.6em;
	color: #F16522;
}
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
strong {}


a {
	outline: none;
	color: #638DAD;
	text-decoration: none;
}

a img { border: none; }

p {
	margin: 0.5em;
}

li {

}

.menu li { display: inline;}
.list { list-style-type: none;  }

.smallfont { font-size: 0.9em; }

.frame{ /* frame divs are used for presentation of complext backgrounds
and rounded corners. */
	
}

/*--- Page Structure -----
Defines overall page structure without sub-elements */
#wallpaper { /* wallpaper is used to display background images */
	width: 100%;
	height: 100%;
	position: absolute;
}

#wrapper { 	/* wrapper is the overall page container.  it includes all of the page elements and allows page content to remain in the middle*/
	position: relative;
	width: 98%;
	min-width: 956px;
	min-height: 100%;
	top: 5%;
	text-align: left;
	z-index: 100;
}

#branding {
	/* branding (header) includes all branding and supporting elements usually at the top of the page */
	position: relative;
}
#search {}

.nav { /* primary navigation menu of the page */
}

#content-wrapper {
	/* wrapper of the content part of the page.  this is where modx [*content*] placeholder should go. */
	clear: both;
	position: relative;
	min-height: 200px;
	left: -25px;
	background: #F1F1F2;
	border: #F1F1F2 solid 1px;

}
#content-wrapper .ender {
	position: absolute;
	width: 23px;
	height: 21px;
	bottom: -1px;
	right: -1px;
	background: url(../images/card_bottom_right.jpg) no-repeat;

}

#page-reference {
	/* Page Reference (footer) can contain site and legal disclosures, supporting navigation menu, site map, etc. It is usually placed at the bottom of the page */
	background: #CD5621 url(../images/footer_background.png) repeat-x;	
	position: relative;
	clear: both;
	height: 92px;
	width: 100%;
	margin: 26px 0  0;
	left: -26px;
}

/*----- Wallpaper -------- */
/* styles for background images and textures.  might need several divs to achieve proper layout*/

/*----- Search -------- */
#search {}


/*----- Branding -------- */
/* Styles for elements inside the Branding container */
#branding {
	position: relative;
	padding: 0;
	height: 100px;
}

#logo {
	position: absolute;
	background: url(../images/napkin_logo.png);
	top: 15px;
	width: 273px;
	height: 147px;
	z-index: 955;
}
#branding .call-to-action {
	float: right;
	font-size: 12pt;
	line-height: 18pt;
}
#branding .menu { /* menu of links inside the branding container */
	width: 50%;
	color: #898989;
	text-align: right;
	float: right;
	padding: 16px 0px 0px 0px;
}
#branding .menu li {}
#branding .menu a, #branding .menu a:visited {}
#branding .menu a:hover {}

/*----- Primary Navigation -------- */
#primary-nav .menu ul{
	padding: 0 26px 0 0;
}

.nav {
	position: relative;
	margin: -50px 0 0 0;
	text-align: right;
	font-size: 12pt;
	font-weight: 600;
}
#nav_bar {
	position: relative;
	height: 53px;
	left: -24px;
	background: url(../images/card_top_background.jpg) repeat-x;
}
#nav_bar .ender {
	position: absolute;
	width: 92px;
	height: 53px;
	right: 0;
	top: 0;
	background: url(../images/card_top_right.jpg) right no-repeat;
	
}

.nav .menu {
	position: relative;
	top: 28px;
	height: 60px;
	margin: 0 20px 0 0;
	z-index: 1000;
	color: #638DAD;
}

.nav .menu a {
	display: block;
	height: 60px;
	float: right;
	margin: 0 0 0 2em;
	color: inherit;

}


.nav .menu a:hover {
	color: #F16522;
}

.nav .menu a.selected {
	background: url(../images/card_cutout.jpg) no-repeat bottom center;
	color: #F16522;
}

/*----- Napkin styles -------- */
/* Styles for elements inside the napkin */
#napkin-wrapper {
	float: left;
	width: 333px;
	top: 0;
	left: 0;
}
#napkin {
	position: relative;
	float: left;
	top: -30px;
	left: 25px;
	width: 296px;
	height: 271px;
	background: url(../images/napkin_big.png) no-repeat;
	z-index: 966;
}
#_napkin img {
	margin: 40px 0 0 20px;
	}

#slit {
	position: relative;
	float: left;
	left: 45px;
	width: 5px;
	height: 232px;
	background: url(../images/card_slit.jpg) no-repeat;
	z-index: 933;
	
}

.call-to-action {
	position: relative;
	clear: both;
	font-size: 1.5em;
	top: -25px;
	left: 50px;
}

/* Content styles are described in content-base.css */

/*----- Page Reference (footer) -------- */
/* Styles for elements inside the Reference container */
#page-reference .ender {
	position: absolute;
	width: 17px;
	height: 92px;
	right: -17px;
	background: url(../images/footer_end.png) right no-repeat;

}
#page-reference a {
	color: #F1F1F2;
	font-weight: 600;
}
#page-reference a:hover {
	color: #456A85;
}

#copyright {
	color: #FFFFFF;
	position: absolute;
	left: 20px;
	bottom: 20px;
	display: inline;
}

#reference .menu {
	float: right;
	text-align: right;
}
#reference .menu li {}

/*----- Errors -------- */
	/* Styles for displaying error pages and messages */


/*----- Legos -------- */
	/* Styles for displaying lego pieces */
#lego-canvas {
	position: relative;
	z-index: 1000;
}
.lego {
	position: absolute;
	z-index: 1001;
}
#lego1 {
	background: url(../images/lego_big_red.png) no-repeat;
	width: 111px;
	height: 93px;
	bottom: 35px;
	left: 75%;
}
#lego2 {
	background: url(../images/lego_small_blue.png) no-repeat;
	width: 71px;
	height: 74px;
	bottom: 35px;
	left: 80.10%;
}

/*Float clearing hacks*/
.floatcontainer:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

/**
 * Hack for IE
 */
* html #wrapper {
	width: 956px;
}