html, body, #wrapper {height: 100%;}
body > #wrapper {height: auto; min-height: 100%;}
* {margin:0;padding:0;}
/*
UTILITY
*/
.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }
.centered { margin:0 auto;
text-align:center;}
/* CLEAR FIX*/
.clearfix:after { content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix { display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix { display: block;}
/* End hide from IE-mac */
/* -------------------------------------------------------- */
body { background: #000 url(#) 0px 70px no-repeat; }
#home-background { background: #000 url(#) 0px 70px no-repeat;}
#black-background { background: #000; background-size:cover !important;}
#wrapper { margin: 0; width: 1070px; }
#header { padding-top:10px;}
#logo { width:200px; float:left;
z-index:920; }
#logo img { padding:8px 0 0 130px; }
/* HOMEPAGE SLIDER
======================================= */
#slider {
width: 840px;
margin-bottom: 65px;
height: 300px;
}
#content { padding:35px 10px 57px 10px;
width:1070px; }
#content-index { padding:0 10px 57px 10px;
width:1070px; }
#splash-box { width:840px;
margin:60px 0 0 190px;}
#about-box {
width: 540px;
padding: 15px 20px 10px 20px;
margin: 0 100px 0 210px;
position: relative;
z-index: 1;
}
#about-box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../images/background-transp-darker2.png");
opacity: 0.8;
z-index: -1;
}
#about-box-dark {
width: 540px;
padding: 15px 20px 10px 20px;
margin: 0 100px 0 210px;
position: relative;
z-index: 1;
}
#about-box-dark::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../images/background-transp-darker2.png");
opacity: 0.8;
z-index: -1;
}
#about-box-left-wider {
width: 768px;
padding: 15px 20px 10px 20px;
margin: 0 100px 0 20px;
position: relative;
z-index: 1;
}
#about-box-left-wider::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../images/background-transp-darker2.png");
opacity: 0.9;
z-index: -1;
}
#about-box-left {
width: 540px;
padding: 15px 20px 10px 20px;
margin: 0 100px 0 20px;
position: relative;
z-index: 1;
}
#about-box-left::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../images/background-transp-darker2.png");
opacity: 0.8;
z-index: -1;
}
#footer { position: relative;
margin-top: -27px; /* negative value of footer height */
background:#000;
width:100%;
height: 27px;
clear:both;
z-index:91;}
#footer-transp { position: relative;
margin-top: -27px; /* negative value of footer height */
height: 27px;
clear:both;
z-index:91;}
#copyright { float:left;
width:171px;
height: 26px;
padding:1px 0 0 2px;
background:#fb073b; }
#address { float:left;
height: 26px;
padding:1px 0 0 7px; }
#footer #address p { color:#999999;}
.footer_container { width:1010px }
/* PROJECT PAGE FOOTER */
#content-project { padding:35px 10px 117px 10px;
width:1020px;}
#footer-project { position: relative;
margin-top: -27px; /* negative value of footer height */
background:#000;
clear:both;
width: 100%;
height: 27px;
}
#footer #copyright p { color:#fff; font-size:10px; }
#footer-project #copyright p { color:#fff;}
#footer-project #address p { color:#999999;}
#footer-transp #copyright p { color:#fff;}
#footer-transp #address p { color:#999999;}
/* FOOTER SOCIAL ICONS
==================================== */
.footer_social { float:right; }
.footer_social a { opacity:0.85 }
.footer_social a:hover { opacity:1 }
.s_youtube, .s_vimeo,
.s_facebook,.s_instagram,
.s_linkedin, .s_twitter,
.s_artstation, .s_tiktok { background:url(../images/social-icons_16.png); display:inline-block; width:16px; height:16px; text-indent:-9999px; margin-left:5px; }
.s_youtube { background-position:0 0; }
.s_twitter { background-position:-20px 0; }
.s_linkedin { background-position:-40px 0; }
.s_facebook { background-position:-60px 0; }
.s_instagram { background-position:-80px 0; }
.s_vimeo { background-position:-100px 0; }
.s_artstation { background-position:-120px 0; }
.s_tiktok { background-position:-140px 0; }
/* SCROLLER
=============================== */
#scroller { padding:0 20px; margin:0}
#scrollerwrapper { width:475px;
height:370px;
float:left;
padding:10px 0 40px 0;
margin:0 100px 0 210px;
background:url(../images/background-transp.png);
}
#scrollerwrapper-mainpage { width:475px;
height:370px;
float:left;
padding:10px 0 40px 0;
margin:0 100px 0 20px;
background:url(../images/background-transp.png);
}
#scrollerwrapper-project-about { width:475px;
height:370px;
float:left;
padding:10px 0 40px 0;
margin:0 100px 0 330px;
background:url(../images/background-transp.png);
}
#scroller-large { padding:0 20px; margin:0}
#scrollerwrapper-large { width:696px;
height:400px;
float:left;
padding:10px 0 40px 0;
margin:0 100px 0 210px;
background:url(../images/background-transp.png);
}
#rightpanel { width:420px; height:420px; background:url(../images/background-transp.png); float:left; }
.panel-fullwidth { width:1010px;
padding:10px 0 40px 20px;
margin:0 100px 0 20px;
background:rgba(0,0,0,0.77);
}
.servicesbox { float:left; width:230px; padding-right:20px;}
#main { float:left; }
#sidenav { float:left;
width:200px;
padding:10px 0 0 20px;}
#qt-video { }
#qt-centered { width: 512px;
height: 350px;
background-color: black;
left: 50%;
top: 50%;
margin-top: -170px;
margin-left: -256px;
position: fixed; }
* html #qt-centered { position:absolute; }
#social-icons { text-align:right;
padding-top:4px;
}
#projects { padding:0 0 17px 0}
.projectbox { float:left;
padding: 0 0 20px 65px;}
.projectinfo { width: 188px;
text-align: center;}
.thumbnail-row { clear: both;
display: block;}
.illustration-page #projects .projectbox h4 {
margin: 10px 0 18.75px 0;
max-width: 700px;
text-align: left;
white-space: nowrap;
display: block;
}
.social-page .projectbox h4 {
max-width: none;
margin: 10px 0 18.75px 0;
text-align: left;
white-space: normal;
}
/* People
*/
.team-member {
width:475px; /* was 441 */
width:inherit;
margin:0 0 60px 65px;
}
.team-member img {
float:left;
padding:0 65px 20px 0;
}
.team-member h2 {
font-size:17px;
margin-bottom:5px;
margin-top:0;
}
.team-member h3 {
font-size:14px;
margin-top:0;
}
.team-member h4 {
font-size:10px;
margin-top:0;
}
.team-member-info {
float:left;
width:730px;
}
.static-header {
margin:0 0 30px 315px;
}
/*
NAVIGATION
*/
#nav { width:840px;
height:60px;
float:left; }
.subnav { z-index: 50;
width:70px;
display:none;}
#nav span { display: none; }
#nav li, #nav a { height:60px;
display:block; }
#nav li { float:left;
list-style:none;
display:inline;
position: relative;}
ul.subnav { list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 60px;
float: left;
width: 70px; }
ul.subnav li { float: left;
margin: 0;
width:70px;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/ }
#nav-news, #nav-about, #nav-work,#nav-showreel, #nav-illustration, #nav-artstation, #nav-services, #nav-shop, #nav-contact,
#nav-links, #nav-ip, #nav-clients, #nav-blog { width: 70px; }
#nav-news a {background:url(../images/button-news.gif) 0px 0px no-repeat; }
#nav-news a:hover {background:url(../images/button-news.gif) 0px -120px no-repeat; }
#nav-news.current a {background:url(../images/button-news.gif) 0px -60px no-repeat; }
#nav-news.current a:hover {background:url(../images/button-news.gif) 0px -120px no-repeat; }
#nav-about a {background:url(../images/button-about.gif) 0px 0px no-repeat; }
#nav-about a:hover {background:url(../images/button-about.gif) 0px -120px no-repeat; }
#nav-about.current a, #nav-about.current-temp a {background:url(../images/button-about.gif) 0px -60px no-repeat; }
#nav-about.current, #nav-about.current-temp a:hover {background:url(../images/button-about.gif) 0px -120px no-repeat; }
#nav-work a {background:url(../images/button-work.gif) 0px 0px no-repeat; }
#nav-work a:hover, #nav-work.hovered a {background:url(../images/button-work.gif) 0px -120px no-repeat; }
#nav-work.subhover a {background:url(../images/button-work.gif) 0px -120px no-repeat; }
#nav-work.current a, #nav-work.current-temp a {background:url(../images/button-work.gif) 0px -60px no-repeat; }
#nav-work.current a:hover, #nav-work.current-temp a:hover {background:url(../images/button-work.gif) 0px -120px no-repeat; }
#nav-showreel a {background:url(../images/button-showreel.gif) 0px 0px no-repeat; }
#nav-showreel a:hover {background:url(../images/button-showreel.gif) 0px -120px no-repeat; }
#nav-showreel.current a {background:url(../images/button-showreel.gif) 0px -60px no-repeat; }
#nav-showreel.current a:hover {background:url(../images/button-showreel.gif) 0px -120px no-repeat; }
#nav-illustration a {background:url(../images/button-illustration.gif) 0px 0px no-repeat; }
#nav-illustration a:hover {background:url(../images/button-illustration.gif) 0px -120px no-repeat; }
#nav-illustration.current a {background:url(../images/button-illustration.gif) 0px -60px no-repeat; }
#nav-illustration.current a:hover {background:url(../images/button-illustration.gif) 0px -120px no-repeat; }
#nav-artstation a {background:url(../images/button-artstation.gif) 0px 0px no-repeat; }
#nav-artstation a:hover {background:url(../images/button-artstation.gif) 0px -120px no-repeat; }
#nav-artstation.current a {background:url(../images/button-artstation.gif) 0px -60px no-repeat; }
#nav-artstation.current a:hover {background:url(../images/button-artstation.gif) 0px -120px no-repeat; }
#nav-services a {background:url(../images/button-services.gif) 0px 0px no-repeat; }
#nav-services a:hover {background:url(../images/button-services.gif) 0px -120px no-repeat; }
#nav-services.current a {background:url(../images/button-services.gif) 0px -60px no-repeat; }
#nav-services.current a:hover {background:url(../images/button-services.gif) 0px -120px no-repeat; }
#nav-shop a {background:url(../images/button-shop.gif) 0px 0px no-repeat; }
#nav-shop a:hover {background:url(../images/button-shop.gif) 0px -120px no-repeat; }
#nav-shop.current a {background:url(../images/button-shop.gif) 0px -60px no-repeat; }
#nav-shop.current a:hover {background:url(../images/button-shop.gif) 0px -120px no-repeat; }
#nav-contact a {background:url(../images/button-contact.gif) 0px 0px no-repeat; }
#nav-contact a:hover {background:url(../images/button-contact.gif) 0px -120px no-repeat; }
#nav-contact.current a {background:url(../images/button-contact.gif) 0px -60px no-repeat; }
#nav-contact.current a:hover {background:url(../images/button-contact.gif) 0px -120px no-repeat; }
#nav-links a {background:url(../images/button-links.gif) 0px 0px no-repeat; }
#nav-links a:hover {background:url(../images/button-links.gif) 0px -120px no-repeat; }
#nav-links.current a {background:url(../images/button-links.gif) 0px -60px no-repeat; }
#nav-links.current a:hover {background:url(../images/button-links.gif) 0px -120px no-repeat; }
#nav-ip a {background:url(../images/button-ip.gif) 0px 0px no-repeat; }
#nav-ip a:hover {background:url(../images/button-ip.gif) 0px -120px no-repeat; }
#nav-ip.current a {background:url(../images/button-ip.gif) 0px -60px no-repeat; }
#nav-ip.current a:hover {background:url(../images/button-ip.gif) 0px -120px no-repeat; }
#nav-clients a {background:url(../images/button-clients.gif) 0px 0px no-repeat; }
#nav-clients a:hover {background:url(../images/button-clients.gif) 0px -120px no-repeat; }
#nav-clients.current a {background:url(../images/button-clients.gif) 0px -60px no-repeat; }
#nav-clients.current a:hover {background:url(../images/button-clients.gif) 0px -120px no-repeat; }
#nav-work .subnav #subnav-work-overview a {background:url("../images/button-work-overview.gif") 0px 0px no-repeat; }
#nav-work .subnav #subnav-work-overview a:hover {background:url("../images/button-work-overview.gif") 0px -60px no-repeat; }
#nav-work .subnav #subnav-work-animation a {background:url(../images/button-work-animation.gif) 0px 0px no-repeat; }
#nav-work .subnav #subnav-work-animation a:hover {background:url(../images/button-work-animation.gif) 0px -60px no-repeat; }
#nav-work .subnav #subnav-work-video a {background:url(../images/button-work-video.gif) 0px 0px no-repeat; }
#nav-work .subnav #subnav-work-video a:hover {background:url(../images/button-work-video.gif) 0px -60px no-repeat; }
#nav-work .subnav #subnav-work-motion-design a {background:url("../images/button-work-motion-design.gif") 0px 0px no-repeat; }
#nav-work .subnav #subnav-work-motion-design a:hover {background:url("../images/button-work-motion-design.gif") 0px -60px no-repeat; }
#nav-work .subnav #subnav-work-social a {background:url(../images/button-work-social.gif) 0px 0px no-repeat; }
#nav-work .subnav #subnav-work-social a:hover {background:url(../images/button-work-social.gif) 0px -60px no-repeat; }
#nav-work .subnav #subnav-work-illustration a {background:url(../images/button-work-illustration.gif) 0px 0px no-repeat; }
#nav-work .subnav #subnav-work-illustration a:hover {background:url("../images/button-work-illustration.gif") 0px -60px no-repeat; }
#nav-work .subnav #subnav-work-ip a {background:url(../images/button-work-ip.gif) 0px 0px no-repeat; }
#nav-work .subnav #subnav-work-ip a:hover {background:url("../images/button-work-ip.gif") 0px -60px no-repeat; }
#nav-about #subnav-about-people a { background:url(../images/button-about-people.gif) 0px 0px no-repeat; }
#nav-about #subnav-about-people a:hover { background-position: 0px -60px }
#nav-about #subnav-about-studio a { background:url(../images/button-about-studio.gif) 0px 0px no-repeat; }
#nav-about #subnav-about-studio a:hover { background-position: 0px -60px }
/* Project footer navigation */
#nav-project { height:97px;
margin-top: -97px; /* negative value of footer height */
display:none;
z-index:700; width:970px;
}
#nav-project-wrapper { padding-left:210px; background:#000;}
#navbar-project { padding:26px 0 0 0; }
#navbar-project span { display:none;}
#navbar-project a,
#navbar-project li { height:10px;
display:block; }
#navbar-project li { display:inline;
list-style:none;
float:left;
padding:0 10px;}
#navbar-project-secondary { padding:26px 0 0 0;
margin-left:-131px;}
#navbar-project-secondary span { display:none;}
#navbar-project-secondary a,
#navbar-project-secondary li { height:10px;
display:block; }
#navbar-project-secondary li { display:inline;
list-style:none;
float:left;
padding:0 10px;}
#projnav-about { width:38px;}
#projnav-movie { width:36px;}
#projnav-movies { width:43px;}
#projnav-image-gallery { width:86px;}
#projnav-storyboards { width:80px;}
#projnav-story { width:35px;}
#projnav-posters { width:46px;}
#projnav-xmas-card { width:65px;}
#projnav-bible { width:27px;}
#projnav-official-movie-site { width:108px;}
#projnav-characters { width:70px;}
#projnav-test-animation { width:91px;}
#projnav-launch-project { width:96px;}
#projnav-sketches { width:52px;}
#projnav-2poems { width:49px;}
#projnav-character-designs { width:115px;}
#projnav-projects { width:56px;}
#projnav-youtube { width:52px;}
#projnav-about a { background:url(../images/buttons-project.gif) 0 0 no-repeat; }
#projnav-about a:hover, #projnav-about.current a { background:url(../images/buttons-project.gif) 0 -10px no-repeat; }
#projnav-movie a { background:url(../images/buttons-project.gif) -747px 0 no-repeat; }
#projnav-movie a:hover, #projnav-movie.current a { background:url(../images/buttons-project.gif) -747px -10px no-repeat; }
#projnav-movies a { background:url(../images/buttons-project.gif) -250px 0 no-repeat; }
#projnav-movies a:hover, #projnav-movies.current a { background:url(../images/buttons-project.gif) -250px -10px no-repeat; }
#projnav-image-gallery a { background:url(../images/buttons-project.gif) -47px 0 no-repeat; }
#projnav-image-gallery a:hover, #projnav-image-gallery.current a { background:url(../images/buttons-project.gif) -47px -10px no-repeat; }
#projnav-storyboards a { background:url(../images/buttons-project.gif) -152px 0 no-repeat; }
#projnav-storyboards a:hover, #projnav-storyboards.current a { background:url(../images/buttons-project.gif) -152px -10px no-repeat; }
#projnav-story a { background:url(../images/buttons-project.gif) -303px 0 no-repeat; }
#projnav-story a:hover, #projnav-story.current a { background:url(../images/buttons-project.gif) -303px -10px no-repeat; }
#projnav-posters a { background:url(../images/buttons-project.gif) -355px 0 no-repeat; }
#projnav-posters a:hover, #projnav-posters.current a { background:url(../images/buttons-project.gif) -355px -10px no-repeat; }
#projnav-xmas-card a { background:url(../images/buttons-project.gif) -413px 0 no-repeat; }
#projnav-xmas-card a:hover, #projnav-xmas-card.current a { background:url(../images/buttons-project.gif) -413px -10px no-repeat; }
#projnav-bible a { background:url(../images/buttons-project.gif) -493px 0 no-repeat; }
#projnav-bible a:hover, #projnav-bible.current a { background:url(../images/buttons-project.gif) -493px -10px no-repeat; }
#projnav-official-movie-site a { background:url(../images/buttons-project.gif) -524px 0 no-repeat; }
#projnav-official-movie-site a:hover, #projnav-official-movie-site.current a { background:url(../images/buttons-project.gif) -524px -10px no-repeat; }
#projnav-characters a { background:url(../images/buttons-project.gif) -661px 0 no-repeat; }
#projnav-characters a:hover, #projnav-characters.current a { background:url(../images/buttons-project.gif) -661px -10px no-repeat; }
#projnav-test-animation a { background:url(../images/buttons-project.gif) -895px 0 no-repeat; }
#projnav-test-animation a:hover, #projnav-test-animation.current a { background:url(../images/buttons-project.gif) -895px -10px no-repeat; }
#projnav-launch-project a { background:url(../images/buttons-project.gif) -791px 0 no-repeat; }
#projnav-launch-project a:hover, #projnav-launch-project.current a { background:url(../images/buttons-project.gif) -791px -10px no-repeat; }
#projnav-sketches a { background:url(../images/buttons-project.gif) -996px 0 no-repeat; }
#projnav-sketches a:hover, #projnav-sketches.current a { background:url(../images/buttons-project.gif) -996px -10px no-repeat; }
#projnav-2poems a { background:url(../images/buttons-project.gif) -1060px 0 no-repeat; }
#projnav-2poems a:hover, #projnav-2poems.current a { background:url(../images/buttons-project.gif) -1060px -10px no-repeat; }
#projnav-character-designs a { background:url(../images/buttons-project.gif) -1121px 0 no-repeat; }
#projnav-character-designs a:hover, #projnav-character-designs.current a { background:url(../images/buttons-project.gif) -1121px -10px no-repeat; }
#projnav-projects a { background:url(../images/buttons-project.gif) -1242px 0 no-repeat; }
#projnav-projects a:hover, #projnav-projects.current a { background:url(../images/buttons-project.gif) -1242px -10px no-repeat; }
#projnav-youtube a { background:url(../images/buttons-project.gif) -1296px 0 no-repeat; }
#projnav-youtube a:hover, #projnav-youtube.current a { background:url(../images/buttons-project.gif) -1296px -10px no-repeat; }
/* Project Character Page Navigation */
#projnav-brook { width:40px;}
#projnav-ursula { width:41px;}
#projnav-doc { width:83px;}
#projnav-crystal { width:46px;}
#projnav-jefferson { width:60px;}
#projnav-sandra { width:80px;}
#projnav-atura { width:94px;}
#projnav-other { width:35px;}
#projnav-ladybird { width:51px;}
#projnav-hunchback { width:69px;}
#projnav-gloch { width:40px; }
#projnav-tungsten { width:60px; }
#projnav-armegon { width:62px; }
#projnav-borosa { width:48px; }
#projnav-centurions { width:72px; }
#projnav-malanchor { width:73px; }
#projnav-sylacron { width:60px; }
#projnav-cassandra-chase { width:107px; }
#projnav-charles-langley { width:100px;}
#projnav-main-menu { width:85px; margin-right:26px;}
#projnav-brook a { background:url(../images/buttons-characters-super-squad.gif) -86px 0 no-repeat; }
#projnav-brook a:hover, #projnav-brook.current a { background:url(../images/buttons-characters-super-squad.gif) -86px -10px no-repeat; }
#projnav-ursula a { background:url(../images/buttons-characters-super-squad.gif) -130px 0 no-repeat; }
#projnav-ursula a:hover, #projnav-ursula.current a { background:url(../images/buttons-characters-super-squad.gif) -130px -10px no-repeat; }
#projnav-doc a { background:url(../images/buttons-characters-super-squad.gif) -175px 0 no-repeat; }
#projnav-doc a:hover, #projnav-doc.current a { background:url(../images/buttons-characters-super-squad.gif) -175px -10px no-repeat; }
#projnav-crystal a { background:url(../images/buttons-characters-super-squad.gif) -262px 0 no-repeat; }
#projnav-crystal a:hover, #projnav-crystal.current a { background:url(../images/buttons-characters-super-squad.gif) -262px -10px no-repeat; }
#projnav-jefferson a { background:url(../images/buttons-characters-super-squad.gif) -312px 0 no-repeat; }
#projnav-jefferson a:hover, #projnav-jefferson.current a { background:url(../images/buttons-characters-super-squad.gif) -312px -10px no-repeat; }
#projnav-sandra a { background:url(../images/buttons-characters-super-squad.gif) -410px 0 no-repeat; }
#projnav-sandra a:hover, #projnav-sandra.current a { background:url(../images/buttons-characters-super-squad.gif) -410px -10px no-repeat; }
#projnav-atura a { background:url(../images/buttons-characters-super-squad.gif) -491px 0 no-repeat; }
#projnav-atura a:hover, #projnav-atura.current a { background:url(../images/buttons-characters-super-squad.gif) -491px -10px no-repeat; }
#projnav-other a { background:url(../images/buttons-characters-super-squad.gif) -374px 0 no-repeat; }
#projnav-other a:hover, #projnav-other.current a { background:url(../images/buttons-characters-super-squad.gif) -374px -10px no-repeat; }
#projnav-hunchback a { background:url(../images/buttons-characters.gif) -383px 0 no-repeat; }
#projnav-hunchback a:hover, #projnav-hunchback.current a { background:url(../images/buttons-characters.gif) -383px -10px no-repeat; }
#projnav-ladybird a { background:url(../images/buttons-characters.gif) -463px 0 no-repeat; }
#projnav-ladybird a:hover, #projnav-ladybird.current a { background:url(../images/buttons-characters.gif) -463px -10px no-repeat; }
#projnav-main-menu a { background:url(../images/buttons-characters-super-squad.gif) 0 0 no-repeat; }
#projnav-main-menu a:hover, #projnav-main-menu.current a { background:url(../images/buttons-characters-super-squad.gif) 0 -10px no-repeat; }
/* zorgons */
#projnav-gloch a { background:url(../images/buttons-characters-zorgons.gif) -0px 0 no-repeat; }
#projnav-gloch a:hover, #projnav-gloch.current a { background:url(../images/buttons-characters-zorgons.gif) -0px -10px no-repeat; }
#projnav-tungsten a { background:url(../images/buttons-characters-zorgons.gif) -44px 0 no-repeat; }
#projnav-tungsten a:hover, #projnav-tungsten.current a { background:url(../images/buttons-characters-zorgons.gif) -44px -10px no-repeat; }
#projnav-armegon a { background:url(../images/buttons-characters-zorgons.gif) -105px 0 no-repeat; }
#projnav-armegon a:hover, #projnav-armegon.current a { background:url(../images/buttons-characters-zorgons.gif) -105px -10px no-repeat; }
#projnav-borosa a { background:url(../images/buttons-characters-zorgons.gif) -166px 0 no-repeat; }
#projnav-borosa a:hover, #projnav-borosa.current a { background:url(../images/buttons-characters-zorgons.gif) -166px -10px no-repeat; }
#projnav-centurions a { background:url(../images/buttons-characters-zorgons.gif) -215px 0 no-repeat; }
#projnav-centurions a:hover, #projnav-centurions.current a { background:url(../images/buttons-characters-zorgons.gif) -215px -10px no-repeat; }
/* zeddites */
#projnav-malanchor a { background:url(../images/buttons-characters-zeddites.gif) 0px 0 no-repeat; }
#projnav-malanchor a:hover, #projnav-malanchor.current a { background:url(../images/buttons-characters-zeddites.gif) 0px -10px no-repeat; }
#projnav-sylacron a { background:url(../images/buttons-characters-zeddites.gif) -73px 0 no-repeat; }
#projnav-sylacron a:hover, #projnav-sylacron.current a { background:url(../images/buttons-characters-zeddites.gif) -73px -10px no-repeat; }
/* humans */
#projnav-cassandra-chase a { background:url(../images/buttons-characters-humans.gif) 0 0 no-repeat; }
#projnav-cassandra-chase a:hover, #projnav-cassandra-chase.current a { background:url(../images/buttons-characters-humans.gif) 0 -10px no-repeat; }
#projnav-charles-langley a { background:url(../images/buttons-characters-humans.gif) -110px 0 no-repeat; }
#projnav-charles-langley a:hover, #projnav-charles-langley.current a { background:url(../images/buttons-characters-humans.gif) -110px -10px no-repeat; }
/* Project Movie Page Navigation */
#itrocentered { margin-top:20px; }
#video-icons { margin-top:40px; }
#video-icons.quicktimefix { margin-top:40px;}
#video-icons span { display:none;}
#video-icons a,
#video-icons li { height:40px;
display:block;
outline:none; }
#video-icons li { display:inline;
list-style:none;
float:left;
padding:0 23px 0 0;}
#icon-quicktime { width:25px; }
#icon-vimeo { width:95px; }
#icon-youtube { width:25px;}
#icon-youtube a {background:url(../images/buttons-video.png) -55px 0px no-repeat; }
#icon-youtube a:hover {background:url(../images/buttons-video.png) -55px -41px no-repeat; }
#icon-youtube.current a {background:url(../images/buttons-video.png) -55px -41px no-repeat; }
#icon-youtube.current a:hover {background:url(../images/buttons-video.png) -55px -41px no-repeat; }
#icon-quicktime a {background:url(../images/buttons-video.png) -4px 0px no-repeat; }
#icon-quicktime a:hover {background:url(../images/buttons-video.png) -4px -41px no-repeat; }
#icon-quicktime.current a {background:url(../images/buttons-video.png) -4px -41px no-repeat; }
#icon-quicktime.current a:hover {background:url(../images/buttons-video.png) -4px -41px no-repeat; }
#icon-vimeo a {background:url(../images/buttons-video.png) -104px 0px no-repeat; }
#icon-vimeo a:hover {background:url(../images/buttons-video.png) -104px -41px no-repeat; }
#icon-vimeo.current a {background:url(../images/buttons-video.png) -104px -41px no-repeat; }
#icon-vimeo.current a:hover {background:url(../images/buttons-video.png) -104px -41px no-repeat; }
/* laundry monsters additions */
#black-background.lm-characters-bg {
background:#000 url('#') 0 70px no-repeat;
background-size:cover;
}
.character-profile {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width:695px;
float:left;
margin-left:65px;
padding:20px;
background: rgba(0,0,0,0.85);
}
.lm-styles #about-box, .lm-styles #scrollerwrapper-large {
background: rgba(0,0,0,0.65);
}
.character-profile h2 {
margin:0;
}
/*
.lm-styles * {
color:white !important;
}
.lm-styles p, .lm-styles a {
font-size:14px !important;
}
*/
/* Profile Image Styling for Alex Dawson */
.profile-img {
float: left;
width: 150px;
height: 200px;
margin: 10px 15px 10px 0;
border-radius: 0px; /* Slight rounding for a polished look */
}
.contact-form {
max-width: 600px;
margin: 1.5em 0;
font-family: "Myriad Pro", Arial;
font-size: 0.8em;
color: #0b92bf;
}
.form-group {
margin-bottom: 1.5em;
}
.form-group label {
display: block;
font-weight: bold;
color: #FFF;
margin-bottom: 8px;
font-size: 1.25em;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 15px;
border: none;
border-radius: 0;
font-family: "Myriad Pro", Arial;
font-size: 1.25em;
color: #0b92bf;
background-color: #fff;
box-sizing: border-box;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
outline: 2px solid #ffd700;
outline-offset: -2px;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #666;
opacity: 0.8;
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.form-submit {
background-color: #ff4500;
color: #FFF;
padding: 12px 24px;
border: none;
border-radius: 0;
font-family: "Myriad Pro", Arial;
font-size: 1.25em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.form-submit:hover {
background-color: #ffd700;
color: #0b92bf;
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}
/* Gallery Styles */
.gallery {
width: 100%;
max-width: 100vw;
margin: 0 auto;
padding: 0 30px 0 60px; /* 60px left, 30px right */
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.gallery-item {
width: 100%;
max-width: 672px; /* 30% smaller than 960px */
margin-bottom: 20px;
}
.gallery-item a {
display: block;
cursor: pointer;
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.caption {
text-align: center;
color: #fff;
font-family: "Myriad Pro", Arial, sans-serif;
font-size: 14px;
padding: 30px 20px;
margin: 0;
line-height: 1.5;
max-width: 100%;
word-wrap: break-word;
}
.category-header {
color: #fff;
font-family: "Myriad Pro", Arial, sans-serif;
font-size: 22px; /* Matches h4 size from social page */
font-weight: normal;
margin: 40px 0 20px;
text-align: left;
}
/* Responsive */
@media screen and (max-width: 767px) {
.gallery {
padding: 0 15px 0 30px; /* 30px left, 15px right */
}
.gallery-item {
width: 100%;
max-width: 90%; /* Slightly smaller for mobile */
}
.caption {
font-size: 12px;
padding: 20px 10px;
}
.category-header {
font-size: 18px;
margin: 30px 0 15px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.gallery {
padding: 0 20px 0 40px; /* 40px left, 20px right */
}
.gallery-item {
width: 100%;
max-width: 672px; /* Maintains 30% reduction */
}
.caption {
font-size: 13px;
}
.category-header {
font-size: 20px;
}
}
@media screen and (min-width: 1025px) and (max-width: 1366px) {
.gallery {
padding: 0 25px 0 50px; /* 50px left, 25px right */
}
.gallery-item {
width: 100%;
max-width: 672px; /* Maintains 30% reduction */
}
.category-header {
font-size: 22px;
}
}
@media screen and (min-width: 1025px) {
.gallery {
padding: 0 30px 0 60px;
}
.gallery-item {
width: 100%;
max-width: 672px; /* Maintains 30% reduction */
}
.category-header {
font-size: 22px;
}
}