@charset "UTF-8";
/*------------------------------------------------------------------
[Master Stylesheet]

	Project:    	Cromwell Designs
	Version:    	1.0.X

-------------------------------------------------------------------*/


/* Stylesheet Reset */
	@import "reset.css";
	@import "fonts.css";
	
/* ==================================================================
0.1 Fonts
================================================================== */


a	{color: #a00;}
a:hover	{text-shadow: 0px 0px 4px #a00}

a[href^=http]	{
	background-image: url(images/external-small.png); 
	background-position: right 3px;
	background-repeat: no-repeat;
	display: inline-block; 
	padding-right: 15px; margin-right: 2px;
	}

abbr	{border-bottom: 1px dotted #888;}

/* ==================================================================
1.0 Body Styles
================================================================== */

body	{
	font-family: Helvetica, Arial, Geneva, sans-serif;	font-size: 10px; font-size:100%; line-height:1.6; 
	background-attachment:fixed; 
	
	background: #eee; /* old browsers */
	background: -moz-linear-gradient(top, #fff 75%, #ccc 95%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,#fff), color-stop(95%,#ccc)); /* webkit */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#ccc',GradientType=0 );  ie */

	}

body.experiment	{background:#fff;}


h1, h2, h3 {font-weight: normal;}
h1, h2, h3 { margin-top:0; margin-bottom:0; }

p, address	{
	margin: 0.8em 0;
	}
ul		{list-style-type: disc;}

aside	{
	display: block;
	padding: 0px 30px 10px;
	font-size: 0.8em;
	background-color: #e8e8e8;
	margin: 5px 0 20px 0px;
	
	border-top: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8;
	border-bottom: 1px solid #d8d8d8;
	border-left: 60px solid #d8d8d8;
	}

	
/* ==================================================================
1.2 	Reusable Elements
================================================================== */

.fright	{float: right; clear: both;	margin: 0px 0 20px 30px;}


/* ==================================================================
1.3 	Wrappers
================================================================== */

#outerWrapper	{margin: 0; padding: 0;	}
#wrapper		{margin: 0; padding: 0;}


/* ==================================================================
1.4 	Body Styles
================================================================== */



/* ==================================================================
1.5		Headers
================================================================== */

.tag {
	/*position: fixed;*/
	position: absolute;
	top: 0; left: 50px;
	width: 270px;
	margin: 0 !important; padding: 0;
	}
.tag hgroup	{
	width: 200px;
	color: #fff;
	font-size: 16px;
	padding: 35px;
	padding-bottom: 20px;
	
	background: #880000; /* old browsers */
	background: -moz-linear-gradient(top, #880000 0%, #AA0000 61%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#880000), color-stop(61%,#AA0000)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#880000', endColorstr='#AA0000',GradientType=0 ); /* ie */
	}
	
.tag h1	{
	font-size: 46px;
	font-family: LeagueGothic, "Arial Black", Arial, Helvetica, san-serif;
	padding-bottom: 15px;
	margin-bottom: 15px;
	line-height: 0.90;
	}
	.tag h1 a	{text-decoration: none; color: #fff;}
	.tag h1 a:hover	{text-shadow: 0px 0px 6px #fff, 0px 0px 6px #fff;}

.tag h2	{
	font-size: 26px;
	font-family: Raleway,"Arial Narrow", "Helvetica Thin", Arial, Helvetica, san-serif; san-serif;
	color: #fff;
	border-top: 4px double #ccc;
	border-bottom: 4px double #ccc;
	padding: 5px 0 15px 0;
	}

/* ==================================================================
1.6		Navigation
================================================================== */
 nav	{position: absolute; }
 nav ul 	{
 	width: 270px;
 	padding: 0; 
 	margin: 0; 
 	list-style: none;
 	overflow: hidden;
 	}
 
 nav ul li	{
 	margin: 20px 0;
 	background-color: #a00;  
  	-webkit-transform: rotate(-5.25deg); 
	-moz-transform: rotate(-5.25deg);
	-ms-transform: rotate(-5.25deg);
	transform: rotate(-5.25deg); 
 	}
 	
 	
 nav ul li a	{
 	color: #fff; display: block; padding: 0px 20px;
 		
	font-size: 25px;
	font-family: ChunkFive, Arial, Helvetica, san-serif; san-serif;
	text-decoration: none;
	font-weight: normal;

	-webkit-transition: padding 0.5s ease-in-out, text-shadow 0.18675s ease-in-out; 
	-moz-transition:	padding 0.5s ease-in-out, text-shadow 0.18675s ease-in-out; 
	-o-transition: 		padding 0.5s ease-in-out, text-shadow 0.18675s ease-in-out;
	-ms-transition: 	padding 0.5s ease-in-out, text-shadow 0.18675s ease-in-out;
	transition: 		padding 0.5s ease-in-out, text-shadow 0.18675s ease-in-out;
	
 	}
 	
 nav ul li::before, nav ul li::after	{
	content: "";
	position: absolute; top: 0;
	background-color: #a00;
	height: 40px;
	width: 9999px;
 	}
 	nav ul li::before	{left: 100%;}
 	nav ul li::after	{right: 100%;}

	
	
	
	nav ul li a.current	{
		-ms-text-shadow: 0 0 3px #fff;
		text-shadow: 0px 0px 3px #fff;
		padding-left: 165px;
		}
 	nav ul li a:hover	{
 		text-shadow: 0px 0px 6px #fff, 0px 0px 6px #fff;
 		}
 	 	
 	
 

.wedge	{ 
	background-color: #a00;
	-webkit-transform: rotate(-5.25deg); 
	-moz-transform: rotate(-5.25deg);
	-ms-transform: rotate(-5.25deg);
	transform: rotate(-5.25deg);
	height: 40px;
 	margin-bottom: 20px;
 	margin-top: -15px;
 	}
 	
 	
 .wedge::before, .wedge::after	{
 	content: "";
 	position: absolute; top: 0;
 	background-color: #a00;
 	height: 40px;
 	width: 9999px;
  	}
  	.wedge::before	{left: 100%;}
 	.wedge::after	{right: 100%;}

/* ==================================================================
1.7		Content
================================================================== */

#content	{
	width: 600px;	
	display: block;
	margin: 0px 0 0 380px;
	padding: 48px 0 0 0;
	}
	 
	#content  ul.featureList	{background-color: rgba(0,0,0,0.1); 
		-moz-border-radius: 20px;
		-o-border-radius: 20px;
		-webkit-border-radius: 20px;
		border-radius: 20px; 
		
		padding: 20px 20px 20px 40px; 
		font-size: 0.8em;
		}
	
.signature	{
	font-family: Blackjack, san-serif;
	font-size: 2.25em;
	text-align: right;
	}

#content article header h1	{
	color: rgba(170, 0, 0, 0.95);
	font-family: ChunkFive, "Arial Black", Arial, Helvetica, san-serif;
	font-size: 48px;
	margin-bottom: 0;
	padding-bottom: 0;
	line-height: 1.0;
	}
#content article header h2	{
	color: rgba(0,0,0, 0.66);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: left;
	line-height: 1.0;
	}
#content article h2	{
	color: rgba(170,0,0, 0.90);
	font-family: LeagueGothic, Arial, Helvetica, sans-serif;
	font-size: 32px;
	text-align: left;
	line-height: 1.0;
	}
	
#content.work article header h2	{
	font-size: 15px;
	text-align: left;
	line-height: 1.0;
	}
	
	
	
#content header {
	margin-bottom: 25px;
	}

#content article	{ padding-bottom: 25px; margin-bottom: 30px; border-bottom: 4px double #ddd;}
#content article:last-child	{border-bottom: none;}

#content article figure	{ 
	margin: 10px;
	border: 3px double #ddd;
	-webkit-box-shadow:	2px 2px 6px rgba(0, 0, 0, 0.125);
	-moz-box-shadow:	2px 2px 6px rgba(0, 0, 0, 0.125);
	-o-box-shadow:		2px 2px 6px rgba(0, 0, 0, 0.125);
	box-shadow:			2px 2px 6px rgba(0, 0, 0, 0.125);
	}
#content article figure a	{background-image: none; display: inline; padding: 0; margin: 0;}
#content article figure figcaption	{display: block;  padding: 3px 20px; background-color: rgba(0,0,0,0.8); font-size: 0.6em; color: #fff;}
#content article figure figcaption a	{ color: #fff; text-decoration: none;}
#content article figure figcaption a:hover	{ text-shadow: 0 0 3px #fff, 0 0 3px #fff;}
#content article figure figcaption a[href^=http]	{
	background-image: url(images/external-small.png); 
	background-position: right 2px;
	background-repeat: no-repeat;
	display: inline-block; 
	padding-right: 15px; margin-right: 2px;
	}
/* ==================================================================
1.8		Footer
================================================================== */

footer	{
	width: 100%;
	height: 400px;
	margin-top: 40px;
	background-color: #0072ab;
	background-image: url(images/paper.png);

	-webkit-box-shadow: -3px 0 5px #000;
	-moz-box-shadow: -3px 0 5px #000;
	box-shadow: 0px -3px 10px #fff;

	}




/* ==================================================================
2.0		Specific Styles
================================================================== */





/* ==================================================================
3.0		Special Styles
================================================================== */
#content.work	{
	width: 900px;	
	display: block;
	margin: 0px 0 0 380px;
	padding: 48px 0 0 0;
	}
.collection	{}

.collection .item	{
	position: relative;
	display: inline-block;
	width: 240px;
	height: 500px;	
	border: 3px double #888;
	margin: 15px 15px 0 0;
	padding: 15px;
	font-size: 0.75em;
	}
.collection img	{margin:0 0 20px 0; border: 1px solid #888;}

.collection h1	{
	color: rgba(170, 0, 0, 0.95);
	font-family: ChunkFive, Arial, Helvetica, san-serif;
	
	font-size: 18px;
	margin-bottom: 0;
	padding-bottom: 0;
	line-height: 1.0;
	}
.collection a	{
	position: absolute;
	bottom: 10px;
	right: 10px;
	}


#content .collection ul	{
	background-color: transparent; 
		-moz-border-radius: 0px;
		-o-border-radius: 0px;
		-webkit-border-radius: 0px;
		border-radius: 0px; 
		padding: 0 0 0 20px; 
		font-size: 1em;
		}