/* 
	----------------------------
	@project: HPExperience/Designory;
	@author: Cameron Hill
	@date: 01-Dec-2012;
	@description: evolving revision to bootstrap HPE campaigns;
	@todo: grid-system, iconography;
	----------------------------
*/

/*
	----------------------------
	BASE STYLES
	----------------------------
*/

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,ol,li,fieldset,hr { margin:0; padding:0; border:0; }
body, input, textarea, select { font-family: 'HPSimplified', Arial, Helvetica, sans-serif; }
section, nav, article, header, footer { display: block; }
a { color: #007dba; text-decoration: none; }
a:hover, a:focus { color: #006699; text-decoration: underline; }
a:visited { color: #822980; }
sub, sup { position: relative; font-size: 50%; line-height: 0; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
hr { border: 0; height: 1px; background: #a5a5a5; width: 1000px; max-width: 100%; margin: 0 auto; }

::-moz-selection { background: #f05332; color: white; text-shadow: none; }
::selection {  background: #f05332; color: white; text-shadow: none; }

/*
	----------------------------
	PAGE MODULE ELEMENTS
	----------------------------
*/

.body { font-size: 16px; line-height: 22px; color: #000; position: relative; }
.body p, .body ul, .body ol, .body dl { margin: 0 0 12px 0; }
.content { width: 1000px; margin: 0 auto; position: relative; }
.content.content-gutter { width: 964px; padding-left: 18px; padding-right: 18px; }
.content.content-pad-top { padding-top: 50px; }
.content.content-pad-bottom { padding-bottom: 50px; }
.content-breakout { width: 100%; }
.content-center-outer { float: right; right: 50%; position: relative; }
.content-center-inner { float: right; right: -50%; position: relative; }

.content-alt { background-color: #0096d6; color: #fff; }
.content-alt a { color: #fff; text-decoration: underline; }
.content-alt a:hover { text-decoration: none; }

.vert-sep > div { border-left: 1px solid #fff; }
.vert-sep > div:first-child { border-left: 1px solid transparent; }

.column { display: inline-block; vertical-align: top; position: relative; *zoom: 1; *display: inline; }
.column.end { float: right; }

.hub-nav { position: relative; width: 1000px; margin: 0 auto; }
.hub-nav > a { font-size: 14px; color: #767676; margin: 0 2px 0 18px; line-height: 2.5; border-bottom: 4px solid transparent; position: relative; display: inline-block; zoom: 1; *display: inline; }
.hub-nav > a.active, .hub-nav > a.active:hover { color: #000; border-bottom: 4px solid #0096d6; text-decoration: none; }
.hub-nav > a:hover { color: #006699; text-decoration: none; }
.hub-nav-cta { position: absolute; font-size: 18px; right: 18px; bottom: 8px; }
.hub-nav-cta .button { font-size: 16px; line-height: 38px; padding: 0 15px; }
.dock { background: #fff; z-index: 100; padding-top: 8px; }
.docked .hub-nav { border-bottom: 1px solid #a5a5a5; }

.h-banner { font-size: 52px; line-height: 54px; font-weight: bold; }
.h-page { font-size: 32px; line-height: 32px; font-weight: bold; }
.h-section { font-size: 24px; line-height: 30px; font-weight: bold; }
.h-secondary { font-size: 18px; line-height: 22px; font-weight: bold; }
.h-modal { font-size: 20px; line-height: 24px; font-weight: bold; }

/* spacing */
p + .h-modal { margin-top: 20px; }
.content .h-page, .content .h-modal { margin-bottom: 12px; }

.button, .button:visited { display: inline-block; border: 0; color: #fff; font-size: 18px; line-height: 36px; background-color: #0096D6; font-weight: bold; padding: 0px 16px; white-space: nowrap; -webkit-border-radius: 0 6px; -moz-border-radius: 0 6px; -ms-border-radius: 0 6px; border-radius: 0 6px; }
.button:hover, .button:active { background-color: #006699; color: #fff; text-decoration: none; }
.button-critical, .button-critical:visited { background-color: #d7410b; color: #fff; }
.button-critical:hover, .button-critical:active { background-color: #c1401a; color: #fff; }
.button-secondary, .button-secondary:visited { background-color: #767676; }
.button-secondary:hover, .button-secondary:active { background-color: #5a5a5a; }
.button-disabled, .button-disabled:hover, .button-disabled:active, .button-disabled:visited { background-color: #ccc; cursor: pointer; }
.button-inline { font-size: 16px; line-height: 26px; }

.tab-wrapper { border-bottom: 1px solid #000; }
.tab { position: relative; top: 1px; background: #fff; display: inline-block; zoom: 1; *display: inline; border: 1px solid transparent; border-bottom: 1px solid #000; font-size: 18px; font-weight: bold; padding: 8px 8px 4px 8px; color: #5a5a5a; }
.tab.active { border: 1px solid #000; border-radius: 0 6px 0 0; border-bottom: 1px solid #fff; color: #000; }
.tab:hover { cursor: pointer; color: #000; }

.legal { width: 964px; color: #767676; border-bottom: 1px solid #e5e8e8; padding: 0 18px; margin: 60px auto 0;}
.legal p { font-size: 12px; line-height: 15px; text-indent: -9px; margin-left: 9px; }


/*
	----------------------------
	ICONOGRAPHY
	----------------------------
*/

.icon { background: url(../media/icon_sprite.png) no-repeat; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; }
.icon-tweet-blue { background-position: -192px 0; width: 28px; height: 23px; margin-right: 6px; }
.icon-tweet-white { background-position: -163px 0; width: 28px; height: 23px; margin-right: 6px; }
.icon-share { background-position: -108px 0; width: 14px; height: 15px; }
.icon-arrow-left {background-position: 0 0; width: 21px; height: 38px; display: none; }
.icon-arrow-left.active, .icon-arrow-right.active { display: block; }
.icon-arrow-left.active:hover { cursor: pointer; background-position: -21px 0; }
.icon-arrow-right { background-position: -44px 0; width: 21px; height: 38px; display: none; }
.icon-arrow-right.active:hover { cursor: pointer; background-position: -66px 0; }


/*
	----------------------------
	MODAL
	----------------------------
*/

.modal-backdrop { display: none; opacity: 0.8; filter: alpha(opacity=50); background-color: #000; width: 100%; height: 100%; top: 0; left: 0; position: fixed; z-index: 900; }
.modal { height: 0; overflow: hidden; opacity: 0; position: fixed; top: 12.5%; left: 50%; z-index: 999; width: 560px; margin: 0 0 0 -280px; background-color: white; -webkit-transition: opacity .3s ease .2s; -moz-transition: opacity .1s ease .1s; -ms-transition: opacity .1s ease .1s; -o-transition: opacity .1s ease .1s; transition: opacity .1s ease .1s; }
.modal.active { height: auto; opacity: 1; }
.modal-header { padding: 15px 15px 0; /*border-bottom: 1px solid #eee;*/ }
.modal-body { max-height: 400px; padding: 15px; overflow-y: auto; }
.modal-close { float: right; font-size: 20px; font-weight: bold; line-height: 20px; color: #7a7a7a ; text-shadow: 0 1px 0 white; opacity: .5; filter: alpha(opacity=50); cursor: pointer; border: 0; -webkit-appearance: none; background: transparent; }
.modal-close:hover { opacity: 1; filter: alpha(opacity=100); background: transparent; }
.modal .h-modal { margin: 0; }
.modal .loading { display: block; height: 64px; width: 100%; background: url(../media/loading.gif) no-repeat 50% 50%; }

.modal input, .modal textarea { display: inline-block; padding: 4px 6px; margin-bottom: 10px; font-size: 16px; line-height: 20px; color: #555; vertical-align: middle; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; }
.modal input[type=file] { padding: 0; }
.modal input[type=checkbox] { margin: 0; }
.modal label { display: block; margin-bottom: 5px; font-size: 16px; font-weight: bold; margin-top: 36px; }
.modal textarea { width: 97%; height: auto; background-color: white; border: 1px solid #CCC; }
.help-block { display: block; margin-bottom: 10px; }
.help-block, .help-inline { color: #595959; font-size: 14px; }

.control-group.error,
.control-group.error input,
.control-group.error textarea { color: #B94A48; }
.error-message { display: none; }


#entry_form > label:first-child { margin-top: 0; }
#terms-group label { font-size: 16px; font-weight: normal; }
#entry_upload { position: absolute; left: 22em; bottom: 15px; margin-right: 2em; }


/*
	----------------------------
	SOCIAL
	----------------------------
*/

.share-this { width: 64px; float: left; font-size: 14px; }
.share-this a { color: #000; }
.share-fb { width: 100px; float: left; }
.share-fb-learn-more { display: block; font-size: 12px; line-height: 1; margin-top: 2px; }

#loginBox a {display:inline-block; height:20px; width:141; background: url(./media/overview/linkedin-button.png) no-repeat 0 0;}

/*
	----------------------------
	UTILITY
	----------------------------
*/

.content:before, .content:after,
.clearfix:before, .clearfix:after { content: ""; display: table; }
.content:after,
.clearfix:after { clear: both; }
.content,
.clearfix { zoom: 1; }

.gutter-left { margin-left: 18px; }
.gutter-right { margin-right: 18px; }
.gutter-left.button { margin-left: 10px; }
.uppercase { text-transform: uppercase; }
.bold { font-weight: bold; }
.narrow { font-weight: normal; }
.error { color: #f00; }

/*
	----------------------------
	HPE OVERRIDE
	----------------------------
*/


/*
	----------------------------
	PAGE SPECIFIC STYLES
	----------------------------
*/

#touch-banner { background: url(../media/banner_touch.jpg) scroll 50% 0 no-repeat; height: 325px; font-weight: bold; }
#touch-banner h2 { margin-bottom: 14px; }
#touch-banner .column { width: 55%; }

#contest-steps { padding: 23px 0; width: 876px; text-align: center; }
#contest-steps .column { padding: 0 50px; line-height: 45px; }
#contest-steps .icon { width: 46px; height: 37px; margin-right: 12px; vertical-align: middle; }
#contest-steps .icon-video { background-position: 0 -46px; }
#contest-steps .icon-tweet { background-position: 0 -105px; }
#contest-steps .icon-enter { background-position: 0 -162px; }

#video-feature .h-title { font-size: 18px; font-weight: normal; }
#video-feature .h-secondary { margin: 4px 0 16px; }
#video-feature .modal-trigger { margin-bottom: 12px; }
#video-feature .share-container { position: absolute; right: 0; top: 110px; }
#main-video { background-color: #e8e8e8; height: 542px; margin-bottom: 40px; }

#tweet-modal .modal-body { display: none; }
#tweet-modal.denied .modal-body.denied { display: block; }
#tweet-modal.authorized .modal-body.authorized { display: block; }

#tweet-samples .column { width: 286px; margin-left: 50px; }
#tweet-samples .rotator { min-height: 112px; margin-top: 22px; }
#tweet-samples .rotator > .column:first-child { margin-left: 0; }
#tweet-samples .profile-thumb { float: left; width: 39px; height: 39px; }
#tweet-samples .message { padding-left: 50px; }
#tweet-samples .handle { color: #5a5a5a; }
#tweet-samples .links { font-size: 12px; color: #5a5a5a; }

#progress-meter { width: 750px; height: 28px; background: #d5d5d5; position: relative; margin-bottom: 60px; }
#progress-meter .progress { height: 100%; width: 0; display: inline-block; background: #0096d6; *zoom: 1; *display: inline; }
#progress-meter .label { position: absolute; left: 5px; top: 20%; line-height: 1; z-index: 1; font-weight: bold; }
#progress-meter .marker-label { font-size: 14px; font-weight: bold; color: #007dba; right: 0; }
.column.prize { width: 250px; height: 250px; float: left; border: 1px solid #CCC; border-width: 1px 1px 1px 0; }
.column.prize:first-child { border-width: 1px; }
.column.prize.locked { opacity: .5; filter: alpha(opacity=50); zoom: 1; }
.column.prize img { position: absolute; top: 0; left: 0; z-index: 0; }
.column.prize strong { position: relative; z-index: 1; display: block; text-align: center; margin-top: 36px; }
.column.prize .icon { position: absolute; z-index: 1; top: 10px; right: 10px; width: 20px; height: 18px; background-position: -236px 0; }
.column.prize.locked .icon { background-position: -264px 0; }
.column.prize-end { margin-left: 18px; width: 178px; padding-top: 75px; }
#next-prize-count { color: #0096d6; font-size: 40px; line-height: 1; font-weight: bold; vertical-align: middle; }

#countdown .unit { display: block; color: #d7410b; font-size: 42px; line-height: 1; font-weight: bold; }
#countdown .label { display: block; line-height: 1.2; }
#countdown .sep { font-size: 38px; line-height: 1; margin: 0 4px; }

#video-gallery { margin-top: 22px; }
#video-gallery p { margin-top: 8px; }
#video-gallery .column { vertical-align: middle; }
#video-gallery .column-wrap { width: 902px; overflow: hidden; }
#video-gallery .wrap { width: 2804px; position: relative; left: 0; }
#video-gallery .column .column { width: 204px; margin: 0 11px; vertical-align: top; }
#video-gallery .column.nav-page-left,
#video-gallery .column.nav-page-right { width: 21px; margin: 0; }
.modal.video { width: 720px; margin-left: -360px; }
.modal.video .modal-header { padding: 40px 40px 15px; }
.modal.video .modal-body { max-height: 100%; padding: 0 40px 40px; }

#terms td { padding: 0 6px; }