@charset "UTF-8";

html {
   overflow-y: scroll; /*forces scroll bar*/
}

body {
	margin:0;
	background:#ffffff;
	color: #000000;
	font-size:12px;
	font-family:'apple_lisunglight', sans-serif;
	word-wrap:normal;
	line-height:150%;
}

#Title {
	width: 900px; /*changes width of page. init 900px */
	margin: auto; /*centers page when auto*/
	padding-bottom: 0px; /*adds white space at bottom of page with high enough #*/
	padding-top: 30px; /* moves ALL content UP. init 30px*/
	text-align:center;
	position: relative;
	top: 0px; /*pushes all content down by amount. init 0px*/
}

a {
	text-decoration:none /*removes the underline on links*/
}

p#NAME { /*changes attributes of "Jasper Blunk"*/
	font-weight:lighter;
	opacity: 1;
	font-size: 3.8em; 
	padding:0px 0px 0px 0px;
	color:#000000;
	letter-spacing: 5px; /*changes letter spacing of NAME. init 5px*/
	
}


p#SAMPLES { 

	font-family: "Arial Black", Gadget, sans-serif;
	color: #999999;
	text-align: right;
	padding-right: 5px;
	font-size: 12px;
	opacity: .15;
	margin-top: 0px;
	margin-bottom: 0px;
}

p#SAMPLES a {
	color:  #999999;
}

p#SAMPLES a:visited {
	color:  #999999;
}

#SAMPLES a:hover {
	color:  #000000;
	
	
}




/*if <h2> surrounds median in html, this will change properties. However, there appears to be a problem with Firefox displaying it, so I've removed <h2> from html.*/
h2 { /*changes the attributes of the median*/
	font: 18px apple_lisunglight;
	opacity: 1;
	color: #000000;
	text-decoration: none;
	text-transform: none;
	text-align: center;
	display: inline; /*allows median to be "inline" with links text */
	position: relative;
	bottom: 2px; /*changes the y-axis of median. Can be changed to "top".*/
}

p#CNCT { /*changes attributes of contact text*/
	font: normal normal 20px apple_lisunglight;
	opacity: .5;
	color: #000000;
	text-decoration: none;
	text-transform: none;
	text-align: center;
}

h4 { /*changes attributes of showcase header text "Trailer/TV Spots"*/
	font: small-caps 18px apple_lisunglight;
	opacity: .4;
	color: #000000;
	text-decoration: none;
	text-transform: none;
	text-align: center;
	margin-bottom: 10px; /*changes distance between text and posters*/
	margin-top: 0;
	padding-bottom: 8px; /*also changes distance between text and posters*/
	padding-top: 20px; /*changes distance between text and music player*/
	
}

#Name_and_Composer {
	position: relative;
	bottom: 20px; /*moves both NAME and COMPOSER up. init:20px*/
}

p#COMPOSER {
	text-transform:none;
	width: 80%; /* effectively changes border line width. init: 80%  */
	font-size: 24px;
	margin: auto; /*centers text when auto*/
	color:#000000;
	text-align: center;
	padding-bottom: 25px; /* changes distance of line to composer. init: 25px*/
	border-bottom: 2px ridge; /*changes attributes of line*/
	opacity: .7;
	letter-spacing: 3px;
	position: relative;
	bottom: 20px; /* changes distance between COMPOSER and NAME. init:20px */
}

#LINKS {
	opacity: .4;
	font-size: 20px;
	padding-top: 0px; /*moves links bar down. Init: 0px*/
	position: relative;
	bottom: 35px; /* moves links bar up. Init:35px*/
	margin:18px 0px 0px 42px; /*changes centering of LINKS*/	
}

#LINKS a {
	margin-right: 81px; /*changes distance between Home and median. 82 or 81 */
	margin-left: 60px; /*changes distance between Contact and median. 60*/
	font-size: 1.2em;
	color:#000000;
}

#LINKS a:hover {
	color:#999999
}

#contact { /*changes attributes of contact div*/
	display: none;
	position: relative;
	bottom: 0px; /*moves div up*/

}

#music {
	margin-top: -20px; /* changes music box y axis. */
	position: relative;
	bottom: 0px; /* moves music box up. */
	left: 0px; /*moves music box left. */
}

#playlist_box {
	height: 100px; /*changes height of music player*/
	overflow: auto; /*forces scroll if content is bigger than height.*/
	
}

#jplayer_padding { /* changes player top & bottom space. init:25px,25px */
	padding-bottom: 15px;
	padding-top: 20px;
}

.poster {
	margin:0px 10px 10px 0px; /*changes margins between posters*/
	float: left; /*posters displayed left to right*/
	box-shadow: 1px 3px 5px rgba(68, 68, 68, 0.75); /*shadow attributes*/
	-moz-box-shadow: 1px 3px 5px rgba(68, 68, 68, 0.75);
	-webkit-box-shadow: 1px 3px 5px rgba(68, 68, 68, 0.75);
} 

/*if more than 30 posters, continue adding classes here*/
.frame1, .frame2, .frame3, .frame4, .frame5, .frame6, .frame7, .frame8, .frame9, .frame10, .frame11, .frame12, .frame13, .frame14, .frame15, .frame16, .frame17, .frame18, .frame19, .frame20, .frame21, .frame22, .frame23, .frame24, .frame25, .frame26, .frame27, .frame28, .frame29, .frame30, .frame31, .frame32, .frame33 { 
	width:168px; /*sets posters div height and width. init 168px widght*/
	height: 248px; /*init 248px height*/
}
/*===============================



/* TO ADD POSTERS:
.frame## {
background-image: url(posters/[PosterNameHere].jpg);
background-size: 168px 248px;} 
*/
.frame27 {
background-image: url(posters/redsparrow.jpg);
background-size: 168px 248px;}
.frame26 {
background-image: url(posters/purge4.jpg);
background-size: 168px 248px;}
.frame25 {
background-image: url(posters/darkestminds.jpg);
background-size: 168px 248px;}
.frame24 {
background-image: url(posters/kong.jpg);
background-size: 168px 248px;}
.frame23 {
background-image: url(posters/assassin.jpg);
background-size: 168px 248px;}
.frame22 {
background-image: url(posters/independencedayresurgence.jpg);
background-size: 168px 248px;}
.frame21 {
background-image: url(posters/thehobbit.jpg);
background-size: 168px 248px;}
.frame20 {
background-image: url(posters/divergent.jpg);
background-size: 168px 248px;}
.frame19 {
background-image: url(posters/pacificrim.jpg);
background-size: 168px 248px;}
.frame18 {
background-image: url(posters/worldwarz.jpg);
background-size: 168px 248px;}
.frame17 {
background-image: url(posters/edgeoftomorrow.jpg);
background-size: 168px 248px;}
.frame16 {
background-image: url(posters/snowwhite.jpg);
background-size: 168px 248px;}
.frame15 {
background-image: url(posters/taken2.jpg);
background-size: 168px 248px;}
.frame14 {
background-image: url(posters/lucy.jpg);
background-size: 168px 248px;}
.frame13 {
background-image: url(posters/transcendence.jpg);
background-size: 168px 248px;}
.frame12 {
background-image: url(posters/jackryan.jpg);
background-size: 168px 248px;}
.frame11 {
background-image: url(posters/purge.jpg);
background-size: 168px 248px;}
.frame10 {
background-image: url(posters/billions.jpg);
background-size: 168px 248px;}
.frame9 {
background-image: url(posters/exodus.jpg);
background-size: 168px 248px;}
.frame8 {
background-image: url(posters/theloft.jpg);
background-size: 168px 248px;}
.frame7 {
background-image: url(posters/thewalk.jpg);
background-size: 168px 248px;}
.frame6 {
background-image: url(posters/spartacus.jpg);
background-size: 168px 248px;}
.frame5 {
background-image: url(posters/wolfenstein.jpg);
background-size: 168px 248px;}
.frame4 {
background-image: url(posters/badmoms.jpg);
background-size: 168px 248px;}
.frame3 {
background-image: url(posters/chernobyldiaries.jpg);
background-size: 168px 248px;}
.frame2 {
background-image: url(posters/thecollection.jpg);
background-size: 168px 248px;}
.frame1 {
background-image: url(posters/coldlightofday.jpg);
background-size: 168px 248px;}



/*===============================*/

/*Optional - img only needed if adding posters via HTML
img {
	max-width:168px;
	max-height: 249px;
}
*/

#showcase_header {
	position: relative;
	bottom: 3px; /*moves showcase header up*/
}

#showcase {
	padding-top: 0px;
	padding-left: 9px; /*adjust centering of posters. init 9px*/
	position: relative;
}

/*===============================*/

*:focus { 
    outline: none; /*removes blue box when clicking on items.*/
}

@font-face {
    font-family: 'apple_lisunglight';
    src: url('lisunglight_sm2-webfont.eot'); /*IE9 Compat Modes*/
    src: local("☺"),
         url('lisunglight_sm2-webfont.woff') format('woff'),/*Modern Browsers*/
         url('lisunglight_sm2-webfont.ttf') format('truetype'),/*Safari, Android, iOS*/
         url('lisunglight_sm2-webfont.svg') format('svg'); /*Legacy iOS*/
    font-weight: normal;
    font-style: normal;
}

@media screen and (max-device-width: 480px) { /*Android Compat*/
  @font-face {
    font-family: "apple_lisunglight";
    src: url("lisunglight_sm2-webfont.woff") format("woff"),
    url("lisunglight_sm2-webfont.svg#apple_lisunglight") format("svg");
}}

/* FORM CSS in formcssv3*/