/******************Mobile Layout***********************************************/
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFF;
	padding: 0px;
	font: 100%  Arial, Helvetica, sans-serif;
}
img{
	border:none;
}
h1 {
	margin:0px 5px 0px 0px;
	font:2em Arial, Helvetica, sans-serif, Helvetica, sans-serif;		
	color:#fff;
	display:inline;
}
#title a{
	text-decoration:none;
	font-weight:normal;
	color:#FFF;
}
.HS{
	margin-left:0px;
}
h2 {
	margin:0px;
	font:1.5em Arial, Helvetica, sans-serif;		
	color:#39f;
	display:inline;
}
#header h2{
	color:#ccc;
}
h3 {
	margin:0px;
	font:1.3em  Arial, Helvetica, sans-serif;		
	color:#ccc;
	}
h4{	
	margin:0px;
	font:1.1em  Arial, Helvetica, sans-serif;		
	color:#ccc;
	text-transform:uppercase;
	font-weight:bold;
}
a {
	color: #06F;
	text-decoration: none;	
	font-weight:bold;
}
a:visited{
	color:#06f;
}
a:hover {
	color: #333;
	text-decoration: underline;
}
a.current{
	color:#036
}

p {
	margin-bottom: 20px;
	line-height:1.5em;
	text-align:justify;
}
.caption{
	margin-bottom:0px;
	width:180px;
	margin-top:5px;
	text-align:center;
	font-size:1em;
	}
	.credits{
		width:100%;
		font-size:.8em;
	}
#quote{
	font-family: "Courier New", Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco,  "monospace"
}
strong {
	font-weight: bold;
}
.shadow {
  -moz-box-shadow: 5px 5px 5px #666;
  -webkit-box-shadow: 5px 5px 5px #666;
  box-shadow: 5px 5px 5px #666;
 
}

/********************************************** structure ************************************************/

.iehack1, .iehack2{
	display:none;
}
.vid{
	height:240px;
	width:320px;
	visibility:visible;
	display:block;
}
.linearBg1 { 
/* fallback */ 
background-color: #000; 
background-image: url(images/linear_bg_1.png); 
background-repeat: repeat-y; 
/* Safari 4-5, Chrome 1-9 */ 
background: -webkit-gradient(linear, left top, right top, from(#39f), to(#000)); 
/* Safari 5.1, Chrome 10+ */ 
background: -webkit-linear-gradient(left, #000, #39f); 
/* Firefox 3.6+ */ 
background: -moz-linear-gradient(left, #000, #39f); 
/* IE 10 */ 
background: -ms-linear-gradient(left, #000, #39f); 
/* Opera 11.10+ */ 
background: -o-linear-gradient(left, #000, #39f); 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#000000, endColorstr=#0099FF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#000000, endColorstr=#0099FF)";
}
#shell{
	width:100%;
	position:relative;
	left:0px;
	margin-left:0;
	margin-top:0px;
	margin-bottom:0px;
	 -moz-border-radius: 0px; /* Firefox */
  -webkit-border-radius: 0px; /* Safari and Chrome */
	border-radius:0px;
	background-color:#000;
	 -moz-box-shadow: 0px ;
  -webkit-box-shadow: 0px ;
  box-shadow: 0px ;
   behavior: url(ie-css3.htc);
   overflow:hidden;
}

#RandomImage{
	list-style: none;
	width: 100%;
	margin: 0px;
	padding: 0px
}
#RandomImage li{
	display: block;
	position: relative;
}

#pic, #picSm, #mpic{
	float:none;
	margin:0px;
	margin-top:0px;
	margin-left:0px;
	width:100%;
	position: relative;
	display: block;
	
}
#mpic{
	background-image: url("images/erroll1.jpg");
	z-index: -1;
}
#pic img, #picSm img, #mpic img{
	width:100%
}
.border{
	border:5px solid #FFF;
}
#header{
	margin: 0px;
	padding: 0px;
	height:auto;
	background-color: #000;
		 -moz-border-radius: 0px; /* Firefox */
  -webkit-border-radius: 0px;/* Safari and Chrome */
	border-top-left-radius:0px;
	border-top-right-radius:0px;
	   behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
text-align:left;
}
	#title{
	width:100%;
	float:right;
		
	height:auto;
	border-top-right-radius:0px;
	-moz-border-radius: 0px ; /* Firefox */
  -webkit-border-radius: 0px ;/* Safari and Chrome */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
#navcontainer
{
	width:100%;
	height:auto;
	margin: 0px;
	padding: 0px;
	padding-bottom:0px;
	line-height:1em;
	text-align:right;
	background-color:#ccc;
	border-top:1px solid #ccc;
}

#navlist ul
{
	width:100%;
	padding: 0px;
	margin: 0px;
	line-height:1em;
	text-align:right;
}
#navlist li
{
	display: inline;
	list-style-type: none;
	padding: 0px;
	margin: 0px 1px;
	line-height:1em;
	font-size:1.5em;
}
#container{
	width:96%;
	padding:2px;
	min-height: 430px;
	margin:0 auto;	
	background-color: #000;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
		 -moz-border-radius: 0px; /* Firefox */
  -webkit-border-radius: 0px; /* Safari and Chrome */
  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
border:1px solid #000;
}
.grid{
	min-width:100%;
	min-height:380px;
}
.grid img{
		margin:0px;
		display:inline;
		border:3px solid #FFF;
	}
.gridHS img, .gridLS img, .grid img, .grid3 img{
		margin:0px;
		display:inline;
		border:5px solid #FFF;
		margin:5px 0px;
		text-align:center;
		width:95%;
		height:auto;
	}

#content{
	padding:0px;
	text-align:left;
	width:100%;
	color: #fff;
	min-height: 430px;
	background-color:#000;
	
}
.showreel{
	width:100%;
	float:left;
	margin-left:0px;
	margin-bottom:20px;
	
}
.showreel img{
	width:100%
}
#contentHS{
	padding:0px;
	text-align:left;
	width:100%;
	color: #fff;
	min-height: 430px;
	background-color:#000;
	border:1px solid #000;
}
#about{
	width:100%;
	display:block;
}
.contact, .cv{
	width:100%;
	}
.credits{
		width:100%;
		font-size:10px;
	}

#footer{	
	width:100%;
	clear:both;	
	z-index:2;	
	text-align:center;
	color:#FFF;
	padding-bottom:10px;
	font-size:12px;
}
.clearfloats {
	clear: none;
}
.spacer{
	height:25px;
}
.contact3,.contact1,.contact2{
	width:100%;
	float:none;
	}
	.contact2{
		
		margin-left:0%;
	}
.contact1{float:none;}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. *********************************************************************/
@media only screen and (min-width: 481px) {
	body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFF;
	padding: 0px;
	font: 12px  Arial, Helvetica, sans-serif;
}
img{
	border:none;
}
/*.rotate{
	  -moz-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  margin:40px;
  border:5px solid #FFF;
}*/
h1 {
	margin:15px 0px 15px 0px;
	font:32pt  Arial, Helvetica, sans-serif, Helvetica, sans-serif;		
	color:#fff;
	display: block;
}

.HS {
	margin-left:60px;
}
h2 {
	margin:0px 0px 15px 0px;
	font:24px  Arial, Helvetica, sans-serif;		
	color:#39f;
	display: block;
	}
	#header h2{
	color:#39f;
	}
h3 {
	margin:0px 0px 15px 0px;
	font:18px  Arial, Helvetica, sans-serif;		
	color:#ccc;
	}
h4{	
	margin:10px 0px 10px 0px;
	font:14px  Arial, Helvetica, sans-serif;		
	color:#ccc;
	text-transform:uppercase;
	font-weight:bold;
}
a {
	color: #06F;
	text-decoration: none;	
	font-weight:bold;
}
a:visited{
	color:#06f;
}
a:hover {
	color: #333;
	text-decoration: underline;
}
a.current{
	color:#036
}

p {
	margin-bottom: 20px;
	line-height:1.5em;
	text-align:justify;
}
.caption{
	margin-bottom:0px;
	width:180px;
	margin-top:5px;
	text-align:center;
	font-size:12px;
}
.notice{
	margin-bottom:20px;
	width:100%;
	margin-top:5px;
	text-align:center;
	font-size:12px;
	clear:both;
	color:#fff;
}
.credits{
		width:100%;
		font-size:10px;
		clear:right;
	}
strong {
	font-weight: bold;
}
.shadow {
  -moz-box-shadow: 5px 5px 5px #666;
  -webkit-box-shadow: 5px 5px 5px #666;
  box-shadow: 5px 5px 5px #666;
 
}

/********************************************** structure ************************************************/
.iehack1, .iehack2{
	display:none;
}
.vid{
	height:240px;
	width:320px;
	visibility:visible;
	display:block;
}
.linearBg1 { 
/* fallback */ 
background-color: #000; 
background-image: url(images/linear_bg_1.png); 
background-repeat: repeat-y; 
/* Safari 4-5, Chrome 1-9 */ 
background: -webkit-gradient(linear, left top, right top, from(#39f), to(#000)); 
/* Safari 5.1, Chrome 10+ */ 
background: -webkit-linear-gradient(left, #000, #39f); 
/* Firefox 3.6+ */ 
background: -moz-linear-gradient(left, #000, #39f); 
/* IE 10 */ 
background: -ms-linear-gradient(left, #000, #39f); 
/* Opera 11.10+ */ 
background: -o-linear-gradient(left, #000, #39f); 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#000000, endColorstr=#0099FF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#000000, endColorstr=#0099FF)";
}
#shell{
	width:90%;
	position:relative;
	margin:5px auto;
	 -moz-border-radius: 20px; /* Firefox */
  -webkit-border-radius: 20px; /* Safari and Chrome */
	border-radius:20px;
	background-color:#000;
	 -moz-box-shadow: 0px 5px 8px 5px #666;
  -webkit-box-shadow: 0px 5px 8px 5px #666;
  box-shadow: 0px 5px 8px 3px #666;
   behavior: url(ie-css3.htc);
   overflow:hidden;
}
	#quote{
	float: right;
		padding-left: 5%;
		min-height: 8em;
		
}
	#quote p{
		width:75%;
		margin: 2em auto;
		vertical-align: middle;
		
	}
	#RandomImage{
	list-style: none;
	width: 100%;
	margin: auto;
	
}
	#mpic{
		display: block;
	}
#pic, #picSm{
	float:right;
	margin-top:0px;
	margin-left:0px;
	width:40%;
		position:relative;
	
}
#picSm{margin-left:0px;
	width:30%}
#pic img{
	width:95%;
	margin-left: 5%;
}
#picSm img {
width:100%;
}
.border{
	border:5px solid #FFF;
}
#header{
	margin: 0px;
	padding: 0px;
	height:120px;
	background-color: #000;
		 -moz-border-radius: 20px 20px 0px 0px; /* Firefox */
  -webkit-border-radius: 20px 20px 0px 0px;/* Safari and Chrome */
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	   behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
text-align:left;
}
	#title{
	width:95%;
	margin: 0 auto;
	height:120px;
	border-top-right-radius:20px;
	-moz-border-radius: 0px 20px 0px 0px; /* Firefox */
  -webkit-border-radius: 0px 20px 0px 0px;/* Safari and Chrome */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
#navcontainer
{
	width:100%;
	height:30px;
	margin: 0px;
	padding: 0px;
	padding-bottom:10px;
	line-height:1em;
	text-align:right;
	background-color:#ccc;
	border-top:1px solid #ccc;
}

#navlist ul
{
	width:60%;
	padding: 0px;
	margin: 0px;
	line-height:1em;
	text-align:right;
}
#navlist li
{
	display: inline;
	list-style-type: none;
	padding: 0px;
	margin: 0px 15px;
	line-height:1em;
	font-size:18px;
}
#container{
	width:100%;
	min-height: 430px;
	margin:0 auto;	
	background-color: #000;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
		 -moz-border-radius: 20px; /* Firefox */
  -webkit-border-radius: 20px; /* Safari and Chrome */
  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */

}
.grid{
	min-width:100%;
	min-height:380px;
}
.grid img{
		margin:0px;
		display:inline;
		border:5px solid #FFF;
	}
.gridHS img{
		margin:0px;
		display:inline;
		border:5px solid #FFF;
		margin:0px 0px 40px 4%;
		text-align:center;
		height:auto;
	width:13%
	}
.gridLS img{
		margin:0px;
		display:inline;
		border:5px solid #FFF;
		margin:0px 0px 40px 3%;
		text-align:center;
		height:auto;
	width:19%;
	}
.grid3 img{
		margin:0px;
		display:inline;
		border:5px solid #FFF;
		margin:0px 0px 40px 5%;
		text-align:center;
		height:auto;
	width:24%;
	}
#content{
	padding:17px 0px;
	text-align:left;
	width:95%;
	color: #fff;
	min-height: 430px;
	background-color:#000;

}
.showreel{
	width:180px;
	float:left;
	margin-left:60px;
	margin-bottom:40px;
}
.Audio1{
	width:180px;
	float:left;
	margin-left:12%;
	margin-bottom:40px;
}
.Audio2{
	width:180px;
	float:left;
	margin-left:320px;
	margin-bottom:40px;
}

#contentHS{
	padding:17px 0px;
	text-align:left;
	width:100%;
	color: #fff;
	min-height: 430px;
	background-color:#000;
}
#about{
	width:60%;
	font-size: .9em;
}
#footer{	
	width:60%;
	clear:both;	
	z-index:2;	
	text-align:center;
	color:#FFF;
	padding-bottom:10px;
	font-size:12px;
}
.clearfloats {
	clear: both;
}
.spacer{
	height:25px;
}
.contact{width:65%}
	.cv{width: 65%;
	font-size: .9em;}
.contact1,.contact2, .contact3{
	width:47%;
	float:left;
	margin-left:1%;
	font-size:.9em;
	}
	.contact2{
		
	}
	.contact3{
		
	}
.contact1, .contact2{float:left;}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. *******************************************/

@media only screen and (min-width: 769px) {
	body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFF;
	padding: 0px;
	font: 1em  Arial, Helvetica, sans-serif;
}
img{
	border:none;
}
/*.rotate{
	  -moz-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  margin:40px;
  border:5px solid #FFF;
}*/
h1 {
	margin:15px 0px 15px 0px;
	font:32pt  Arial, Helvetica, sans-serif, Helvetica, sans-serif;		
	color:#fff;
}

.HS {
	margin-left:60px;
}
h2 {
	margin:0px 0px 15px 0px;
	font:20pt  Arial, Helvetica, sans-serif;		
	color:#39f;
}
h3 {
	margin:0px 0px 15px 0px;
	font:18pt  Arial, Helvetica, sans-serif;		
	color:#ccc;
	}
h4{	
	margin:10px 0px 10px 0px;
	font:14pt  Arial, Helvetica, sans-serif;		
	color:#ccc;
	text-transform:uppercase;
	font-weight:bold;
}
a {
	color: #06F;
	text-decoration: none;	
	font-weight:bold;
}
a:visited{
	color:#06f;
}
a:hover {
	color: #333;
	text-decoration: underline;
}
a.current{
	color:#036
}

p {
	margin-bottom: 20px;
	line-height:1.5em;
	text-align:justify;
}
.caption{
	margin-bottom:0px;
	width:180px;
	margin-top:5px;
	text-align:center;
	font-size:12px;
}
.notice{
	margin-bottom:20px;
	width:100%;
	margin-top:5px;
	text-align:center;
	font-size:12px;
	clear:both;
	color:#fff;
}
.credits{
		width:100%;
		font-size:10px;
		clear:right;
	}
strong {
	font-weight: bold;
}
.shadow {
  -moz-box-shadow: 5px 5px 5px #666;
  -webkit-box-shadow: 5px 5px 5px #666;
  box-shadow: 5px 5px 5px #666;
 
}

/********************************************** structure ************************************************/
.iehack1, .iehack2{
	display:none;
}
.vid{
	height:240px;
	width:320px;
	visibility:visible;
	display:block;
}
.linearBg1 { 
/* fallback */ 
background-color: #000; 
background-image: url(images/linear_bg_1.png); 
background-repeat: repeat-y; 
/* Safari 4-5, Chrome 1-9 */ 
background: -webkit-gradient(linear, left top, right top, from(#39f), to(#000)); 
/* Safari 5.1, Chrome 10+ */ 
background: -webkit-linear-gradient(left, #000, #39f); 
/* Firefox 3.6+ */ 
background: -moz-linear-gradient(left, #000, #39f); 
/* IE 10 */ 
background: -ms-linear-gradient(left, #000, #39f); 
/* Opera 11.10+ */ 
background: -o-linear-gradient(left, #000, #39f); 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#000000, endColorstr=#0099FF);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#000000, endColorstr=#0099FF)";
}
#shell{
	width:90%;
	max-width:1200px;
	position:relative;
	margin:5px auto;
	 -moz-border-radius: 20px; /* Firefox */
  -webkit-border-radius: 20px; /* Safari and Chrome */
	border-radius:20px;
	background-color:#000;
	 -moz-box-shadow: 0px 5px 8px 5px #666;
  -webkit-box-shadow: 0px 5px 8px 5px #666;
  box-shadow: 0px 5px 8px 3px #666;
   behavior: url(ie-css3.htc);
   overflow:hidden;
}
#pic, #picSm{
	float:right;
	width:40%;
	margin-top:30px;
	margin-left:0px;
	position: relative;
}
#picSm{margin-left:0px;
	width:30%}
#pic img{
	width:95%;
	margin-left: 5%;
}
	#pic2{
		width:100%;
			}
	#pic2 a img{
		width: 50%;
		float:right;
			}
#picSm img {
width:100%;
}
.border{
	border:5px solid #FFF;
}
#header{
	margin: 0px;
	padding: 0px;
	height:120px;
	background-color: #000;
		 -moz-border-radius: 20px 20px 0px 0px; /* Firefox */
  -webkit-border-radius: 20px 20px 0px 0px;/* Safari and Chrome */
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	   behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
text-align:left;
}
#title{
	width:95%;
	margin: 0 auto;
	height:100%;
	border-top-right-radius:20px;
	-moz-border-radius: 0px 20px 0px 0px; /* Firefox */
  -webkit-border-radius: 0px 20px 0px 0px;/* Safari and Chrome */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
#navcontainer
{
	width:100%;
	height:30px;
	margin: 0px;
	padding: 0px;
	padding-bottom:10px;
	line-height:1em;
	text-align:right;
	background-color:#ccc;
	border-top:1px solid #ccc;
}

#navlist
{
	width:100%;
	padding: 5px 0px;
	margin: 0px;
	line-height:1.5em;
	text-align:right;
	float:right;
}
#navlist li
{
	display: inline;
	list-style-type: none;
	padding: 0px;
	margin: 0px 15px;
	
	font-size:1.5em;
}
#container{
	width:100%;
	min-height: 430px;
	margin:0 auto;	
	background-color: #000;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
		 -moz-border-radius: 20px; /* Firefox */
  -webkit-border-radius: 20px; /* Safari and Chrome */
  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */

}
.grid{
	min-width:100%;
	min-height:380px;
}
.grid img{
		margin:0px;
		display:inline;
		border:5px solid #FFF;
	}
.gridHS img{
		margin:0px;
		display:inline;
		border:5px solid #FFF;
		margin:0px 0px 40px 5%;
		text-align:center;
		height:auto;
	width:13%
	}
.gridLS img{
		margin:0px;
		display:inline;
		border:5px solid #FFF;
		margin:0px 0px 40px 4%;
		text-align:center;
		height:auto;
	width:19%;
	}
	
	.grid3 img{
		margin:0px;
		display:inline;
		border:5px solid #FFF;
		margin:0px 0px 40px 6%;
		text-align:center;
		height:auto;
	width:24%;
	}

#content{
	padding:17px 0px;
	text-align:left;
	width:90%;
	color: #fff;
	min-height: 430px;
	background-color:#000;

}
.showreel{
	width:19%;
	float:left;
	margin-left:5%;
	margin-bottom:40px;
}
.Audio1{
	width:180px;
	float:left;
	margin-left:12%;
	margin-bottom:40px;
}
.Audio2{
	width:180px;
	float:left;
	margin-left:320px;
	margin-bottom:40px;
}

#contentHS{
	padding:17px 0px;
	text-align:left;
	width:100%;
	color: #fff;
	min-height: 430px;
	background-color:#000;
}
#about{
	width:60%;
	font-size: .9em;
}
#footer{	
	width:60%;
	clear:both;	
	z-index:2;	
	text-align:center;
	color:#FFF;
	padding-bottom:10px;
	font-size:12px;
}
.clearfloats {
	clear: both;
}
.spacer{
	height:25px;
}
.contact{width:65%}
	.cv{width: 65%;
	font-size: .9em;}
.contact1,.contact2, .contact3{
	width:47%;
	float:left;
	margin-left:1%;
	font-size:.9em;
	}
	.contact2{
		
	}
	.contact3{
		
	}
.contact1, .contact2{float:left;}
	
}