/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea { color: #222 }
body {
    font-size: 1em;
    line-height: 1.4; }
::-moz-selection {
    background: #66ccff;
    text-shadow: none; 
    color: #000; }
::selection {
    text-shadow: none;
    background-color: #66ccff;
    color: #000; }
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0; }
img { vertical-align: middle }

fieldset {
    border: 0;
    margin: 0;
    padding: 0; }
textarea { resize: vertical }
.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2emimages }
    

body { background: url(../images/bg-clouds.jpg) no-repeat center top #f9e5de; }

/* ==========================================================================
   Font declarations
   ========================================================================== */

/* Omnes - BoldItalic */
.sketchbook h1,
.submission-deadline,
.winners-date,
.winner-profile dt { 
  font-family: "omnes-pro-i7", "omnes-pro", "Arial Rounded MT Bold", sans-serif; 
  font-weight: 700;
  font-style: italic; }

/* Omnes - SemiBold */
.sketchbook h2,
.winner-profile h1,
.winner-profile h2 { 
  font-family: "omnes-pro-n6", "omnes-pro", "Arial Rounded MT Bold", sans-serif; 
  font-weight: 600;
  line-height: 1.15em; }

/* Omnes - Regular */
.sketchbook p,
.sketchbook li,
.sketchbook h4,
.winner-profile p,
.winner-profile figcaption,
.winner-profile a { 
  font-family: "omnes-pro-n4", "omnes-pro", "Arial Rounded MT Bold", sans-serif;
  font-weight: 400; }

/* Omnes - Medium */
header nav,
.sketchbook h3,
.sketchbook ol,
.winner .name,
.form-list label,
.btn-small,
.btn-large { 
  font-family: "omnes-pro-n5", "omnes-pro", "Arial Rounded MT Bold", sans-serif;
  font-weight: 500; 
}

/* Omnes - MediumItalic */
.winner cite { 
  font-family: "omnes-pro-i5", "omnes-pro", "Arial Rounded MT Bold", sans-serif; 
  font-weight: 500;
  font-style: italic;}

/* HEADER
================================================ */

header {
  width: 960px;
  margin: 10px auto 28px;
}
  header .logo { float: left; margin-top: 8px; }
  header .login-form { float: right; margin-left: 0px; }
  header nav {
    clear: both;
    height: 30px;
    width: 100%;
    line-height: 30px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-size: 16px;
    background-color: #83d8f2;
    background: -moz-linear-gradient(90deg, #71d4f1 0%, #c2e8f3 100%) #83d8f2;
    background: -webkit-gradient(linear, left bottom, left top, from(#71d4f1), to(#c2e8f3)) #83d8f2;
    -pie-background: linear-gradient(#c2e8f3, #71d4f1);
    padding-bottom: 2px; }
  header nav a {
    display: block;
    width: 17.8%;
    float: left;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    margin: 0 1%; }
  header nav a:hover {
    color: #db0404;
    border-bottom: 2px solid #bd3c5d;
    padding-top: 0;
    font-weight: bold;}
  header nav a:active,
  header nav .active-page,
  header nav a.active-page:hover { color: #db0404;
    font-weight: normal;
    font-style: normal;
    border: none;
    cursor: default; }
.login-form { vertical-align: top; }
.login-form input[type='text'],
.login-form input[type="password"] {
  width: 95%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #b91f45;
  margin-bottom: 5px;
  padding-right: 5px;
  padding-left: 5px; }
.login-form input[type='checkbox'] { margin-right: 5px; float: left; }
.login-form input[type='submit'],
.login-form button {
  width: 100%;
  height: 100%;
  padding: 0;
  color: #fff;
  background-color: #b91f45;
  border: none;
  margin-bottom: 5px; }
.login-form .form-part {
  height: 70px;
  float: left;
  width: 186px;
  margin-right: 25px;
  vertical-align: top; 
  position: relative; }
.login-form .form-button {
  float: right;
  width: 90px;
  height: 30px; }
.login-form label,
.login-form p {
  font-size: 12px;
  margin-top: 0px;
  margin-bottom: 0; }
.login-form label {
  position: absolute;
  color: #757575;
  text-transform: lowercase;
  left: 50px;
  margin-top: 10px; }
.login-form p a,
.login-form p a:link,
.login-form p a:visited {
  text-decoration: none;
  color: #1b1b1b; }
.login-form p a:hover,
.login-form p a:active {
  color: #af2929;
  text-decoration: underline; }
.login-form .forgot-password { display: none; }
.login-form .forgot-password p {
  line-height: 1em;
  margin-top: 0; }
.login-form .cancel-button { background-color: #aa9999; }
.logout {
  margin-top: 15px;
  height: 55px; }
.logout a { padding: 6px 12px; }
.logout .form-part {
  height: 55px;
  width: 300px;
  text-align: right; }
.logout p { display: block; }
.logout b { color: #b91f45; }

.form-list {
  list-style: none;
  padding: 0;
  margin-left: 30px;
  margin-right: 30px; }
.form-list li {
  margin: 0;
  margin-top: .625em;
  position: relative; }
.form-list label {
  display: block;
  font-size: 12px;
  margin-bottom: .25em; }
.form-list em {
  color: #cc3333;
  font-weight: normal;
  font-style: normal;
  margin-left: 3px; }
.form-list .btn-small {
  height: 35px;
  line-height: 26px;
  margin-left: 0;
  margin-top: 20px; }
.form-list input[type="text"],
.form-list input[type="password"],
.form-list input[type="email"] {
  height: 25px;
  line-height: 25px;
  border: 1px solid #b91f45;
  margin-bottom: 5px;
  width: 70%;
  padding-left: 8px;
  padding-right: 8px; }
.form-list select { width: 70% }
.form-list input[type="checkbox"] {
  float: left;
  margin-right: 8px; }
.form-list input.first-name { width: 35% }
.form-list input.last-name { width: 50% }
.form-list .error {
  display: none;
  position: absolute;
  font-size: 11px;
  top: 18px;
  width: 20%;
  color: #ffffff;
  background-color: #8b0404;
  padding: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  text-align: left;
  right: 6px; }

/* PRIMARY SKETCHBOOK STYLES
================================================ */

.sketchbookRegister {
  width: 960px;
  height: 590px;
  margin: 0 auto 20px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background: url(../images/bg-page-gradient.png) repeat-y 480px #ffffff;
  box-shadow: 0 2px 10px #e1d2cc;
  position: relative;
  z-index: 100;
  clear: both; }

.sketchbook {
  width: 960px;
  height: 718px;
  margin: 0 auto 20px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background: url(../images/bg-page-gradient.png) repeat-y 480px #ffffff;
  box-shadow: 0 2px 10px #e1d2cc;
  position: relative;
  z-index: 100;
  clear: both; }
.sketchbook h1,
.sketchbook h2,
.sketchbook h3,
.sketchbook h4,
.sketchbook p {
  margin-right: 30px;
  margin-left: 30px; }
.sketchbook h1 {
  text-transform: uppercase;
  color: #66ccff;
  text-align: center;
  font-size: 32px;
  margin-top: 30px;
  margin-bottom: 40px;
  line-height: 1.1em; }
.sketchbook h2 {
  margin-bottom: 30px;
  margin-top: 10px;
  size: 22px;
  color: #cc3333;
  font-style: italic; }
.sketchbook h3 {
  font-weight: 600;
  font-style: normal;
  font-size: 16px; }
.sketchbook h4 { font-size: 18px; 
  margin-bottom: 0.2em; }
.sketchbook p { text-align: center }
.sketchbook p a,
.sketchbook p a:link {
  color: #cc3333;
  text-decoration: underline; }
.sketchbook p a:visited,
.sketchbook p a:hover { color: #841616 }
.sketchbook p a:active {
  background-color: #cc3333;
  color: #fff; }
.sketchbook ol {
  padding-left: 30px;
  margin-left: 30px;
  margin-right: 30px;
  list-style-position: inside;
  margin-top: .5em;
  font-size: 16px; }
  
.page-left,
.page-right {
  width: 50%;
  height: 100%;
  overflow: hidden; }
.page-left { float: left }
.page-right { margin-left: 50% padding-top: 1px; }
.page-right p { text-align: left }
.page-right li {
  margin-right: 15px;
  font-size: 14px;
  margin-bottom: 5px; }
.page-right li em { color: #8f1a19; }


/* APPLICATION EXAMPLE
================================================ */

.application-data {
  padding-left: 0;
  margin: .5em 30px 1em;
  list-style: none;
}
.application-data li {
  line-height: 1.2em;
  margin-bottom: 0.3em;
  word-spacing: 1px;
}
.application-data b {
  color: #2cb4f8;
  letter-spacing: 1px;
  word-spacing: 0;
}

/* BUTTONS
================================================ */

.button-group { margin-top: 32px; }
.btn-small,
.btn-large {
  display: block;
  background: none;
  border: 4px solid #66ccff;
  text-decoration: none;
  padding: 0;
  text-align: center;
  line-height: 26px;
  color: #66ccff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  font-size: 18px;
  margin: 10px auto;
  height: 28px; }
button.btn-small,
button.btn-large { height: 34px; }
.btn-small {width: 168px; }
.btn-large { width: 226px; }
.btn-small:hover,
.btn-large:hover {
  background-color: #66ccff;
  color: #fff; }
.btn-small:active,
.btn-large:active {
  background-color: #01a2f3;
  border-color: #01a2f3; } 


/* WINNERS
================================================ */

.winner {
  display: block;
  min-height: 155px;
  margin-left: 28px;
  margin-right: 0;
  margin-bottom: 25px;
  text-decoration: none;
  color: #1b1b1b; }
.winner cite {
  margin-bottom: 5px;
  display: inline-block; }
.winner .name {
  color: #cc3333;
  font-size: 16px;
  line-height: 1em;
  font-weight: bold; }
.winner p {
  font-size: 14px;
  line-height: 1.25em;
  margin: 0; }
.winner img {
  width: 155px;
  float: left;
  border: 2px solid #cc3333;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; }
.winner > div { margin-left: 170px }
.winner-profiles article { display: none }
.winner-profile {
  width: 790px;
  background-color: #fff;
  position: relative;
  padding: 32px;
  border-radius: 20px; }
.winner-profile h1 {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 2px;
  color: #cc3333; }
.winner-profile h2 {
  margin-top: 0;
  font-size: 18px;
  font-style: italic; }
.winner-profile aside {
  float: left;
  display: block; }
.winner-profile figure { margin-bottom: 2em }
.winner-profile figure img { margin-bottom: .625em }
.winner-profile figcaption {
  text-align: left;
  font-style: italic;
  line-height: .9em; }
.winner-profile a {
  font-style: italic;
  text-decoration: none;
  font-size: 14px;
  color: #cc3332; }
.winner-profile hgroup { margin-bottom: 1.326em }
.winner-profile > div { margin-left: 185px }
.winner-profile dt { color: #49b2fd }
.winner-profile dd { margin-left: 0 }
.winner-profile dd p { margin-top: .5em }
.winner-profile .close {
  background: #fff url('../images/btn-close.png') no-repeat left top;
  border: none;
  width: 17px;
  height: 19px;
  position: absolute;
  top: 15px;
  right: 15px; }


/* BOOKMARKS
================================================ */

.bookmarks {
  position: relative;
  width: 960px;
  height: 1px;
  font-size: 1px;
  margin: 0 auto;
  z-index: 1; }
.bookmarks p { margin: 0; }

.submission-deadline,
.winners-date {
  vertical-align: middle;
  position: absolute;
  right: -50px;
  height: 58px;
  width: 160px;
  color: #ffffff;
   -webkit-transition: right 0.3s;
   padding-right: 50px;
   text-align: center;
   padding-left: 8px;
   text-transform: uppercase;
   background: url(../images/sprite-bookmarks.png) no-repeat #bd3c5d;
 }
.submission-deadline:hover,
.winners-date:hover {
  right: -215px;
  -webkit-transition: right 0.5s;
}

.submission-deadline {
  top: 38px;
  font-size: 21px;
  line-height: 1em;
  background-position: 162px -4px; }
  
  .submission-deadline p { margin-top: 8px; }
 
.winners-date {
  top: 108px;
  font-size: 18px;
  line-height: 1em; 
  background-position: 162px -68px; }
  
  .winners-date p { margin-top: 12px; }

.facebook-share,
.twitter-share {
  position: absolute;
  height: 50px;
  width: 55px;
  right: -40px;
  cursor: pointer;
  -webkit-transition: right .2s;
  background: url(../images/sprite-bookmarks.png) no-repeat; }
.facebook-share:hover,
.twitter-share:hover {
  right: -55px;
  -webkit-transition: right .3s; }
.facebook-share {
  top: 565px;
  background-color: #6268b0;
  background-position: 5px -136px; }
.twitter-share {
  top: 620px;
  background-color: #6ab3d9;
  background-position: 5px -200px; }
  
  .blog-link {
  position: absolute;
  height: 55px;
  width: 65px;
  top: 490px;
  right: -55px;
  background: url(../images/img-blog-icon.gif) no-repeat right center #fff;
  padding-right: 4px; }
.blog-link:hover { right: -62px; }


/* FOOTER
================================================ */

footer {
  width: 960px;
  margin: 0 auto 40px; }
footer nav { text-align: center }
footer nav a,
footer nav a:link {
  text-decoration: none;
  border-right: 1px solid #000;
  padding-right: 10px;
  margin-left: 10px;
  font-size: 12px;
  color: #3e3e3e; }
footer nav a:visited { color: #8e1d1d }
footer nav a:hover,
footer nav a:active {
  color: #af2929;
  text-decoration: underline; }
footer p { font-size: 12px }
footer p a,
footer p a:link {
  color: #cc3333;
  text-decoration: underline; }
footer p a:active {
  background-color: #cc3333;
  color: #fff; }
  
/* Home 
================================= */

.home .page-right h2 { margin-bottom: 10px; margin-top: 30px; }
.home .page-right img {
  display: block;
  margin: 100px auto 0 40px; 
  width: 360px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
}  
.home .page-right .btn-small {
  margin-left: 30px;
  margin-top: 30px; } 
.inventions {
  margin: 10px 30px;
  border: 1px solid #b52a52;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  overflow: hidden;
  position: relative; }
.inventions h2 {
  margin: 0;
  color: #81d3fc;
  background-color: #fdf9f7;
  -webkit-border-radius: 11px 11px 0 0;
  -moz-border-radius: 11px 11px 0 0;
  border-radius: 11px 11px 0 0;
  padding-left: 10px;
  font-size: 22px;
  padding-bottom: 4px;
  padding-top: 4px; } 
.inventions-wrap {
  height: 235px;
  margin: 10px auto;
  overflow: hidden;
  padding-left: 30px;
  padding-right: 30px; }
.inventions-wrap figure {
  width: 100%;
  height: 100%;
  display: none;
  float: left; }
.inventions-wrap figure:nth-child(1) { display: block; }
.inventions-wrap img {
  display: block;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto; }
.inventions-wrap figcaption {
  text-align: center;
  font-size: 14px; }
.selector {
  text-align: center;
  background-color: #e0a8b6;
  padding-top: 6px;
  padding-bottom: 6px;
  -webkit-border-radius: 0 0 11px 11px;
  -moz-border-radius: 0 0 11px 11px;
  border-radius: 0 0 11px 11px; }
.selector img {
  margin-right: 5px;
  border: 2px solid transparent;
  cursor: pointer; }
.selector .selected,
.selector img:hover {
  border: 2px solid #b11d48; }
.control-arrow {
  display: block;
  width: 25px;
  height: 48px;
  position: absolute;
  top: 135px;
  background: url(../images/sprite-arrows.png) no-repeat 0 top;
  cursor: pointer; }
.control-arrow.previous { left: 5px; }
.control-arrow.next{
  background-position: right top;
  right: 5px; }
.control-arrow.previous:hover { background-position: left bottom; }
.control-arrow.next:hover { background-position: right bottom; }

.news .page-right a,
.resources .page-right a {
  text-decoration: underline;
  color: #cc3333; }
.news .page-right h3,
.resources .page-right h3 { margin-bottom: 8px; }
.news .page-right p,
.resources .page-right p {
  margin-top: 8px;
  margin-bottom: 20px; }
  
/* Scrollbar Styles
================================= */

.page-right .viewport { width: 94%; height: 92%;
  overflow: hidden; position: relative;
  margin-top: 30px;
  margin-bottom: 30px;
}
.page-right .overview { list-style: none; position: absolute; left: 0; top: 0; }
.page-right .overview p { margin-right: 20px; }
.page-right .thumb .end,
.page-right .thumb { background-color: #66ccff;
  border: 2px solid #030303;
}
.page-right .scrollbar { position:absolute; width: 2px; right: 25px; top: 30px; }
.page-right .track { background-color: #6a6a6a; width:2px; position: relative;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 0 1px;
  border-style: solid;
  border-width: 3px;
  border-color: transparent;
}
.page-right .thumb { height: 20px; width: 17px; cursor: ns-resize; overflow: hidden; position: absolute; top: 0;
  right: -8px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
.page-right .thumb .end { overflow: hidden; height: 5px; width: 13px; display: none; }
.page-right .disable{ display: none; }

/* ==========================================================================
   Helper classes
   ========================================================================== */
.last { border: none!important; }   
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px; }
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%; }
.hidden {
    display: none !important;
    visibility: hidden; }
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }
.invisible { visibility: hidden }
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table; }
.clearfix:after { clear: both }
.clearfix { *zoom: 1  }

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print { 
	* {
	    background: transparent !important;
	    color: #000 !important;
	    /* Black prints faster: h5bp.com/s */
	    box-shadow: none !important;
	    text-shadow: none !important; }
	a,
	a:visited { text-decoration: underline }
	a[href]:after { content: " (" attr(href) ")" }
	abbr[title]:after { content: " (" attr(title) ")" }
	/*
	     * Don't show links for images, or javascript/internal links
	     */
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after { content: "" }
	pre,
	blockquote {
	    border: 1px solid #999;
	    page-break-inside: avoid; }
	thead {
	    display: table-header-group;
	    /* h5bp.com/t */ }
	tr,
	img { page-break-inside: avoid }
	img { max-width: 100% !important }
	page { margin: 0.5cm }
	p,
	h2,
	h3 {
	    orphans: 3;
	    widows: 3; }
	h2,
	h3 { page-break-after: avoid } 
/*bp.com/s */*{
	    box-shadow: none !important;
	    text-shadow: none !important; }
	a,
	a:visited { text-decoration: underline }
	a[href]:after { content: " (" attr(href) ")" }
	abbr[title]:after { content: " (" attr(title) ")" }
	/*
	     * Don't show links for images, or javascript/internal links
	     */
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after { content: "" }
	pre,
	blockquote {
	    border: 1px solid #999;
	    page-break-inside: avoid; }
	thead {
	    display: table-header-group;
	    /* h5bp.com/t */ }
	tr,
	img { page-break-inside: avoid }
	img { max-width: 100% !important }
	page { margin: 0.5cm }
	p,
	h2,
	h3 {
	    orphans: 3;
	    widows: 3; }
	h2,
	h3 { page-break-after: avoid } 
}


.login-form { vertical-align: top; }
.login-form input[type='text'],
.login-form input[type="password"] {
  width: 95%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #b91f45;
  margin-bottom: 5px;
  padding-right: 5px;
  padding-left: 5px; }
.login-form input[type='checkbox'] { margin-right: 5px; float: left; }
.login-form input[type='submit'],
.login-form button,
.logout a {
  width: 100%;
  height: 100%;
  padding: 0;
  color: #fff;
  background-color: #b91f45;
  border: none;
  margin-bottom: 5px;
  text-decoration: none;
}