@import url("normalize.css");
ul.actions { display:none}
html {min-height: 100%; _height:100%; background:url(../images/body-bg.png) top center; }
body { color:#384f5b; }
.clear { clear:both; height:0}
a, a:visited, a:active { text-decoration:none; color:#FA1450; font-weight:normal; font-style:italic; border-bottom:1px dotted #FA1450}
a strong { font-weight:normal}
a:focus { outline:none}
/*a.pdf { background:url(../images/pdf-icon.png) no-repeat left; padding-left:22px; height:16px; line-height:17px; display:inline-block; border:none}*/
.home-banner a { border:none}
#wrap { width:940px; padding: 0 20px; margin:0 auto;}
#header-welcome { width:940px; height:100px; position:relative; background:url(../images/dashed-line.png) repeat-x bottom;}
#header-welcome #logo { width:500px; height:68px; margin: 20px auto 0;}
#header-welcome #logo a { border:none}
#welcome-container { width:800px; margin:30px auto;}
#welcome-left { width:350px; float:left; text-align:center; padding-top:10px;}
#welcome-left h1 { color:#FF9B30; text-transform:lowercase; font-size:50px; margin:0;}
#welcome-left h2 { text-transform:lowercase; font-size:30px; margin:-10px 0 0}
#welcome-left h3 { color:#1E88BD; font-size:18px; text-transform:uppercase; letter-spacing:3px; margin:5px 0;}
#welcome-left p a { color:#1E88BD; font-weight:bold; text-decoration:none; font-size:16px; font-style: normal; border:none}
#welcome-left p a:hover {color:#016699}
#welcome-right { width:450px; float:right; text-align:center}
#welcome-ads {
    height: 130px;
    margin-bottom: 20px;
    float:left;
    width:940px;
}
#content #welcome-ads {
    margin-left: -20px;
}
#jform_profile_Newsletter-lbl .star { display: none;}
div#welcome-left div.moduletable > h3 { display:none}
#welcome-ads a { border:none}
#welcome-ads div { float:left; padding:0; display:inline-block}
#welcome-ads div.first { float:left; margin:0 20px 0 0; padding:0; display:inline-block}
#welcome-ads div.last { float:right; margin:0 0 0 20px; padding:0; display:inline-block}
#header { width:940px; height:150px; position:relative;}
#header #logo { width:500px; height:68px; position:absolute; top:35px; left:15px;}
#header #logo a { border:none}
#showstate { position:absolute; top:-5px; right:0; width:155px; height:60px; background:url(../images/showstate-bg.png) no-repeat; text-align:center; display:table}
#showstate a {display: table-cell;text-align: center;vertical-align: middle; border:none; color:#fff; font-style:normal }
#menu { width:940px; height:47px; background:url(../images/menu-bg.png) no-repeat; position:absolute; bottom:0; left:0}
#menu ul { height:47px; margin:0; padding:0 10px; height:47px; line-height:47px;}
#menu ul.menu li { float:left; list-style-type:none; padding:0 10px; margin:0;}
#menu ul.menu li a { text-decoration:none; color:#fff; border:none;  font-style:normal}
#menu ul.menu li a:hover, #menu ul.menu li.active a { color:#ACDCF2;}
#menu #social-icons { position:absolute; top:8px; right:9px}
#menu #social-icons a { border:none}
#menu #social-icons a.facebook { display:block; float:left; width:30px; height:30px; background:url(../images/social-icons.png) no-repeat left; margin:0 3px;}
#menu #social-icons a.twitter {display:block; float:left; width:30px; height:30px; background:url(../images/social-icons.png) no-repeat right; margin:0 3px;}
#menu #social-icons a span { display:none}
#content-welcome { padding:20px 0;}
#content-home { padding:15px 0 10px 0}
#content { padding:20px}
h1 { color:#1E88BD; letter-spacing:-1px; font-size:28px; margin:0 0 5px}
h2 { font-style:italic; color:#F70847; letter-spacing:-1px; font-weight:normal; margin:5px 0 5px; text-transform:lowercase}
h2 span { font-weight:bold; color: #FF9B30; text-transform:uppercase; display:inline-block; margin-left:10px; padding-left:17px; vertical-align: text-bottom; background:url(../images/divider.png) no-repeat left; font-style:normal; font-size:18px; letter-spacing:2px;}
.newsflash { margin:0 -20px;}
.newsflash h1 { color:#FF9B30}
.newsflash h2 {color:#41C63D; text-transform:none; font-style:normal}
.newsflash h3 { font-style:italic; font-weight:normal}
.download-btn a { width:150px; height:50px; line-height:50px; display:block; background:#FA1450; color:#fff; border-radius:5px; text-align:center; border:none; padding:0 }
.download-btn a:hover { background:#c30b3b}
#directions { background:#FFFFF9; width:900px; padding:20px; border:1px dashed #CCC; border-radius:5px; margin:20px -20px 0;}
#content #directions ul { padding:0;}
#content #directions ul li { line-height:1.7em; margin:20px 0; list-style-type:none; padding:0; }
#content #directions ol ul { margin: 20px 0; }
#content #directions ol ul li{ padding-left: 40px; line-height: initial; margin: 5px 0; }
#content #directions ul li ul { padding-left:20px;}
#content #directions ul li ul li { line-height:1em}
#content p { font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; line-height:1.6em;  margin:20px 0}
#content p.sml { font-size:11px;}
#content li {font-family:Georgia, "Times New Roman", Times, serif; font-size:13px; line-height:normal; margin:5px 0; }
#footer { background:url(../images/dashed-line.png) repeat-x top; height:60px; padding:40px 0}
#footer div.table { display:table; margin: 0 auto; width:809px;}
#footer ul#footer-logos { padding:0;  width:809px;}
#footer ul#footer-logos li { list-style-type:none; display:inline; padding:0 16px; float:left}
#footer ul#footer-logos li.papermate a { display:block; width:219px; height:49px; background:url(../images/logo-papermate.png) no-repeat}
#footer ul#footer-logos li.sharpie a { display:block; width:137px; height:45px; background:url(../images/logo-sharpie.png) no-repeat}
#footer ul#footer-logos li.expo a { display:block; width:110px; height:45px; background:url(../images/Expo_Logo.png) no-repeat}
#footer ul#footer-logos li.officemax a { display:block; width:204px; height:47px; background:url(../images/logo-officemax.png) no-repeat}
#footer ul#footer-logos li a span { display:none}
#footer ul#footer-logos li a { border:none}
div.registration { background:url(../images/register-divider.png) no-repeat right}
ul.register { padding:0; list-style-type:none; float:left}
ul.register.last { margin-left:40px; margin-bottom:0}
ul.login { padding:0; list-style-type:none}
#content ul.rl li { margin-bottom:15px; position:relative}
#login-box { }
ul.rl input, ul.rl textarea, ul.rl select {
  border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 2px 0 rgba(100, 100, 100, 0.1) inset;
    color: #384F5B;
    display: block;
    margin-bottom: 5px;
    padding: 8px 5px;
}
ul.rl input.invalid, ul.rl textarea.invalid, ul.rl select.invalid { border:1px solid #F70847}
ul.rl textarea { width:230px;}
ul.rl label {
  display: inline-block;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 14px;
    font-style: italic;
    margin: 3px;
}
ul.rl label#jform_profile_Newsletter-lbl { margin-left:30px; width:280px; margin-top:20px;}
ul.rl input#jform_profile_Newsletter { position:absolute; top:21px; border:none}
#system-message-container div.system-message { background:#fcf7f2; border:1px dotted #ccc; border-radius:5px; padding:20px; margin-bottom:20px;}
h1.system-message { color:#3BB961; }
#system-message-container ul { padding:0 5px;}
#system-message-container li { list-style-type:none; font-size:16px; font-style:italic}
input.button, button.button {
  background: none repeat scroll 0 0 #F70847;
    border: 1px solid #C9093B;
  border-radius:5px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 18px;
  cursor:pointer;
    height: 35px;
    width: 120px;}
.tip-wrap { background-color:rgba(255,255,255,0.8); padding:10px; border-radius:5px; box-shadow:0 0 3px rgba(0,0,0,0.3) }
/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }
/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width: 940px }
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 900px }
.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }
/* Arrow styling */
.coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px }
/* Panel padding */
.coda-slider .panel-wrapper { padding: 20px }
/* Preloader */
.coda-slider p.loading { padding: 20px; text-align: center }
/* Don't change anything below here unless you know what you're doing */
/* Tabbed nav */
.coda-nav ul { height:33px;  padding:0; border-bottom:1px solid #cdd3d5; margin:0 }
.coda-nav ul li { display: block; float:left; margin:0 0 0 10px !important;  }
.coda-nav ul li a { font-style:normal; font-size:16px; background: #ecf0f2; color: #81959e; display: block; float: left; margin-right: 1px; padding: 6px 10px 7px; text-decoration: none; border:1px solid #cdd3d5; border-bottom:none; border-radius:5px 5px 0 0 }
.coda-nav ul li a.current { background: #fff; color:#1e88bc; border:1px solid #cdd3d5; border-bottom:none; position:relative; height:20px; }
/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
/* Pen Licence styling */
#pen-licence { padding:20px 35px; border:1px dashed #ccc; border-radius:10px;}
#pen-licence-wrap label { display:block; font-family:Georgia,"Times New Roman",Times,serif; font-size:14px; font-style:italic; margin:3px;}
#pen-licence-wrap input { display:block; margin-bottom:5px; border:1px solid #ccc; padding:8px 5px; color:#384F5B; border-radius:3px; box-shadow:0 2px 0 rgba(100, 100, 100, 0.1) inset; }
#pen-licence-wrap textarea { display:block; margin-bottom:5px; border:1px solid #ccc; padding:8px 5px; color:#384F5B; border-radius:3px; box-shadow:0 2px 0 rgba(100, 100, 100, 0.1) inset; width:178px; height: 100px; }
#pen-licence-wrap input.submit { margin:20px 10px 0; display:inline-block; background:#F70847; color:#fff; width:120px; border:1px solid #c9093b; font-size:18px}
#pen-licence-wrap p.sml { font-size: 11px;
    font-style: italic;
    margin: 5px 0;}
#pen-licence-wrap .file-wrapper {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
}
#pen-licence-wrap .file-wrapper .button {
  background: #f92900;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  height:20px;
  line-height:20px;
  color:#fff;
  font-size: 14px;
  font-weight: bold;
  padding: 9px 18px;
  text-transform: uppercase;
}
#pen-licence-wrap .file-wrapper:hover .button { background:#c02305}
#pen-licence-wrap .file-wrapper input {
  cursor: pointer;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  filter: alpha(opacity=1);
  -moz-opacity: 0.01;
  opacity: 0.01;
  font-size: 100px;
}
#loading { display:none}
#preview
{
  background: url("../images/licence-bg.jpg") no-repeat;
  width: 420px;
  height: 298px;
  margin:0 auto;
}
#namePreview
{
  position: absolute;
  padding: 96px 0 0 24px;
  width: 215px;
  height: 20px;
  color: #1E88BC;
}
#schoolPreview
{
  position: absolute;
  padding: 155px 0 0 25px;
  width: 215px;
  height: 20px;
  color: #1E88BC;
}
#datePreview
{
    color: #1E88BC;
    font-size: 10px;
    font-weight: bold;
    height: 20px;
    padding: 242px 0 0 105px;
    position: absolute;
    width: 215px;
}
#photoPreview
{
  position: absolute;
  margin: 92px 0 0 257px;
  width: 145px;
  height: 145px;

}
#crop
{
  width: auto;
  height: auto;
  overflow: visible;
}
/* TipTip CSS - Version 1.2 */
#tiptip_holder {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
}
#tiptip_holder.tip_top {
  padding-bottom: 5px;
}
#tiptip_holder.tip_bottom {
  padding-top: 5px;
}
#tiptip_holder.tip_right {
  padding-left: 5px;
}
#tiptip_holder.tip_left {
  padding-right: 5px;
}
#tiptip_content {
  font-size: 11px;
  color: #fff;
  text-shadow: 0 0 2px #000;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background-color: rgb(25,25,25);
  background-color: rgba(25,25,25,0.92);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  box-shadow: 0 0 3px #555;
  -webkit-box-shadow: 0 0 3px #555;
  -moz-box-shadow: 0 0 3px #555;
}
#tiptip_arrow, #tiptip_arrow_inner {
  position: absolute;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  height: 0;
  width: 0;
}
#tiptip_holder.tip_top #tiptip_arrow {
  border-top-color: #fff;
  border-top-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_bottom #tiptip_arrow {
  border-bottom-color: #fff;
  border-bottom-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_right #tiptip_arrow {
  border-right-color: #fff;
  border-right-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_left #tiptip_arrow {
  border-left-color: #fff;
  border-left-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
  margin-top: -7px;
  margin-left: -6px;
  border-top-color: rgb(25,25,25);
  border-top-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
  margin-top: -5px;
  margin-left: -6px;
  border-bottom-color: rgb(25,25,25);
  border-bottom-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_right #tiptip_arrow_inner {
  margin-top: -6px;
  margin-left: -5px;
  border-right-color: rgb(25,25,25);
  border-right-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_left #tiptip_arrow_inner {
  margin-top: -6px;
  margin-left: -7px;
  border-left-color: rgb(25,25,25);
  border-left-color: rgba(25,25,25,0.92);
}

/* Stationery essetials template */

.item-page .left-pane {
  width: 48%;
  float: left;
  margin-bottom: 40px;
}

.item-page .left-pane .header {
  font-size: 20px;
  padding: 20px 30px 20px 30px;
  text-align: left;
}

.item-page .left-pane .content {
  padding: 20px 30px 0px 30px;
}

.item-page .left-pane ul.content-list {
  margin-top: 0;
}

.item-page .left-pane ul.content-list li {
  font-size: 11px !important;
  padding-left: 10px;
  margin-left: 6px !important;
}

.item-page .left-pane .content h2 {
  font-size: 16px;
  font-weight: bold;
  color: #222222;
  text-transform: capitalize;
  font-style: normal;
}

.item-page .left-pane .header.green {
  background: #a5cf4e;
}

.item-page .left-pane .header.blue {
  background: #5ea2d5;
}

.item-page .left-pane .header.yellow {
  background: #f4b146;
}




.item-page .right-pane {
  width: 48%;
  float: right;
  margin-bottom: 40px;
}

.item-page .right-pane .header {
  font-size: 20px;
  padding: 20px 30px 20px 30px;
  text-align: left;
}

.item-page .right-pane .content {
  padding: 20px 30px 0px 30px;
}

.item-page .right-pane ul.content-list {
  margin-top: 0;
}

.item-page .right-pane ul.content-list li {
  font-size: 11px !important;
  padding-left: 10px;
  margin-left: 6px !important;
}

.item-page .right-pane .content h2 {
  font-size: 16px;
  font-weight: bold;
  color: #222222;
  text-transform: capitalize;
  font-style: normal;
}

.item-page .right-pane .header.green {
  background: #a5cf4e;
}

.item-page .right-pane .header.blue {
  background: #5ea2d5;
}

.item-page .right-pane .header.yellow {
  background: #f4b146;
}

.item-page .pen-content table {
  float: left;
}

.item-page .pen-content td:first-child {
  padding: 0 0 0 30px;
}

.item-page .pen-content td {
  vertical-align: top;
}

.item-page .pen-content table .title {
  font-size: 12px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  text-align: left !important;
  padding-left: 25px !important;
  padding-bottom: 10px !important;
  padding-top: 10px !important;
}
.item-page .pen-content table td:first-child {padding: 0; text-align: right; width: 40px;}

.item-page .color div {width: 10px; height: 10px; display: inline-block; border-radius: 5px; padding: 0; margin: 0; }
.item-page .color div.black {background: #000000;}
.item-page .color div.blue {background: #1939a2;}
.item-page .color div.red {background: #ff0e30;}
.item-page .color div.green {background: #089559;}

.item-page .pen-content table td.color-content {font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; padding-left: 10px;}

.item-page .logo img {float: right;}











/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #tiptip_content {
    padding: 4px 8px 5px 8px;
    background-color: rgba(45,45,45,0.88);
  }
  #tiptip_holder.tip_bottom #tiptip_arrow_inner {
    border-bottom-color: rgba(45,45,45,0.88);
  }
  #tiptip_holder.tip_top #tiptip_arrow_inner {
    border-top-color: rgba(20,20,20,0.92);
  }
}
#pen-licence-wrap .radio, #pen-licence-wrap input#name{ margin: 0 0 12px 0;}
#pen-licence-wrap .radio label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-right: 30px;
 }
 #pen-licence-wrap .radio input { display: inline-block; margin-top: 4px;}
 #pen-licence-wrap .radio label.girl {
    color: #D22179;
 }
 #pen-licence-wrap .radio label.boy {
    color: #1FAF4E;
 }