/* =============== */
/* = Global CSS = */
/* =============== */

* {margin:0; padding:0; }

html, body {height: 100%;} /* sticky footer */

body{ background:#FFF; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Lucida, sans-serif; font-size:13px; color: #434343; margin: 0; -webkit-text-size-adjust: none; }

h1, h2, h3, h4, h5, h6 {font-family:'Lucida Grande', 'Lucida Sans Unicode', Lucida, sans-serif; font-weight:normal;color:#000;}
h1 { text-shadow: 2px 2px 2px #283d59; text-transform: uppercase; font-weight: 800; font-size: 52px; float: left; color:#FFF; margin-top:-3px; line-height:normal;}
h1 span { color: #c3e87c;}
h2 {font-size:32px; margin: 0 0 25px;  }
h2.small { font-size:22px; margin-bottom: 15px; }
h3 {font-size:16px; margin:0 0 10px; font-weight:bold;}
h4 {font-size:14px; margin:0 0 10px; font-weight:bold;}

input {margin:0 0 10px 0;}
p { line-height: 18px; margin: 0 0 15px 0; }
ul { margin:0px 0 25px 0px; padding:0 0 0 10px; }
ul li {  margin:0 15px 10px 0;background: url('../images/icons/greybullet.gif') no-repeat top left; padding:0 0 0 15px; list-style-type:none; font-size: 13px; }
a {color:#3084ca; text-decoration:none; font-weight:normal; }
a:hover { color: #78b9e7; }
img { border: none; }

form  { margin:15px 0 ; padding:10px 25px 10px 15px; background:#efefef; border:1px solid #d9d9d9;-moz-border-radius: 5px;-webkit-border-radius: 5px;}/*used for contact.html*/
form label { font-size:12px; margin: 5px 0 5px 0;color:#000; font-weight:bold;}
form textarea {width:98%;font-family:helvetica, arial, sans-serif; padding:7px; font-size:14px; margin-bottom: 10px;}
form select {font-size:13px; padding:1px;margin:4px 0 10px 0}
form input[type="text"], form input[type="password"] { width:100%; padding:3px; font-size:14px;}
form input[type="image"] {margin:10px 0 0 0; display:block; }

/* custom classes */
.screenshot {margin-bottom:18px;}
.screenshot img { border: 3px solid #ccc; }
.icon {margin:0 10px 10px 10px;} /* DEPRECATED - use icon-left or icon-right */
.icon-left { float:left; margin:0 10px 10px 0;}
.icon-right { float:right; margin:0 0 10px 10px;}

.quote { clear: left; margin: 10px 0 30px 30px; }
.quote blockquote { font-size: 16px; font-style: italic; font-family: Times, "Times New Roman", Serif; margin-bottom: 7px; color: #555; }
.quote img { float: left; margin-right: 25px; }
.quote p { text-align: right; color: #999; }
.box { background: #f2f2f2; padding: 15px; margin-bottom: 20px; border: 1px solid #ddd; }
.block { background:#efefef; border:1px solid #d9d9d9;-moz-border-radius: 5px;-webkit-border-radius: 5px; padding: 10px; margin-bottom: 30px; }

.highlight { background:#fffcd7; padding: 2px; color: #000; font-weight: bold; }

.highlight-box { border:1px solid #e0bb3e; background:#fffcd7; margin: 0 0 25px 0; } /* yellow box on sign up */
.highlight-box h2 { margin: 0 0 10px 0;}
.highlight-box p { margin:0 0 5px 0 ; font-size:16px;}
.highlight-box p.notes { font-size:11px; }
.highlight-box-wrapper { padding:15px; }

.date { color: #4aa40d; font-weight: bold; }
.arrow-link { padding-left: 18px; background: url('../images/icons/arrow13.gif') center left no-repeat; }

/* typography related */
.light, .note, .hint { color: #777; }
.lighter { color: #ccc; }
.center {text-align:center; margin-left:auto; margin-right:auto;}
.big { font-size: 150%; }
.info { background: #f7f6d8 url('../images/icons/info.gif') 1% 50% no-repeat; padding-left: 42px; border: 1px solid #e9e8bf; padding: 5px 5px 5px 50px; color: #675126; }

.code { margin-bottom: 20px; background: #333; padding: 7px; }
.code-example { background:#fffbdf; border:1px solid #ffdeb7;  font-family:"Monoco","Lucida Console", sans-serif; margin-bottom:18px;}
.code-example .highlight { color:#59a322; font-weight:bold; }
.code-example em { color:#747474; font-weight:normal; font-style:normal; }
.code-example-wrapper { padding:15px;}

.code-tag { color: #069cc1; }
.code-liquid { color: #a0dde6; }
.code-liquid2 { color: #fff; }
.code-quot { color: #bedc77; }

.interview p { margin-bottom: 32px; }

/* the grid */
.col-1, .col-2, .col-3, .col-4, .col-4-5, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {margin-right:35px; float:left;}
.col-12 { margin-right:0px;}

.col-12 {width:925px;}
.col-11 {width:845px;}
.col-10 {width:765px;}
.col-9 {width:685px;}
.col-8 { width:605px;}
.col-7 {width:525px;}
.col-6 {width:445px;}
.col-5 {width:365px;}
.col-4-5 {width:307px;}
.col-4 {width:285px;}
.col-3 {width:205px;}
.col-2 {width:125px;}
.col-1 {width:45px;}

.last {margin-right:0 !important;}

.margin-bottom {margin-bottom:10px; }


.l { text-align: left; }
.r { text-align: right; }
.left{float:left;}
.right{float:right;}
.clear {clear:both;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden; }

hr {color:#d9d9d9; background:#d9d9d9;border:0px; height:1px;margin-bottom:25px;clear:both;}
.screenshot {  margin-bottom:25px}

.fieldWithErrors { display: inline; }
.errorExplanation h2 { font-size: 18px; }
.errorExplanation ul, .warning { background: #f7f6d8 url('../images/icons/warning.gif') 1% 50% no-repeat; padding-left: 42px; border: 1px solid #e9e8bf; padding: 5px 5px 5px 50px; color: #675126; }
.warning { background-position: 1% 25%; margin-bottom: 30px; padding: 15px 15px 15px 55px; }
.warning p { margin-bottom: 0; }

/* ========== */
/* = Layout = */
/* ========== */

/* all content areas that are outside of grid but need to be centered with correct width */
.content { width:925px; margin: 0 auto; display: block; padding:0 20px; }
.content:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}

#wrapper {min-height:100%; height:auto !important;height:100%;margin:0 auto -375px;/* neg val of footer height*/}

#container.frontpage { background: #fff url('../images/background/bg-grey-top-white-bottom.gif') top left repeat-x; border-top: 1px solid #fff; padding-top: 30px; }

#masthead { height:41px; padding-top:13px; background: #212121 url('../images/background/bg-masthead.gif') top left repeat-x; } /* this contains the main nav */
#masthead a.logo-shopify { text-indent:-9999px; position:absolute; width:163px; height:55px; background:url('../images/logos/shopify_bag.gif'); top:-1px; display:block;}    
#masthead a.logo-shopify:hover, #masthead a.logo-shopify:focus  { background-position:0 -55px; outline:none;}
#masthead ul#nav-primary { float:right; margin:0; }
#masthead ul#nav-primary li { float:left; list-style-type:none; margin:0 15px 0 0; height:27px; padding:8px 0 0 4px; background:none; }
#masthead ul#nav-primary li a { padding:7px 8px 0px 6px; color:#ddd; text-decoration:none; font-weight:normal; font-size: 13px; text-shadow: 1px 1px 1px #222; outline:none; }
#masthead ul#nav-primary li a:hover { color: #fff; text-decoration:none;}
#masthead ul#nav-primary li a:active, #masthead ul#nav-primary li a:focus { color:#FFF; } 
#masthead ul#nav-primary li.current { background: url('../images/buttons/btn-currentpage-left.png') center left no-repeat; padding:1px 0 0 4px; line-height:12px; margin-top:2px;}
#masthead ul#nav-primary li.current a { background:  url('../images/buttons/btn-currentpage-right.png') center right no-repeat;display:block; height:19px;}
#masthead ul#nav-primary li.login { background: url('../images/background/decal-masthead.gif') center left no-repeat; padding-left: 18px; }
#masthead ul#nav-primary li.login a { color: #999; }
#masthead ul#nav-primary li.login a:hover { color: #fff; }


#banner { height:75px; padding:30px 0 40px 0; background: url('../images/background/bg-subpagebanner.gif') repeat-x; } /* green banner used on all sub-pages */
/*#banner .subpage-header { text-shadow: 2px 2px 2px #3c7710;  font-weight: 800;font-size:50px; color:#FFF; letter-spacing:-1px; margin-top:-5px; float:left; line-height:normal; }*/

/* the contact info on the green banner */
#banner #contact-us {float:right; margin-top:5px;}
#banner #contact-us img { display:block; float:right;}
#banner #contact-us p { margin:0 0 5px 0;font-size:22px; color:#FFF;  text-shadow: 1px 1px 2px #3c7710; font-family: "Helvetica Neue", sans-serif; font-weight: 200; margin:0 0 7px 0; text-align:right;}
#banner #contact-us a.livechat { height:22px; width:82px; position:relative; left: 7px; background:url('../images/buttons/btn-livechat.gif') no-repeat; float:right; overflow:hidden; text-indent:-99999px;}
#banner #contact-us a.livechat:hover { background-position: 0px -31px;}
#banner #contact-us a.emailus { height:22px; width:68px; clear:both; background:url('../images/buttons/btn-emailus.gif') no-repeat; float:right; overflow:hidden; text-indent:-99999px;}
#banner #contact-us a.emailus:hover { background-position: 0px -31px;}

#banner #chat-off {  }


#content {padding:20px 0 0;}

#footer,#push { clear:both;/* .push must be the same height as .footer */ }
#push {height: 375px;}

#footer-wrapper { padding:20px 0 0 0; width:925px; margin:auto;}
#footer { background:#111 url('../images/background/bg-footer.gif') repeat-x; height: 375px; color: #666; border-top: 1px solid #444; font-size: 11.5px; }
#footer.frontpage { height: 640px; }
#footer h3 { color: #fff; border-bottom: 1px solid #171717; margin-bottom: 0px; padding:0 0 5px 0; font-size: 13px; font-weight:normal;}
#footer a { color: #777 }
#footer a:hover { color: #cdcdcd; }
#footer ul { list-style-type: none; margin: 0 0 20px 0; padding: 10px 0 0 0; border-top: 1px solid #444; }
#footer ul li { margin-bottom:5px; font-size:11.5px; background:none; padding:0; }
#footer ul li a { color:#999;  }
#footer ul li a:hover { color:#3084ca; }

#footer .content { margin-top:20px; }
#footer .copyright { margin-top:20px; }

#footer .contact-us img { margin-right:4px;}
#footer .contact-us li { margin-bottom:7px }
#footer .contact-us, #footer .contact-us a  { color: #cdcdcd; }
#footer .contact-us * { vertical-align: middle; }
#footer .contact-us a:hover { }
/*#footer ul.post-list   { margin:0 0 20px 0; }
#footer ul.post-list  li { border-bottom: 1px solid #444; padding:0 0 7px 0; }*/

/*#footer #twitter_update_list ul li { background:none; padding:0; margin-bottom:15px; }*/
#footer  #copyright { text-align: center; font-size: 11px; color: #666; margin: 15px 0 10px 0; }

/* ================ */
/* =     INDEX    = */
/* ================ */

#header.contest { background: #345f94 url('../images/background/bg-header-blue.gif') top left repeat-x; height: 314px; padding-top: 50px; }
#header.contest h1 { margin: -7px 0 32px -3px; font-family: Helvetica, Arial, sans-serif; font-size: 32px; float: none; }
#header.contest p { line-height: 30px; font-size: 17px; color: #cfe0f5; font-family: Helvetica, Arial, sans-serif; text-shadow: 1px 1px 1px #283d59; }
#header.contest p a { color: #c5e07a; }
#header.contest p.subtitle { text-shadow: 1px 1px 1px #283d59; font-weight: normal; font-size: 25px; color:#FFF; margin: 10px 0 25px 0; line-height:normal;}
#header.contest #participate-link { margin: 20px 0 20px 0; display: block; }
#header.contest .col-5 img{ margin-top:-50px;}

#news { background: #132631; padding: 10px 0; color: #85adc5; font-size: 15px; border-top: 1px solid #000; }
#news h3 { font-size: 12px; margin-top: 0 !important; color: #7fbadc; float: left; margin-right: 15px; }
#news-list { margin: 0px 0 0 0; padding: 0; float: left; }
#news-list li { list-style-type: none; list-style-image: none; background: url('../images/icons/right-arrow.gif') 0% 50% no-repeat; padding-left: 20px; }

#sidebar h4 { background: url('../images/icons/sidebar-header-bg.gif') top left no-repeat; width: 326px; height: 28px; color: #fff; padding: 4px 0 4px 15px; font-size: 13.5px;}
#sidebar h4 span { display: block; width: 16px; height: 16px; margin-right: 10px; float: left; }
#sidebar h4#header-who span { background: url('../images/icons/header-who.gif') top left no-repeat; }
#sidebar h4#header-time span { background: url('../images/icons/header-time.gif') top left no-repeat; }
#sidebar h4#header-prize span { background: url('../images/icons/header-prize.gif') top left no-repeat; }

ol.steps { font-size: 20px; margin: 20px 0 40px 0px; list-style-type: none; }
ol.steps li { height: 42px; padding-left: 50px; line-height: 42px; color: #777; margin: 10px 0;}
ol li.step-1 { background: url('../images/icons/bullet-1.gif') top left no-repeat; }
ol li.step-2 { background: url('../images/icons/bullet-2.gif') top left no-repeat; }
ol li.step-3 { background: url('../images/icons/bullet-3.gif') top left no-repeat; }

#main h3 { margin-top: 30px; }

#prize-table td { font-size: 15px; color: #777; }
#prize-table td:first-child { text-align: right; color: #4c8118; }

#center-signup { margin: 30px 0; width: 100%; }
#center-signup th { font-size: 15px; line-height: 25px;}
#center-signup td { text-align: center; }

#faq { background: #FFFFFF url('../images/background/bg-grey-top-white-bottom.gif') repeat-x scroll left top; padding-top: 35px; margin-top: 20px; border-top: 1px solid #ddd; }
#faq h3 { margin-top: 30px;}

#bottom-signup, #bottom { background: #373737 url('../images/background/bg-grey3.gif') top left repeat-x; padding: 15px 0 14px 0; margin-top: 30px; border-bottom: 1px solid #222; text-align: center; font-size: 16px; color: #999; }
#bottom-signup * { vertical-align: middle; }
#bottom-signup a { color: #eee; }
#bottom-signup a:hover { color: #fff; }
#bottom-signup span { margin: 0 5px; }

#bottom { text-align: left; color: #aaa; font-size: 12px; padding-top: 30px; }
#bottom p { line-height: 22px; }
#bottom h3 { background: url('../images/icons/bottom-header.gif') top left no-repeat; padding-left: 35px; color: #555; width: 279px; height: 28px; line-height: 28px; font-size: 13px; }

blockquote { font-size: 17px; line-height: 30px; color: #aaa; font-family: Georgia, serif; font-style: italic; font-weight: normal; margin: 30px 0 6px;}
.quote-author { text-align: right; color: #777; padding-right: 15px; position: relative; bottom: 25px;}

#footer-news h3, #footer-twitter h3, #footer-contact h3 { padding: 5px 0 0 25px; height: 22px; }
#footer-news h3 { background: url('../images/icons/feed20.gif') center left no-repeat; }
#footer-twitter h3 { background: url('../images/icons/twitter21.gif') center left no-repeat; }
#footer-twitter .datetime { font-weight: bold; color: #fff; margin-bottom: 5px; font-size: 11px; }
#footer-twitter .tweet_avatar { float: left; margin-left: 5px; }

#footer-news a, #footer-twitter a { color: #78b9e7 !important; }
#footer-news a:hover, #footer-twitter a:hover { color: #3084ca !important; }

#footer-contact { font-size: 13.5px; }
#footer-contact h3 { background: url('../images/icons/mail16.gif') center left no-repeat; }
#footer-contact p { padding: 2px 0 0 25px; height: 22px; color: #fff; margin-bottom: 10px; }

#footer-contact #footer-phone { background: url('../images/icons/phone16.gif') center left no-repeat; color: #fff;}
#footer-contact #chat-on { background: url('../images/icons/chat16.gif') center left no-repeat; }
#footer-contact #footer-email { background: url('../images/icons/email16.gif') center left no-repeat; }

#footer-news li { border-bottom: 1px solid #111; border-top: 1px solid #333; margin: 0 !important; padding: 10px 0 !important; }
#footer-news li p { margin-bottom: 0; }
#footer-news ul li:first-child { border-top: none;}

#contest-signup { padding: 15px; }
#contest-signup h3 { color: #aaa; font-size: 32px;}
#contest-signup form { background: none; border: none; padding: 0; }
#contest-signup input { width: auto; }

/* ======= */
/* = 404 = */
/* ======= */
.missingpage {  width:535px; margin:auto; margin-top:50px; }
.missingpage ul { width: 125px; float:left; margin-right:25px; padding:0; }
.missingpage ul li { background:0; padding:0;}
.missingpage .last { width:85px; }
.missingpage .super { vertical-align:super; font-size:14px; color:#aaa; margin-left: 5px; }
.missingpage .note { font-size:12px; color:#787878; margin-top:-10px; }

/* ======= */
/* = Unsupported Browser = */
/* ======= */
ul.alternative-browsers { margin: 0 0 15px 0; padding:0; }
ul.alternative-browsers li { margin:0 0 7px 0; padding:0 0 7px 0;border-bottom:1px solid #ececec; background:none; list-style-type:none; vertical-align:middle; }
ul.alternative-browsers li a img { vertical-align:middle; margin-right:10px;}