/* DOM */
#colorstories div, #theory div {
	font-family: Arial, Helvetica, sans-serif;
}
h1
{
	font-size:18px;
	font-weight:bold;
	color:#666666;
	letter-spacing:2px;
}
h2
{
	font-size:14px;
	font-weight:normal;
	color:#666666;
	letter-spacing:1px;
	line-height:21px;
}
h3 {
    color: #999999;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.75px;
}
h4
{
	font-size:12px;
	font-weight:normal;
	line-height:21px;
	color:#999999;
}
img
{
	border:0px;
	outline:none;
}

/* specific elements */

#colorstories
{
	overflow:hidden;
	font-family: "arial", sans-serif;
	width:1006px; 
	height:596px; 
	background:#efefef;
}
#landing
{
	position:absolute;
	width:100%;
	height:100%;
	background:transparent url('http://www.benjaminmoore.com/bm/colorstories/images/color_stories_books.jpg') no-repeat; /* IMPORTANT: if this changes, be sure to also change the url in the jQ doc ready statement! */
}
.caBG
{
	background:transparent url('http://www.benjaminmoore.com/bm/colorstories/images/color_stories_books_ca.jpg') no-repeat !important; /* IMPORTANT: if this changes, be sure to also change the url in the jQ doc ready statement! */
}
.frBG
{
	background:transparent url('http://www.benjaminmoore.com/bm/colorstories/images/color_stories_books_fr.jpg') no-repeat !important; /* IMPORTANT: if this changes, be sure to also change the url in the jQ doc ready statement! */
}
#colorstories #landing h1{
	position: absolute;
	overflow: hidden;
	top: -999px;
}
	#logo
	{
		position:absolute;
		left:0px;
		top:0px;
		display:block;
		width:auto;
		margin-left:36px;
		margin-top:10px;
		outline:none;
		cursor:default;
	}
	#landingLeft
	{
		float:left;
		width:180px;
		margin:106px 0px 0px 36px;
		padding:0px;
		border:0px #ff0000 solid;
	}
		#introCopy
		{
			margin:0px;
			padding:0px;
		}
		#introCopy div {
		    font-size: 10px;
		    font-style: italic;
		    font-weight: bold;
		    line-height: 1.45 !important;
		    margin: 0;
		    padding: 10px 0 0;
		}
		#introInstr {
		    border: 0 solid #FF0000;
		    margin: 26px 0 0 0;
		    padding: 0;
		    text-align: right;
		}
		#introInstr img
		{
			margin:12px 6px 0px 0px;
			padding:0px;
			border:0px #ff0000 solid;
			text-align:right;
		}
		#landingRight
		{
			float:right;
			width:190px;
			margin:122px 34px 0px 0px;
			padding:0px;
			border:0px #ff0000 solid;
		}
		#landingRight p {
			padding:5px 0 2px;
		}
		#landingRight #colorGallery{
			line-height:1.70em;
			font-size:11px;
		}
		.noRightButton{
			margin:300px 34px 0px 0px !important;	
		}
		#introTitle
		{
			margin:0px;
			padding:0px;
		}
		#introSubTitle
		{
			margin:10px 0px 0px 0px;
			padding:0px;
		}
		#introLinks
		{
			margin: 130px 0 0;
			padding: 0 0 65px;
		}
			#introLinks a
			{
				background: -webkit-linear-gradient(top, #868686, #535353);
				background: -moz-linear-gradient(top, #868686, #535353);
				background: -ms-linear-gradient(top, #868686, #535353);
				background: linear-gradient(top, #868686, #535353);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#868686', endColorstr='#535353');	
				border: 1px solid #CECECE;
				clear: both;
				color: #FCFCFC;
				float: left;
				font: bold 11px arial;
				margin: 2px 0;
				padding: 5px 18px;
				text-align: center;
				text-decoration: none;
				text-transform: uppercase;
				width: 150px;
			}
		#introLinks #buyPaint{
			/*line-height:20px;*/
		}

		#iPadApp
		{
			display:block;
			margin: 5px 0 0;
			padding:0px;
			font-size:11px;
			font-weight:normal;
			color:#999999;
			letter-spacing:1px;
			text-decoration:none;
		}
			#iPadApp img
			{
				float:left;
				margin:-10px 4px 0px 0px;
			}
	#books
	{
		position:absolute;
		width:520px;
		height:428px;
		left:246px;
		top:108px;
		border:0px #ff0000 solid;
		overflow:hidden;
	}
		.book { outline:none; float:left; height:100%; cursor:pointer; display:block; }
		#book0 { width:48px; /*background:#ffff00;*/ }
		#book1 { width:32px; /*background:#00ffff;*/ }
		#book2 { width:65px; /*background:#ffff00;*/ }
		#book3 { width:50px; /*background:#00ffff;*/ }
		#book4 { width:76px; /*background:#ffff00;*/ }
		#book5 { width:52px; /*background:#00ffff;*/ }
		#book6 { width:47px; /*background:#ffff00;*/ }
		#book7 { width:74px; /*background:#00ffff;*/ }
		#book8 { width:72px; /*background:#ffff00;*/ }

#pages
{
	display:none;
	position:absolute;
	width:1006px;
	height:526px;
	top:70px;
	border:0px red dotted;
}

	#theory
	{
		width:100%;
		height:526px;
		left:0px;
		top:0px;
		background:#cccccc url('http://media.benjaminmoore.com/WebServices/prod/ColorStories/images/cs_theory_bg.jpg') no-repeat 0px 3px;
	}
		#theorySwatch
		{
			margin:96px 0 0 0;
			border:0px;
			outline:none;
		}
		#theoryPDF
		{
			margin:28px 0px 0px 36px;
			width:180px;
			display:block;
			text-decoration:none;
			font-size:11px;
			font-weight:normal;
			color:#666666;
			letter-spacing:1px;
			line-height:15px;
			outline:none;
		}
		#theoryContent
		{
			padding:70px 0 0 30px;
			width:310px;
			font-size:12px;
			font-weight:normal;
			color:#666666;
			line-height:24px;
		}
			#theoryContent h1
			{
				margin-bottom:8px;
			}
			#theoryContent h2
			{
				margin-bottom:14px;
				font-size:12px;
				font-weight:bold;
				color:#333333;
			}

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url(http://media.benjaminmoore.com/WebServices/prod/ColorStories/images/black_arrow.png);
	font-size:12px;
	height:auto;
	width:160px;
	padding:15px 15px 0px;
	margin:0;
	color:#eee;
	border:1px solid #303030;
	box-shadow:0 0 5px 5px #5f5f5f;
	-webkit-box-shadow:0 0 5px #5f5f5f;
	-moz-box-shadow:0 0 5px #5f5f5f;
	filter:progid:DXImageTransform.Microsoft.Shadow(Color=#5f5f5f,Strength=3,Direction=0), 
	progid:DXImageTransform.Microsoft.Shadow(Color=#5f5f5f,Strength=3,Direction=90), 
	progid:DXImageTransform.Microsoft.Shadow(Color=#5f5f5f,Strength=3,Direction=180), 
	progid:DXImageTransform.Microsoft.Shadow(Color=#5f5f5f,Strength=3,Direction=270)\9;
}
#innerToolTop {
	margin:0;
	position:relative;
	bottom:-30px;
	right:25px;
}
    
#colorstories #loading{position: absolute; width: 50%; height: 60px; line-height: 80px; left: 25%; top: 20%; font-family:Arial, Helvetica, sans-serif; font-size: 16px; color: rgb(153, 153, 153); padding: 10px; border:none; text-align: center; background: url('images/ajax-loader.gif') no-repeat scroll center top transparent; display: none;}
#colorstories #ui{position: absolute; width: 1006px; height: 596px;}