/*
* app.css
*
*/

@media screen {


	/*--- show/hide content ---*/
	.mobile,
	#projects .project_item .close_btn,
	#projects .project_item .display_img { display: none; }

	/*--- fonts ---*/
	body { font-family: Helvetica; }

	#header_global h2,
	#projects .title { font-family: 'PT Sans Narrow', sans-serif; }

	#header_global h1 { font-family: 'PT Sans Narrow', sans-serif; font-size: 22px; line-height: 27px; z-index: -1; /*font-style: italic;*/ }
	
	/*--- sprites ---*/
	#other_info_links li a { background: url('../../images/d.sprite.icons.png') center 0 no-repeat; text-indent: -9999em; 	}
	#other_info_links li #linkedin_link { background-position: center -22px; }
	#other_info_links li #mailto_link { background-position: center -44px; }
	#projects .project_item .close_btn { background: url('../../images/close_btn.png') right 0 no-repeat; text-indent: -9999em; }

	#projects li .title { background: url('../../images/sprite.titles.png') center 0 no-repeat; }
	#projects #old_navy .title { background-position: center -307px; }
	#projects #jell-o_jiggleIt .title { background-position: center -210px; }
	#projects #bdw .title { background-position: center -814px; }
	#projects #belvita_breakfast .title { background-position: center 0; }
	#projects #dominos_cheesyfont .title { background-position: center -400px; }
	#projects #dominos_pizzahero .title { background-position: center -400px; } /*-620px;*/
	#projects #kraft_dinnernotart .title { background-position: center -500px; }
	#projects #what_a_quitter .title { background-position: center -723px; }
	#projects #heylookmyblog .title { background-position: center -100px; }
	#projects #comcast .title { background-position: center -891px; }
	#projects #sally_hansen .title { background-position: center -950px; }

	#projects li:hover .title { opacity: 1; }

	/*--- colors ---*/
	body { background: #fff; }
	
	#other_info_links { border-color: transparent; border-width: 1px; }

	#projects li .title { color: #000; opacity: .7; }

	#header_global,
	#header_global .logo { color: #3CF; /*background: rgba(51,204,255,.1); */}

	.external_link { color: #000; }
	.external_link:focus,
	.external_link:hover { color: #878175; }

	#projects #header_global { border-left-color: #3cf; opacity: 1; }

	#other_info_links li a { opacity: .7; }

/*	#projects li.visited .display_img, 
	#projects li.visited .title { opacity: .5; }

	#projects li:focus .display_img,
	#projects li:hover .display_img,
	#projects li.visited:focus .display_img,
	#projects li.visited:hover .display_img { opacity: 1; }

	#projects li:focus .title,
	#projects li:hover .title,
	#projects li.visited:focus .title,
	#projects li.visited:hover  .title { opacity: 1; }*/

	#projects li .project_thumb { display: block; height: 100%; width: 100%; }
	.displayActive .project_thumb { height: 230px; width: 230px; }

	#projects .project_item,
	#header_global { border-width: 1px; }

	.description p,
	#projects .project_item .display_img { border-color: #878175; border-width: 1px; }

	.show_more { background: black; }
	
	/*--- structure ---*/
	#section_main { margin: 40px auto; width: 501px; }
	#section_main.displayActive { max-width: 1000px; min-width: 320px; width: auto; }
	.displayActive #section_content { margin-left: 20px; }
	#section_content {
		-webkit-transition: margin-top .3s ease;
		-moz-transition: margin-top .3s ease;
		transition: margin-top .3s ease;
	}

	.tip { color: #a7a8a8; display: none; font-size: .5em; line-height: 1.2em; top: 0; }
	#shuffle { display: none; }

	.displayActive #projects li .title,
	.displayInactive #projects li .title { text-indent: -9999em; }

	#projects li { border-style: solid; border-top-color: #3cf; border-right-color: #3cf; border-bottom-color: transparent; border-left-color: transparent; float: left; height: 165px; display: block; margin: 0; overflow: hidden; /*padding: 3%;*/ position: relative; width: 165px;
		-webkit-transition: width .3s ease;
		-moz-transition: width .3s ease;
		transition: width .3s ease;
	}

	/*--- header ---*/

	#change_layout { bottom: 28px; cursor: pointer; display: none; font-size: .6em; }

	#other_info_links { height: 20px; margin: 0 auto; width: 86px; }
	#other_info_links li { border-color: transparent; border-width: 0; float: left; height: 20px; padding: 0 13px 0 0; width: 20px; }
	#other_info_links li a { display: block; height: 100%; text-indent: -9999em; width: 100%; }
	#other_info_links li:last-child { padding-right: 0; }

	#other_info_links li a:focus,
	#other_info_links li a:hover { opacity: 1; }

	#projects #header_global { font-size: 1.3em; line-height: 1em; }

	#header_global .logo { display: block; margin: 16px auto 7px; text-align: center; text-transform: uppercase; }

	#header_global h1 b { font-size: 19px; line-height: 18px; text-indent: 11px; }
	#header_global h2 { font-size: 16px; margin: -2px auto 0; text-transform: uppercase; text-align: center; }

	/*--- list item borders ---*/
	.displayInactive #projects .project_item:nth-child(3n), 
	.displayActive #projects .project_item:nth-child(3n+2) { border-right-color: transparent; }

	.displayInactive #projects .project_item:nth-child(3n+1) { border-left-color: transparent; }

	.displayInactive #projects .project_item:nth-child(2),
	.displayInactive #projects .project_item:nth-child(3),
	.displayActive #projects .project_item:nth-child(3),
	.displayActive #projects .project_item:nth-child(4),
	.displayActive #projects .project_item:nth-child(5) { border-top-color: transparent; }

	.displayActive #projects .project_item:nth-child(7),
	.displayActive #projects .project_item:nth-child(8) { border-bottom-color: #3cf; }

	/*--- list items ---*/
	.displayActive #projects li .project_thumb { height: 225px; margin: 0 auto; width: auto; }
	#projects .project_item .display_img { border-style: solid; position: absolute; z-index: -1; }

	#projects .project_item .display_img,
	#projects .project_item .title { height: 84%; left: 8%; position: absolute; top: 8%; width: 84%; }

	#projects .project_item .title { font-size: .9em; height: 100px; display: block; line-height: 13em; margin: -50px 0 0 0; overflow: hidden; text-align: center; text-decoration: none; text-indent: -9999em; top: 50%; }
	#projects .project_item .close_btn { height: 30px; position: absolute; top: 7px; right: 13px; width: 30px; z-index: 1; }
 
	#projects .mobile.show_more { bottom: 0; color: #fff; font-size: .6em; position: absolute; width: 100%; }
	#projects .more_info { border-style: none; bottom: 0; color: #fff; display: none; position: relative; top: -20px; width: 100%; }
	.description { color: #000; font-size: .8em; margin: 0 auto; padding: 2% 0 0 0; width: 98%; }
	.description p { border-style: none dotted none none; font-size: 12px; float: left; min-height: 7em; padding: 0 .8em .8em; width: 45%; }
	.description p:last-child { border-style: none; }
	.description em { display: block; font-size: .87em; font-style: normal; margin: .8em 0 .3em 0; text-transform: uppercase; }

	#kraft_dinnernotart .description p { height: 9em; }
	#what_a_quitter .description { width: 64%; }

	/*--- active list item ---*/
	#projects li.active .display_img,
	#projects li.active .title { display: block; position: static; }

	#projects li.active .title { background: none; text-indent: 0; }

	.displayActive #projects li.active { border-style: none; height: auto; margin-bottom: 3%; opacity: 1; padding: 0; position: relative; width: 96%; 
		-moz-box-shadow: 1px 1px 5px #000;
		-webkit-box-shadow: 1px 1px 5px #000;
		box-shadow: 1px 1px 5px #000;
	}
	.displayActive #projects .project_item { height: 32%; width: 32%; }
	.displayActive #projects .project_thumb { margin: 0 auto; }
	.displayActive #projects li.active .project_thumb { height: 40px; position: absolute; text-align: center; top: 0; width: 100%; }
	
	#projects li.active .project_name { cursor: default; }

	#projects li.active .title,
	.nojs #projects li .title { border-style: none; font-size: 19px; height: auto; line-height: 62px; opacity: 1; position: absolute; text-align: center; text-transform: uppercase; top: 50px; }
	
	#projects li.active .display_img,
	.nojs #projects li .display_img { height: 434px; height: auto; margin: 80px auto 0; opacity: 1; width: 96%; }
	
	#projects #what_a_quitter .display_img { max-width: 399px; }

	#projects li.active .more_info { display: block; }

	#projects li.active .close_btn { display: block; }
	
}


/*---  Global Mobile ---*/
@media only screen and (max-width: 480px) {

	#section_main { margin: 0 auto; }
	#section_main,
	#projects .project_item,
	.displayActive #projects .project_item,
	#projects #header_global { height: 90px; padding: 0; width: 100%; }

	#projects #header_global { height: 140px; }

	/*--- sprites ---*/
	#other_info_links li a { background: url('../../images/m.sprite.icons.png') center 0 no-repeat; text-indent: -9999em; }
	#other_info_links { height: 34px; width: 138px; }
	#other_info_links li { height: 30px; padding: 0 25px 0 0; width: 30px; }
	#other_info_links li #linkedin_link { background-position: center -34px; }
	#other_info_links li #mailto_link { background-position: center -67px; }

	#projects #header_global { border-left-color: transparent; border-top-color: transparent; }

	#projects .project_item { border-right: none; }

	#other_info_links li a { opacity: 1; }
	#other_info_links { height: 34px; margin: 0 auto; width: 140px; }

	.displayInactive #projects .project_item:nth-child(2),
	.displayInactive #projects .project_item:nth-child(3),
	.displayActive #projects .project_item:nth-child(3),
	.displayActive #projects .project_item:nth-child(4),
	.displayActive #projects .project_item:nth-child(5) { border-top-color: #3cf; }

	.displayActive #projects .project_item:nth-child(7),
	.displayActive #projects .project_item:nth-child(8) { border-bottom-color: transparent; }

	#projects li.active .title { font-size: 19px; opacity: 1; }

	#projects .project_item .close_btn { height: 10%; width: 100%;}

}

/*---  Mobile Portrait ---*/
@media only screen and (max-width: 320px) {
	.description p { border: none; width: 95%; }
} 

/*--- no js ---*/
noscript { background: #000; color: #fff; height: 30px; position: fixed; text-align: center; top: 0; width: 100%; z-index: 1; }
noscript a { color: #fff; }

.nojs #section_main { max-width: none; width: 730px; }

.nojs #projects li .more_info { display: block; }

/*.nojs #projects #header_global { height: 80px; }
.nojs #header_global h2 { margin-top: 43px; }
.nojs #other_info_links { margin-top: 0; }
.nojs #projects #other_info_links li { height: 30px; float: left; margin: 0 10px 0 0; padding: 0; width: 30px; }*/

.nojs #projects #header_global h2,
.nojs .tip,
.nojs #other_info_links,
.nojs #change_layout { position: static; }

.nojs #projects .project_item { float: none; display: block; height: auto; margin-bottom: 20px; opacity: 1; width: 678px; }

.nojs #projects li .display_img { position: static; }

.nojs #projects li .project_thumb { cursor: default; }
/*.nojs #projects li .title { border-style: none; height: 35px; top: 0; }*/
.nojs #projects li .display_img { border-style: none; display: block; /*height: auto; opacity: 1; width: 100%;*/ }
/*.nojs #projects li .more_info { display: block; position: relative; }
.nojs #change_layout { margin: 2px 0; }*/

.nojs #projects li .title { background: none; text-indent: 0; }

.nojs #projects li .close_btn,
.nojs #projects li .tip { display: none; }