html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

/*@import url(http://fonts.googleapis.com/css?family=Fascinate|Gravitas+One|Fascinate+Inline|Wire+One|Limelight|Abril+Fatface|Prata|Chango);*/

html {
color:#000; 
background:#c0dfff;  
}

body {
color:#000; 
background: #c0dfff; 
font-size: 16px;
font-family: Verdana, Arial, sans-serif;
padding: .1em .3em;
min-width: 350px;
margin: 0;
max-width: 1200px;
margin: auto;
}

h1 {
	font-size: 2em;
	font-weight: 700;
	padding: 0 .15em 0 .2em;
}

h2 {
	font-size: 1.5em;
	font-weight: 700;
	padding: 0 .15em 0 .25em;
}

h3 {
	font-size: 1.3em;
		font-weight: 700;
		padding: 0 .15em 0 .15em;
}


h4, li {
	font-size: 1.15em;
}

h5 {
	font-size: 1em;
	font-weight: 700;
}

h6 {
	font-size: 1em;
}

p {
	font-size: 1em;
		margin: .1em .3em;
	
}

a, a:visited, button, button:visited {
	font-size: 105%;
	color: rgba(0,0,0,.65);
	font-weight: 700;
	text-decoration: none;
	border-radius: .25em;
	display: inline-block;
}

a:active, a:hover, button:active, button:hover {
	color: rgba(255,255,255,.85);
}

strong, b {
	font-weight: 700;
}

em {
	font-weight: 700;
	font-style: italic;
	font-size: 105%
}

i {
	font-style: italic;
	font-size: 105%;
}


.techability {
	clear: right;
}

.techability h3 {
	font-weight: 500;
}

#topbut {
	position: fixed;
	bottom: .2em;
	left: .2em;
	line-height: 1.5em;
}

#topbut h6 {
	font-size: 1.5em;
	font-weight: 700;
}

#topbut a {
	!padding: 0 .1em;
}

@media screen and (min-width: 1250px) {
#topbut {
margin-left: 1.5%;
}
}

@media screen and (min-width: 1300px) {
#topbut {
margin-left: 3%;
}
}

@media screen and (min-width: 1350px) {
#topbut {
margin-left: 4.5%;
}
}

@media screen and (min-width: 1400px) {
#topbut {
margin-left: 6%;
}
}

@media screen and (min-width: 1450px) {
#topbut {
margin-left: 7.5%;
}
}

@media screen and (min-width: 1500px) {
#topbut {
margin-left: 9%;
}
}

@media screen and (min-width: 1550px) {
#topbut {
margin-left: 10.25%;
}
}

@media screen and (min-width: 1600px) {
#topbut {
margin-left: 11.5%;
}
}

@media screen and (min-width: 1650px) {
#topbut {
margin-left: 12.75%;
}
}

@media screen and (min-width: 1700px) {
#topbut {
margin-left: 14%;
}
}

@media screen and (min-width: 1750px) {
#topbut {
margin-left: 15%;
}
}

@media screen and (min-width: 1800px) {
#topbut {
margin-left: 16%;
}
}

@media screen and (min-width: 1850px) {
#topbut {
margin-left: 16.75%;
}
}

@media screen and (min-width: 1900px) {
#topbut {
margin-left: 17.5%;
}
}



/* header */


.header {
font-family: Verdana, Arial, sans-serif;
	margin: .5em .1em 0;
	padding: .1em;
}

.header h1, .header h2 {
		display: inline-block;
		padding: .1em;
		margin: .2em;
}

.header .outerbevel {
	width: 95%;
	max-width: 750px;
}

.header .outerbevel:last-child {
	position: relative;
	float: right;
}


#indexheader h1 br {
	display: inline;
}

.header h2 {
line-height: 1.35em;
}

.header h2  a {
line-height: 1.15em;
position: relative;
right: 8em;
bottom: .4em;
text-decoration: none;
}

#contactinfo a  {
	position: relative;
	float: right;
	padding: .05em;
	margin: .3em;
	margin-right: .6em;
	border-radius: .3em;
}
#contactinfo img {
	height: 7.5em;
	opacity: .85;
}
#contactinfo {
	overflow: auto;
}

#rbigger {
font-size: 115%;
font-weight: 900;
}

@media screen and (max-width: 800px) {
.header h1 {
	font-size: 1.5em;
}
.header h2 {
	font-size: 1.25em;
}

#contactinfo img {
	height: 6em;
}
}

@media screen and (max-width: 800px) {

#contactinfo img {
	height: 4em;
}
}

@media screen and (max-width: 600px) {

#contactinfo a, #contactinfo h2 {
	position: relative;
	float: left;
}
}


@media screen and (max-width: 500px) {
.header h1 {
	font-size: 1.25em;
}
.header h2 {
	font-size: 1.1em;
}
}

@media screen and (max-width: 400px) 
{.header h2  a {
right: 6em;
}
}

.outerbevel, .innerbevel {
    border-radius: 1em;
}

/* nav index resume */

.nav {
	margin: .3em 1em .3em 2em;
	display: inline-block;
	position: relative;
	float: right;
}

.nav ul  {
padding: .1em;
margin: .1em;
border-radius: 1em;
overflow: auto;
width: auto;
}

.nav li {
position: relative;
float: left;
display: block;
padding: .1em .2em;	
margin: .1em .2em;
border-radius: .5em;
}

.nav a {
	padding: 0 .1em;
}

.nav img {
opacity: .6;
}

.nav img:hover {
opacity: .85;
}

@media screen and (max-width: 1120px) {
	.nav ul {
		width: 650px;
	}
}
@media screen and (max-width: 720px) {
	.nav ul {
		width: auto;
	}
}


/*  END - NAV */

/* Reel nav - Begin */

.reelnav {
padding: .1em;
overflow: auto;
border-radius: 1em;
display: inline-block;
margin: 0 auto .75em;
	float: right;
}

.reelnav li {
position: relative;
float: left;
display: block;
padding: .1em .2em;	
margin: .1em .2em;
border-radius: .5em;
}

.reelnav a {
	padding: .05em .3em;
}

@media screen and (max-width: 750px) {
.reelnav {
width: 450px;
}
}

@media screen and (max-width: 550px) {
.reelnav {
width: 320px;
}
}

/*  END - REELNAV */

/* index contents all */



.techability, .experience, .internet, .artist, .education {
	font-family: verdana, arial,sans-serif;
	margin: 1em 1em 1em 2em;	
	padding: .25em;
	border-radius: .75em;
	max-width: 1200px;
}
/*
.experience, .internet, .artist, .education {
	height: 15em;
	overflow: hidden;
	font-size: 6px;
}
*/
.techability {
	margin:  1em 2em 1em .75em;
}

.techability h2, .experience button h2, .internet h2, .artist h2, .education h2 {
	font-family: verdana, arial, sans-serif;
	padding: 0 0 0 .1em;
font-size: 21px;
}

.techability h3, .experience h3, .internet h3, .artist h3, .education h3 {
	font-family: verdana, arial, sans-serif;
	margin: .2em 0 .1em 0;
}

.techability h4, .experience h4, .internet h4, .artist h4, .education h4 {
	margin: .35em .25em;
}

.techability p, .experience p, .internet p, .artist p, .education p {
	margin: .1em .5em;
}

.techability h3, .situation, .artshows, .weblinks, .degrees {
	margin: .5em;
	padding: 0 0 .2em .2em;
	border-radius: .5em;
}

.techability h3 {
	margin: .25em .5em;
}

.situation a, .artshows a, .weblinks a, .degrees a {
	padding: 0 .4em;
	line-height: 1.05em;
	max-width: 90%
}

.artshows h4 {
	font-weight: 700;
	line-height: 1.5em;
}




.experience ul, .education ul, .weblinks ul, .artist ul {
	margin: 0 0 0 1em;

}

.experience li, .education li, .weblinks li, .artist li {
	margin: 0 0 0 1em;
	list-style-type: circle;
	font-size: 1.2em;
	font-weight: 500;
}

.education li {
	font-weight: 700;
}

.experience ul {
	padding-bottom: .25em;
}

.listhead {
	font-weight: 900;
	font-size: 110%;
	padding-top: .15em;
	padding-bottom: .15em;
}


.postsecondary {
	margin-left: .5em;
}

}

/* Reel and Such - Portfolio pages */



.shotdescription, .portfolio {
	margin: 1em;
	padding: .2em;
	border-radius: .75em;
	clear: both;
}

.shotdescription p, .portfolio h5, .portfolio p {
	margin: .5em;
	padding: .2em;
	border-radius: .5em;
}

.portfolio {
	overflow: auto;
	width: 100%;
}

.portfolio h3 {
	display: block;
	height: 2em;
	width: 95%;
	position: relative;
	float: left;
}

.portfolio h5, .portfolio p {
	width: 30%;
	position: relative;
	float: left;
}

.portfolio p {
	line-height: 1.3em;
}

.portfolio h5 img, .portfolio p img {
padding: .3em;
max-height: 16em;
max-width: 95%;
margin: .1em auto;
position: relative;
float: left;
}

.portfolio h5 a img {
	border-radius: .25em;
}

.portfolio p img {
margin: .1em;
width: auto;
}

.flashpres p a img, #butliq2 a img {
max-width: 43%;
margin: .1em;
padding: .3em;
border-radius: .25em;
}

.flashpres p a, .flashpres p a:visited, #butliq2 a {
display: inline;
}


@media screen and (max-width: 850px) {
.portfolio h5, .portfolio p {
	width: 45%;
}
.flashpres p a img, #butliq2 a img {
max-width: 42%;
}
}

@media screen and (max-width: 600px) {
.portfolio h5, .portfolio p {
	width: 90%;
}
.flashpres p a img {
max-width: 43%;
}
#butliq2 a img {
max-width: 8em;
}

#headimgillustrator h5 img {
	width: 50%;
	margin-left: 25%;
}
}

@media screen and (max-width: 500px) {
#butliq2 a img {
max-width: 43%;
}
}

.headerimage {
	display: block;
	!background-color: red;
	width: 490px;
	margin: auto;
	padding: .3em;
}

@media screen and (max-width: 520px) {
	.headerimage {
		width: 100%;
	}	
	
	.headerimage iframe {
		width: 100%;
	}
}

/* footer */

.footer {
	height: 50px;
	clear: both;
}

.footer h5 {
	position: absolute;
	right: 2em;
	padding: .1em .5em;
	margin: .5em;
	border-radius: .5em;
	min-width: 260px;
}


.footer h5:before {
	content: "\A9 2024 ";
}

@media screen and (max-width: 700px) {
.footer h5 {
	left: 2em;
	right: .5em;
	}
}

@media screen and (max-width: 500px) {
.footer h5 br {
display: inline;
}
}

.footer a, .header a {
	text-decoration: underline;
}

/* Borders 3D */
.experience, .internet, .artist, .education, .techability, .situation, .artshows, .weblinks, .degrees, #topbut a {
	border-top: 2px solid rgba(255,255,255,.6);
	border-bottom: 4px solid rgba(0,0,0,.6);
	border-left: 2px solid rgba(235,235,235,.6);
	border-right: 3px solid rgba(150,150,150,.6);
	}
	
.techability h3, .nav li, .situation a, .artshows a, .weblinks a, .degrees a, .reelnav a, .shotdescription p, .portfolio h5, .portfolio p, .portfolio h5 a img, .portfolio p a img, #contactinfo a {
	border-top: 1px solid rgba(255,255,255,.5);
	border-bottom: 2px solid rgba(0,0,0,.5);
	border-left: 1px solid rgba(235,235,235,.5);
	border-right: 2px solid rgba(150,150,150,.5);
	}
		

.nav ul, .footer h5, .reelnav, .shotdescription, .portfolio {
	border-bottom: 4px solid rgba(255,255,255,.5);
	border-top: 2px solid rgba(0,0,0,.5);
	border-right: 3px solid rgba(235,235,235,.5);
	border-left: 2px solid rgba(150,150,150,.5);
	}
	
.innerbevel {
	border-top: 3px solid rgba(255,255,255,.5);
	border-bottom: 3px solid rgba(0,0,0,.5);
	border-left: 3px solid rgba(235,235,235,.5);
	border-right: 3px solid rgba(150,150,150,.5);
	}
	
.outerbevel {
	border-bottom: 3px solid rgba(255,255,255,.5);
	border-top: 3px solid rgba(0,0,0,.5);
	border-right: 3px solid rgba(235,235,235,.5);
	border-left: 3px solid rgba(150,150,150,.5);
}

/* colors  */

body, html {
!background: #c0dfff rgba(192,223,255,1);
background: linear-gradient(179.8deg, rgba(215,235,255,1) , rgba(192,223,255,1) 2%, rgba(177,208,240,1) 98.5%, rgba(150,175,200,1) 100%);
background-attachment: fixed;}

.innerbevel {
background: linear-gradient(179.8deg, rgba(225,240,255,.5) , rgba(192,223,255,.5) 3%, rgba(177,208,240,.5) 95%, rgba(150,175,200,.5) 100%);
}

a, a:visited, a:focus, button {
	!background-color: rgba(255,255,255,.3);
	background: linear-gradient(179.8deg, rgba(225,225,225,.3), rgba(255,255,255,.3) 30%, rgba(200,200,200,.3) 65%);
}

a:active, a:hover {
	!background-color: rgba(0,0,0,.1);
	background: linear-gradient(179.8deg, rgba(75,75,75,.2), rgba(0,0,0,.2) 30%, rgba(100,100,100,.2) 65%);
}

.nav ul, .reelnav, .shotdescription, .portfolio {
	!background-color: rgba(0,0,0,.05);
	background: linear-gradient(179.8deg, rgba(0,0,0,.075) 5%, rgba(25,25,25,.075) 95%, rgba(200,200,200,.1) 100%);
}

.reelnav a, .nav a, button {
	!background-color: rgba(255,255,255,.4);
		background: linear-gradient(179.8deg, rgba(225,225,225,.4), rgba(255,255,255,.4) 30%, rgba(255,255,255,.4) 50%, rgba(200,200,200,.4) 95%);
}

.nav a:hover, .reelnav a:hover, button:hover {
	!background-color: rgba(255,255,255,.5);
		background: linear-gradient(179.8deg, rgba(75,75,75,.1), rgba(0,0,0,.1) 30%,  50%,rgba(15,15,15,.1), rgba(100,100,100,.1) 95%);
}

.techability, .techability h3, .situation, .artshows, .weblinks, .degrees, .footer h5, .shotdescription p, .portfolio h5, .portfolio p {
	!background-color: rgba(255,255,255,.2);
	background: linear-gradient(179.8deg, rgba(255,255,255,.2) 5%, rgba(240,240,240,.2) 95%, rgba(125,125,125,.2) 100%);
}

.footer a, .header a, .footer a:hover, .header a:hover, .footer a:active, .header a:active, .footer a:visited, .header a:visited {
	background: none;
}

.experience, #navexperience {
	!background-color: rgba(0,255,0,.115);
	background: linear-gradient(179.8deg, rgba(0,220,0,.115), rgba(0,255,0,.115) 2%, rgba(0,240,0,.115) 95%, rgba(0,125,0,.115) 100%);
}

.internet, #navinternet {
		!background-color: rgba(255,255,0,.2);
		background: linear-gradient(179.8deg, rgba(220,220,0,.2), rgba(255,255,0,.2) 2%, rgba(240,240,0,.2) 95%, rgba(125,125,0,.2) 100%);
}

.artist, #navartist {
		!background-color: rgba(255,0,255,.135);
		background: linear-gradient(179.8deg, rgba(220,0,220,.135), rgba(255,0,255,.135) 2%, rgba(240,0,240,.135) 95%, rgba(125,0,125,.135) 100%);
}

.education, #naveducation {
		!background-color: rgba(255,0,0,.15);
		background: linear-gradient(179.8deg, rgba(220,0,0,.15), rgba(255,0,0,.15) 2%, rgba(240,0,0,.15) 95%, rgba(125,0,0,.15) 100%);
}

.portfolio p a img, .portfolio p img {
background:linear-gradient(179.8deg, rgba(220,0,0,.15), #b99bc8 2%, rgba(240,0,0,.15) 95%, rgba(125,0,0,.15) 100%);
}

.portfolio p a img:hover {
background:linear-gradient(179.8deg, rgba(220,0,0,.15), #9779a6 2%, rgba(240,0,0,.15) 95%, rgba(125,0,0,.15) 100%);
}

#contactinfo a {
	background:linear-gradient(179.8deg, rgba(220,220,220,.15), rgba(255,255,255,.15) 2%, rgba(240,240,240,.15) 95%, rgba(125,125,125,.15) 100%);
}

#contactinfo a:hover {
	background:linear-gradient(179.8deg, rgba(125,125,125,.15), rgba(0,0,0,.1) 2%, rgba(50,50,50,.15) 95%, rgba(175,175,175,.15) 100%);
}