/*
red  c54f40
blue 68b9cd
*/


/* ______________________________________

   tags
   ______________________________________
*/

html,
body {
	margin: 0;
	padding: 0;
}
	
body {
	background: #fff;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	color: #494c41;
	font-size: 13px;
}

img {
	border: 0;
}

a {
	cursor: pointer;
	color: #68b9cd;
}

a:hover {
	color: #c54f40;
}

/* ______________________________________

   main appearance ids and classes
   ______________________________________
*/

#wrap {
	width: 1000px;
	margin: 0;
	line-height: 130%;
	cursor: default;
	text-align: left;
	background: url('../images/menu_portfolio_hover.png') -4000px -4000px no-repeat; /* preload */
}

#header {
	margin: 0 0 10px 0;
	height: 147px;
	background: #fff url('../images/menu_tearsheets_hover.png') -4000px -4000px no-repeat; /* preload */
}

#logo {
	float: left;
	background: url('../images/menu_scratchbook_hover.png') -4000px -4000px no-repeat; /* preload */
	margin: 35px 41px;
}

#error, #jswarning {
	background: #fff;
	margin: 0 0 0 276px;
	color: #aaa;
}

#intro, #basicbird {
	width: 920px;
	margin-left: 236px;
}

#contact {
	margin: -10px 0 0 235px;
	width: 400px;
	padding: 10px 250px 0 65px;
	background: url('../images/contact_opacity.png') repeat-x;
	/* text for contact page */
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 11px;
	color: #ac4744;
}

#portfolio, #scratchbook, #tearsheets {
	margin-left: 236px;
	width: 920px;
	position: relative;
}

#portfolio img, #scratchbook img {
	border: 0px solid #000;
	float: left;
	max-width: 800px;
}

#portfolio div, #scratchbook div, #tearsheets div {
	position: absolute;
	left: 0;
	top: 0;
}

#portfolio p, #scratchbook p {
	clear: both;
	color: #68b9cd;
	font-weight: bold;
	font-size: 10px;
	margin-top: 3px;
	float: left;
}

#tearsheets span {
	clear: both;
}    

#tearsheets {
	margin-left: 231px;
	width: 800px;
	position: relative;
}

#tearsheets a {
	height: 190px;
	width: 190px;
	float: left;
	border: 1px dashed #68b9cd;
	color: #000;
	margin: 0 5px 10px 5px;
	padding: 5px;
	font-size: 11px;
	text-align: center;
	overflow: hidden;
}

#tearsheets a:hover {
	border: 1px dashed #c54f40;
}

#tearsheets a img {
	max-height: 140px;
	max-width: 190px;
	height: expression( document.body.clientHeight > 140 ? "140px" : "auto" );
	width: expression( document.body.clientWidth > 190 ? "190px" : "auto" );
	margin: 0 auto;
}

#tearsheets a span {
	text-align: left;
	width: 190px;
	float: left;	
}

#overlay {

}

#caption {
	color: #c54f40;
	margin-left: 10px;
}

.close-x {
	color: #000;
	font-weight: bold;
	font-size: 1.3em;
	text-decoration: none;
}

.close-x:hover {
	color: #c54f40;
}

/* ______________________________________

   menu
   ______________________________________
*/

#menu {
	float: left;
	margin: 32px 0 0 9px;
	background: url('../images/menu_basicbird_hover.png') -4000px -4000px no-repeat; /* preload */
}

#menu ul {
	margin: 0;
	padding: 0;	
	list-style-type: none;
	background: url('../images/arrow_left_hover.png') -4000px -4000px no-repeat; /* preload */
}

#menu li {
	float: left;
	background: url('../images/menu_contact_hover.png') -4000px -4000px no-repeat; /* preload */
}

#menu-portfolio {
	background: #fff url('../images/menu_portfolio.png') no-repeat;
	float: left;
	height: 40px;
	width: 60px;
}

#menu-portfolio:hover {
	background: #fff url('../images/menu_portfolio_hover.png') no-repeat;
}

#menu-tearsheets {
	background: #fff url('../images/menu_tearsheets.png') no-repeat;
	float: left;
	height: 60px;
	width: 42px;	
}

#menu-tearsheets:hover {
	background: #fff url('../images/menu_tearsheets_hover.png') no-repeat;
}

#menu-scratchbook {
	background: #fff url('../images/menu_scratchbook.png') no-repeat;	
	float: left;
	height: 36px;
	width: 44px;
	margin-left: -15px;	
}

#menu-scratchbook:hover {
	background: #fff url('../images/menu_scratchbook_hover.png') no-repeat;
}

#menu-contact {
	background: #fff url('../images/menu_contact.png') no-repeat;
	float: left;
	height: 48px;
	width: 42px;
}

#menu-contact:hover {
	background: #fff url('../images/menu_contact_hover.png') no-repeat;
}

#menu-basicbird {
	background: #fff url('../images/menu_basicbird.png') no-repeat;
	float: left;
	height: 37px;
	width: 49px;		
}

#menu-basicbird:hover {
	background: #fff url('../images/menu_basicbird_hover.png') no-repeat;
}

/* ______________________________________

   nav arrows
   ______________________________________
*/

#arrows {
	float: left;
	margin: -29px 0 0 233px;
	background: url('../images/arrow_right_hover.png') -4000px -4000px no-repeat; /* preload */
}

#arrow-previous {
	background: #fff url('../images/arrow_left.png') no-repeat;
	float: left;
	height: 20px;
	width: 18px;		
}

#arrow-previous:hover {
	background: #fff url('../images/arrow_left_hover.png') no-repeat;
}

#arrow-next {
	background: #fff url('../images/arrow_right.png') no-repeat;
	float: left;
	height: 20px;
	width: 18px;		
}

#arrow-next:hover {
	background: #fff url('../images/arrow_right_hover.png') no-repeat;
}

/* ______________________________________

   utility classes
   ______________________________________
*/

.invisible {
	display: none;
}