/* Fix for elements containing only floated elements*/
.clearfix:before,
.clearfix:after { content: " "; display: table; }
 
.clearfix:after { clear: both; }
 
/* IE6/7 support */
.clearfix { *zoom: 1; }

/************************************************************************************
Layout
*************************************************************************************/
.head { position: absolute; top: 2em; z-index: 10; width: 100%; text-align: center;}
#TVgif { display:none;}
.Flashwrapper{max-width: 1000px; margin: 0 auto;}

footer { position:fixed; left:0; bottom:0px; padding: 1em; }

/* Portfolio Ribbon */
div.ribbon-wrapper {
  width: 125px;
  height: 180px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 500;
}

div.ribbon {
  text-align: center;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 1px 0;
  left: -20px;
  top: 20px;
  width: 200px;
  background-color: #99C;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
  border: 2px dashed #fff;
  box-shadow: 0 0 0 4px #99C, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
}


.ribbon a {color: #fff; font:  1em 'Anton', sans-serif;}

/************************************************************************************
	smaller screens
*************************************************************************************/
@media only screen and (max-width: 850px) {

	h1{font-size:  2.5em; line-height: 2em; margin: 0px;}
	h2{ font-size: 1em; }
	.Flashwrapper{ margin-top: 1.5em;}
}

/************************************************************************************
	iPhone [portrait + landscape] 
*************************************************************************************/

@media handheld, only screen and (max-width: 700px) {

	.Flashwrapper{ display:none;}
	#TVgif { display: block; width: 100%; margin:auto; margin-top: 150px; }
	img {width: 90%; margin: 0 5%;}
	h1{font-size:  1.8em; line-height: 1.1em; margin: 5px 45px;}
	h2{ font-size: 0.8em; }
	p{ font-size: 1.1em; }
	footer {width: 100%;}
	.stitched {
	   margin: 10px 0;
	   border-left: none;
	   border-right: none;
	   border-radius: 0;
	   padding: 5px;
	}
}

/************************************************************************************
	small mobile [portrait + landscape] 
*************************************************************************************/

@media handheld, only screen and (max-width: 480px) {

	.Flashwrapper{ display:none;}
	#TVgif { display: block; width: 100%; margin-top: 4em; }
	img {width: 80%; margin: 0 10%;}
	.head {top: 0.9em;}
	h1{font-size:  1em; line-height: 1.1em; margin: 5px 45px; text-shadow:none;}
	h2{ font-size: 0.6em; }
	p{ font-size: 0.8em; }
	footer {width: 100%; position: static;}
	.stitched {
	   margin: 10px 0;
	   border-left: none;
	   border-right: none;
	   border-radius: 0;
	   padding: 5px;
	}
	/* Portfolio Ribbon */
	div.ribbon-wrapper {
	  	width: 85px;
  		height: 88px;
	}
	div.ribbon {
	  	padding: 2px 0;
	  	left: -15px;
  		top: 12px;
	  	width: 140px;
	}
	.ribbon a {color: #fff; font:  0.8em 'Anton', sans-serif;}
}