@import url(reset.css);

/*type styles*/
body				{
					font-family: trebuchant, verdana, arial, sans-serif, "tahoma", helvetica, arial, sans;
					font-size: .75em;
                    font-weight: 90;
					line-height: 1.875em;
					color: gray;
					margin: 0;
					}








/* container to center page with 10% borders on either side*/
div.container		{width: 70%;
					margin: auto;
					padding: 2%;
					border-bottom: none;}

/* 28 percent column */
div.col				{width: 28%;
					padding-right: 3%;
					float: left;}
					


/* double column width */					
div.doublecol		{
					width: 56%;
					padding-right: 10%;
					float: left;
					}


/* dark background at bottom*/					
div.gray			{background-color: #cccccc;
					color: #666666;}	








/* keeps images in their colums*/					
div.col img			{max-width: 100%;
					padding: 1% 0 1% 0;
					display: block;}






div.doublecol img	{max-width: 100%;
					display: block;
                    padding: 2% 0 2% 0;}




/*not sure if I need this*/
div.container p 	{
					display: block;
					margin-bottom: 1.5em;					 
					}
										


.nav				{width: 100%;}


.narrownav			{width: 75%;
					padding-top: 0%;
					padding-bottom: 10%;}


.lockup				{widows: 80%; 
					display: block;
					padding-top: 0%;}	
					
.noborder			{border:none;}


/* styles for meta section*/
div.meta			{display: block;}					






/*captions for images*/
.caption			{
					font-size: .5em;
					display: block;
					padding: 1% 0 5% 0;
					line-height:1.5em;
                    color: #333;
					}

		
		
		
		
		
					
/* logo placement*/
img#logo			{float: left;
					padding: 8% 5% 0% -0.5%;
					width: 25%;
					max-width: 300px;
					border-color: white;
					}


/* title style and placement					
div.container h1 	{
					margin: 0% 25% 10% 0%;
					font-size: .75em;
					font-weight: 100;
					color: #333;
					}*/
					
/*h1 is for the motikon identity if not using an image logo*/
h1					{
					font-size: 2.75em;
					color: #666666;
					font-weight: 100;
					display:inline;
					margin: 10% 0 0 0%;
					border-bottom: hidden;}

					
/* h2 is used for article titles*/

h2					{
					font-size: 1.5em;
                    color: #333333;
                    font-weight: 900;}
		
		
		
		
					
h3					{
					font-size: 1.25em;
                    color: #666666;
                    font-weight: 900;}


					
h4					{
					font-size: 1em;
					color: #333333;
					font-weight: 900;
					margin-bottom: 0%;}					




img					{
					border: 0px;
					}




/* pseudo states*/
a:link				{
					font-weight: normal;
					color: #666666;
					text-decoration: none;
					display: block;
					border-bottom-style: dotted;
					border-bottom-width: thin;
					border-bottom-color: #666666;
					}

a:hover				{
					font-weight: normal;
					color: #ff8000;
					background-color: white;
					text-decoration: none;
					display: block;
					border-bottom-style: dotted;
					border-bottom-width: thin;
					border-bottom-color: #666666;
					}

a:active			{
					font-weight: normal;
					color: #000000;
					background-color: none;
					text-decoration:underline;
					display: block;
					border-bottom-style: dotted;
					border-bottom-width: thin;
					border-bottom-color: #666666;
					}


a:visited				{
					font-weight: normal;
					color: #333333;
					text-decoration: none;
					display: block;
					border-bottom-style: dotted;
					border-bottom-width: thin;
					border-bottom-color: #999999;
					}






/* for keeping layout units from overflowing*/					
.clearfix::after	{
					content: ".";
					display:block;
					height: 0;
					clear: both;
					visibility: hidden;					
					}

/* for IE6 */
					* html .clearfix {
					height: 1%;}

/*for IE7 */
					*:first-child+html .group {
					min-height: 1px;}