/* Stylesheets for SCREEN. */

@charset "utf-8";
@import url("component/reset.css");

html, body { height: 100%; }
body {
	background: #22222A;
	color: #FFF;
	font: 10pt/1 Verdana, Geneva, sans-serif;
	position: relative;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:link { color: #6C6; }
a:active, a:focus, a:hover, a:visited { color: #669; }


.fb-like { float: left; }

/* Icons */
.icon { background: url(../images/icons.png) no-repeat; display: inline-block; width: 30px; height: 30px; }
a.icon { text-decoration: none !important; }

.icon.email { background-position: -10px -10px; }
.icon.sd { background-position: -60px -10px; }
.icon.message { background-position: -110px -10px; }
.icon.guestbook { background-position: -160px -10px; }
.icon.html { background-position: -210px -10px; }

.icon.photo { background-position: -10px -60px; }
.icon.sketch { background-position: -60px -60px; }
.icon.close { background-position: -110px -60px; }
.icon.lego { background-position: -160px -60px; }
.icon.threed { background-position: -210px -60px; }

.icon.person1 { background-position: -10px -110px; }
.icon.person2 { background-position: -60px -110px; }
.icon.what { background-position: -110px -110px; }
.icon.copyright { background-position: -160px -110px; }
.icon.graphics { background-position: -210px -110px; }

.icon.mail { background-position: -10px -160px; }
.icon.plus { background-position: -60px -160px; }
.icon.cross { background-position: -110px -160px; }
.icon.tick { background-position: -160px -160px; }
.icon.link { background-position: -210px -160px; }

#wrapper { position: absolute; top: 50%; margin-top: -220px; height: 440px; width: 100%; }
#wrapper-inner { width: 960px; margin: auto; }

/*
@media screen and (min-height:440px) {
  #wrapper { position: absolute; top: 50%; margin: -220px auto 0; }
}
*/


#middle { height: 360px; overflow: hidden; }

/* Logo */
#middle #logo { width: 200px; float: left; }
#middle #logo img { margin: 20px; opacity: 0.6; }

#middle #logo .social-networking img { margin: 0 0 5px; }
#middle #logo .social-networking a:hover img { opacity: 1; }


/* ----------------------------------------------------------------------- */
/* PORTFOLIO
/* ----------------------------------------------------------------------- */
/* unstyled portfolio, for the noobs. */
#portfolio { margin-left: 200px; height: 340px; overflow: auto; }
#portfolio ul { overflow: hidden; margin-bottom: 20px; }
#portfolio ul li { float: left; width: 200px; height: 150px; margin: 0 10px 10px 0; text-align: center; }

/* spiffy dm portfolio, js enabled. */
#portfolio.dmportfolio { overflow: hidden !important; }

#portfolio.dmportfolio .tabs { margin: 0 !important; }
#portfolio.dmportfolio .tabs li { width: auto; height: auto; margin: 0; padding: 5px; }
#portfolio.dmportfolio .tabs li.selected { background: #111; }

#portfolio.dmportfolio .pages { background: #111; padding: 10px 10px 0; }
#portfolio.dmportfolio .pages ul { overflow: hidden; height: 300px; margin: 0 !important; }
#portfolio.dmportfolio .pages li {
  background: url(../images/loader.gif) no-repeat center;
  width: 90px; height: 60px; margin: 0 5px 10px 0; overflow: hidden;
}
#portfolio.dmportfolio .pages li img { cursor: pointer; }

/* ----------------------------------------------------------------------- */
/* PORTFOLIO WINDOW
/* ----------------------------------------------------------------------- */
#dmp-window {
  cursor: move;
  padding: 4px;
  background: #555 url(../images/loader-window.gif) no-repeat center;
  display: none;
  width: 100px;
  left: 50%;
  top: 30%;
}
#dmp-window img { width: 92px; height: 92px; }
#dmp-window-close, #dmp-window-link { background-color: #555; position: absolute; right: 0; }
#dmp-window-close { top: 0; }
#dmp-window-link { bottom: 0; display: none; position: absolute; }


/* ----------------------------------------------------------------------- */
/* FOOTER
/* ----------------------------------------------------------------------- */
#footer { padding: 25px 0; overflow: visible; }

#footer a.icon { margin-right: 10px; }
#footer a.icon:hover { background-color: #111; }
#footer div.prompt {
  background: #111;
  bottom: 40px;
  color: #FFF;
  display: none;
  font-size: 8pt;
  padding: 10px;
  position: absolute;
  width: 300px;
}

#footer-prompts { float: left; width: 200px; position: relative; }
#footer-prompts div.prompt { width: 400px !important; line-height: 1.5; }

#footer-social { float: left; padding: 5px; }
#footer-social a { text-decoration: none; }

#footer-copyright { float: right; position: relative; margin-right: 0; }
#footer-copyright a.copyright { margin-right: 0; }
#footer-copyright div.prompt {
  right: 0;
  text-align: right;
  width: 8em;
}
#footer-copyright .prompt span.icon { vertical-align: middle; padding-top: 30px; height: 0; overflow: hidden; }


/* ----------------------------------------------------------------------- */
/* EMAIL FORM
/* ----------------------------------------------------------------------- */
#prompt-mail { padding-bottom: 0; position: relative; }
#prompt-mail.loading {
  background-image: url(../images/loader.gif) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
#prompt-mail a.close { margin-right: 0; position: absolute; right: 0; top: 0; }
#prompt-mail .sent { position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -15px; }

#email-form { }
#email-form .error { background-color: plum; }

#email-form button { border: none; float: right !important; margin-right: 0 !important; }
#email-form input, #email-form textarea {
  border: none;
  border-radius: 0;
  font: 8pt/1 sans-serif;
  margin-top: 5px;
  padding: 3px;
  resize: none;
  width: 330px;
}
#email-form p { margin-bottom: 2px; overflow: hidden; }
#email-form p .icon { float: left; margin-right: 10px; }