/* Theme Name: SurveyGizmo Content First (GreyLine) Theme URI: http://www.surveygizmo.com Description: Content redesign on values, persona and focus Author: Andrew, Eric, Christian Author URI: http://www.surveygizmo.com/our-team Version: 1.0 Tags: License: License URI: */ /* CSS FALLBACK VERIFICATION RULE, DON'T DELETE! */ #v-style {display: none;} html { -webkit-text-size-adjust: none; } /* modified from http://www.cssstickyfooter.com/style.css */ html, body {height: 100%;} #wrap {min-height: 100%;} /* http://paulirish.com/2012/box-sizing-border-box-ftw/ */ #page-wrapper * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} #page-wrapper {min-height: 100%;} /* === break these guys into another stylesheet. */ @font-face { font-family: 'IcoMoon'; src: url('fonts/IcoMoon.eot'); src: url('fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('fonts/IcoMoon.svg#IcoMoon') format('svg'), url('fonts/IcoMoon.woff') format('woff'), url('fonts/IcoMoon.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Add the following classes to your stylesheet if you want to use data attributes for inserting your icons */ .iconb:before, .icona:after { font-family: 'IcoMoon'; content: attr(data-icon); } /* Add the following CSS properties to your stylesheet if you want to have a class per icon */ [class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'IcoMoon'; font-style: normal; } .icon-user:before { content: "\005e"; } .icon-rocket:before { content: "\0025"; } .icon-comments:before { content: "\0026"; } .icon-cart:before { content: "\0024"; } /* === Simple reset */ a { color:#2B5791; cursor:pointer; text-decoration: none; } a:hover { color: #002459; text-decoration:underline; } a img {border: none;} p {margin: 0 0 1em 0;} /* === Helper Classes */ .display-none, .none, .hide, .hidden {display: none;} /* hiding objects needing to get built by JS */ .js-hide {visibility: hidden;} /* showing them in case modernizer won't run (no javascript) */ .no-js .js-hide {visibility: visible;} hr { height: 0; border: 0px none; border-bottom: 1px solid #D2D9DD; } hr.minimal {margin: 0;} .orange {color: #F26227;} .grey {color: #999;} .letter-list li {list-style-type: lower-alpha;} /* widths - we'll go back and make these % based and responsive */ .wrap { position:relative; margin:0 auto; text-align:left; min-height: 100%; } .wrap-840 {max-width:840px; position:relative; margin:0 auto; text-align:left; } .wrap-880 {max-width:880px; position:relative; margin:0 auto; text-align:left; } .wrap-940 {max-width:938px; position:relative; margin:0 auto; text-align:left; } .wrap-960 {max-width:962px; position:relative; margin:0 auto; text-align:left; } .wrap-980 {max-width:982px; position:relative; margin:0 auto; text-align:left; } .wrap-auto {max-width:100%; position:relative; margin:0 auto; text-align:left; } /* Columns */ .column20 {width:20%;} .column25 {width:25%;} .column30 {width:30%;} .column31 {width:31%;} .column32 {width:32%;} .column33 {width:33%;} .column34 {width:34%;} .column35 {width:35%;} .column40 {width:40%;} .column45 {width:45%;} .column50 {width:50%;} .column55 {width:55%;} .column60 {width:60%;} .column65 {width:65%;} .column66 {width:66%;} .column67 {width:67%;} .column70 {width:70%;} .column72 {width:72%;} .column75 {width:75%;} .column80 {width:80%;} .column-wrap { overflow: hidden; padding: 1em 0; } #main-col {width: 66%;} .column-padding { position:relative; padding:0 10px 20px 10px; } /* Clearfix */ .clearfix {*zoom: 1;} .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /* Aside is like a smaller sidebar, and the content sits next to it */ .aside { width: 25%; float: right; margin: 0 2% 0 5%; } .aside-wide {width: 30%;} .aside-content {margin-right: 30%;} /* float */ .float-left {float: left;} .float-right {float: right;} .clear {clear: both;} /* Rounded corners */ .rc1 {border-radius: 1px;} .rc2 {border-radius: 2px;} .rc3 {border-radius: 3px;} .rc4 {border-radius: 4px;} .rc5 {border-radius: 5px;} .rc {border-radius: 6px;} /* Default */ /* Buttonish */ input.button, .buttonish { white-space: nowrap; text-align: center; padding: .25em 1em; margin: 0 10px; text-decoration: none; display: inline-block; position: relative; cursor: pointer; border: 1px solid; border-radius: 4px; border-color: #E8EBEF #E1E5EA #D7DBE0 #E1E5EA; color: #495663; /* TEMPORARY */ border-color: #003E68; background: #3d769f; color: #fff !important; box-shadow: 0px 1px 0px #3180B7 inset, 0px 1px 0px rgba(0,0,0,.1); -webkit-appearance: none; } input.button:hover, .buttonish:hover { top:1px; text-decoration: none; border-color: #D5DAE0; /* TEMPORARY */ border-color: #003051; background: #2A648E; } .buttonish * {background-color: transparent;} .signup-button, .buttonish-orange, .buttonish-blue, .buttonish-green { color: #fff !important; text-decoration: none !important; } .signup-button, .buttonish-orange { border-color: #C24B00 #752E00 #682800 #752E00; background: #FF921C; box-shadow: 0px 1px 0px rgba(255,255,255,.3) inset, 0px 1px 0px rgba(0,0,0,.1); } .signup-button:hover, .buttonish-orange:hover { border-color: #C24B00 #752E00 #682800 #752E00; background: #FF761C; } .buttonish-green { background: #518f00; border-color: #627B25 #47591B #3F5018 #47591B; box-shadow: 0px 1px 0px rgba(255,255,255,.3) inset, 0px 1px 0px rgba(0,0,0,.1); } .buttonish-green:hover { background: #427400; border-color: #627B25 #47591B #3F5018 #47591B; box-shadow: 0px 1px 0px rgba(255,255,255,.3) inset, 0px 1px 0px rgba(0,0,0,.1); } .buttonish-grey { background: #859fb2; border-color: #4f7a9a; box-shadow: 0px 1px 0px rgba(255,255,255,.3) inset, 0px 1px 0px rgba(0,0,0,.1); } .buttonish-grey:hover { background: #738b9d; border-color: #4f7a9a; box-shadow: 0px 1px 0px rgba(255,255,255,.3) inset, 0px 1px 0px rgba(0,0,0,.1); } .buttonish-tip {padding-right: 1.75em !important;} .buttonish-tip::after, .signup-button::after { content: ""; background: url('http://d34wpjv4rf3nwa.cloudfront.net/www1/wp-content/themes/greyline/gui/buttonish-tip.png') 100% 50% repeat-y; position: absolute; top:0; left: 0; bottom: 0; right: 0; } .buttonish-big {padding: .6em 1em;} /* Buttonish-huge. only Blue */ .content2 .trial-button, .buttonish-huge { font-size: 20px; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; padding: 12px 26px 12px 18px; border: 1px solid #2572a8; box-shadow: 0px 1px 2px #a6d6ef, 0px 1px 0px #a6d6ef inset, 0px 1px 2px #a6d6ef inset; background: #1f8dca; /* Old browsers */ background-image: -moz-linear-gradient(top, #1f8dca 0%, #207cca 100%, #1970bd 100%); /* FF3.6+ */ background-image: -webkit-linear-gradient(top, #1f8dca 0%,#207cca 100%,#1970bd 100%); /* Chrome10+,Safari5.1+ */ background-image: -ms-linear-gradient(top, #1f8dca 0%,#207cca 100%,#1970bd 100%); /* IE10+ */ background-image: linear-gradient(top, #1f8dca 0%,#207cca 100%,#1970bd 100%); /* W3C */ } .content2 .trial-button:hover, .buttonish-huge:hover { background: #519dc6; /* Old browsers */ background-image: -moz-linear-gradient(top, #519dc6 0%, #207cca 100%, #3b7fba 100%); /* FF3.6+ */ background-image: -webkit-linear-gradient(top, #519dc6 0%,#207cca 100%,#3b7fba 100%); /* Chrome10+,Safari5.1+ */ background-image: -ms-linear-gradient(top, #519dc6 0%,#207cca 100%,#3b7fba 100%); /* IE10+ */ background-image: linear-gradient(top, #519dc6 0%,#207cca 100%,#3b7fba 100%); /* W3C */ } /* Blocks - mostly legacy, from old www. */ .small-box { padding: 10px 15px; color: #757575; background: rgba(0, 14, 55, 0.04); font-size: 12px; line-height: 19px; display: inline-block; } .small-box ul {padding-left: 5%;} .small-box h5 { margin-top: 10px; margin-bottom: 0; color: #546479; font-weight: bold; font-size: 14px; } .boxy { padding:1em; background:#f7f8f9; margin: 1em 0em; clear: both; } /* gradient header */ .header-gradient { padding: 5px 0px; font-weight: normal; margin: 1.5em 0; background: -moz-linear-gradient(top, rgba(255,255,255,.0) 0%, rgba(216,234,246,.35) 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.0)), color-stop(100%,rgba(216,234,246,.35))); /* webkit */ border-bottom: 1px solid #c9ddee;} /* ----------------------------------------------------------------------------------------------- Note Block ----------------------------------------------------------------------------------------------- */ .note { padding: 2em 5%; border-radius: 0; border:1px solid #B3BABF; border-bottom-color: #989FA5; box-shadow: 0px 1px 0px #ffffff inset; background: #F7F7F7; /* Old browsers */ border-bottom: 3px solid #1266A6; } .note img {display: block;} .note-lite { padding: 2em 5%; border-radius: 10px; border: 4px solid #E7E8EB; background: #F7F7F7; /* Old browsers */ } .note-lite h3 {margin: 0;padding: 0;} .note-lite p {padding-top: 4px;} .note-lite .column-wrap {padding: 30px 0 0 0;} /* training block specific */ .training-block img {float:left;margin: 0 10px 10px 0px;} .training-bc {padding-right: 4.9%;border-right: 2px #E7E8EB solid;} .training-bc a {color: #3C6300;} .training-gsd a {color: #084B7C;} .training-block br {display: none;} .tutorials .training-block a {display: block;} .tutorials .training-block .column-wrap {padding-top: 20px;} .tutorials .training-block {padding: 1.5em 1.5em 1em 1.5em; margin: 3em 0;} .tutorials .training-block p {margin: 0;} /* === general layout */ .align-left {text-align: left;} .align-right {text-align: right;} .align-center {text-align: center;} .visible { display:block; } html, body, div { margin: 0; padding: 0; } /* grid layout */ #layout-wrapper { max-width:1020px; width: 95%; margin: 0 auto; padding: 0; margin-bottom: 100px; *zoom: 1; } #layout-wrapper:after { clear: both; } #layout-wrapper:before, #layout-wrapper:after { content: ""; display: table; } #layout-wrapper > .inner > :first-child, .slides .content > :first-child { margin-top: 0px; overflow: visible; } #header #logo { margin-top: 5px; } #header #logo img { max-width: 100%; height: auto; } #header {overflow: hidden; max-width:1020px; width: 95%; margin-left: auto; margin-right: auto; } /* fonts */ body { font-family: "Helvetica Neue", helvetica, arial, "sans serif"; font-size: .9375em; min-width: 280px; } .strong {font-weight: bold !important;} .underline {text-decoration: underline;} /* general menus */ .menu { list-style:none; } #header .menu a { color: #555; text-decoration: none; } .single-line-menu { display:block; margin: 0 0 0 350px; position: relative; padding: 0; } .single-line-menu li { display: inline-block; float: left; line-height: 1.4em; padding: 0 5px; text-align: left; } .single-line-menu strong { clear:both; display: block; font-size: 110%; } /* specific menus */ #header .menu li { margin: 0; line-height: 1.2em; width: 19%; border-radius: 10px; white-space: nowrap; font-size: 90%; padding: 0; } #header .menu li a { padding: 10px 10%; display: block; } #header .menu li:hover { background-color: #eee; } #header .menu .important a { /* background-color: #e0f8a3; */ color: #1266A6; background: #EDEEF0; border-radius: 6px; text-shadow: 0px 1px 0px #fff; } #header .menu .important a:hover { background: #1266A6; color: #fff; text-shadow: 0px 1px 0px rgba(0,0,0,.4); } /* on page menu - for the 404 page. */ .on-page-menu {padding: 0; } .on-page-menu li {display: inline-block;} .on-page-menu li a {display: inline-block;padding: 0 10px;} /* header */ #header #logo { float:left; width: 300px; text-align: center; } #topbar { background-color: #eee; padding: 0 4px; margin-bottom: 23px; font-size: 12px; font-family: Verdana, Arial; } #topbar .menu { max-width: 1020px; margin: auto; } #topbar .menu a { color: #888; padding: 5px 10px; display: inline-block; vertical-align: bottom; } #topbar .menu a:hover { color: #1266A6; background:#eee; text-decoration: none; } #topbar .menu .important { font-weight: bold; color: #333; background-color: #ddd; } /* signup-form */ .horizontal-signup-block form, .vertical-signup-block form { border-radius: 10px; background-color: #dedede; padding: 20px; } .horizontal-signup-block .button, .vertical-signup-block .button { border-radius: 5px 5px 5px 5px; font-size: 16px; height: 35px; margin: 0; padding: 5px 2%; } .horizontal-signup-block .field, .vertical-signup-block .field { border: 2px solid #BBBBBB; border-radius: 5px 5px 5px 5px; font-size: 16px; height: 35px; margin: 0; padding: 5px 2%; } @-moz-document url-prefix() { .horizontal-signup-block .field, .vertical-signup-block .field { text-indent: 7px; } } .horizontal-signup-block .select, .vertical-signup-block .select { border: 2px solid #BBBBBB; border-radius: 5px 5px 5px 5px; font-size: 16px; height: 35px; padding: 5px 2%; } .horizontal-signup-block .field.left-part, .vertical-signup-block .field.left-part { margin-right:0; border-right-width: 1px; border-radius: 5px 0px 0px 5px; float: left; } .horizontal-signup-block .field.right-part, .vertical-signup-block .field.right-part { border-left:none; border-radius: 0px 5px 5px 0px; float: left } .horizontal-signup-block .error, .vertical-signup-block .error { border-color: red; } .vertical-signup-block .form-split { width: 95%; margin: 10px auto; } .vertical-signup-block input {width: 100%;} .vertical-signup-block .form-structure {width: 100%;} .form-structure { display: inline-block; float: left; } form {overflow: hidden;padding-bottom: 1px;} /* 1px padding for button hover */ .form-name, .form-more, .form-confirm { width: 33.3%; } .form-name .field, .form-confirm .select {width: 48%;} .form-confirm .field, .form-more .field {width: 48%;margin-right: 1%;} .field.full {width: 98%;} .form-more {text-align: center;} .form-confirm {text-align: right;} /* IE7 */ .ie7 form .field {height: 16px;} .ie7 .form-name, .ie7 .form-more, .ie7 .form-confirm {width: 100%;} .ie7 .form-name .field, .ie7 .form-confirm .select {width: 40%;} .ie7 .horizontal-signup-block .form-split {width: 22% !important;} .ie7 .form-confirm .select {position: relative;top:4px;} .ie7 .form-confirm .field, .ie7 .form-more .field {width: 40%;margin-right: 1%;} .ie7 .field.full {width: 90%;} /* IE6 */ .ie6 form .field {height: 16px;} .ie6 .form-name, .ie6 .form-more, .ie6 .form-confirm {width: 30%;} .ie6 .form-name .field, .ie6 .form-confirm .select {width: 40%;} .ie6 .form-confirm .select {position: relative;top:4px;} .ie6 .form-confirm .field, .ie6 .form-more .field {width: 40%;margin-right: 1%;} .ie6 .field.full {width: 90%;} .form-clear { clear: both; text-align: right; padding-top: 20px; } .form-clear p { margin: 0; color: #666; line-height: 17px; font-size: 11px; font-family: Verdana, Arial; } .form-clear .smalltext {float: right; vertical-align: middle; } .form-clear .button {float: right; vertical-align: middle; margin-left: 10px; width: 32.5%; margin-right: .5%; cursor: pointer; } .field-last {margin-right: 0 !important;} /* home page */ /* bottom-signup */ #bottom-callout { margin-top: 100px; } #bottom-callout h2 { font-size: 3em; line-height: 1em; text-align: center; margin-bottom: .2em; } #bottom-callout h3 { margin-top: 0; font-size: 22px; font-weight: normal; text-align: center; } /* callout-block */ #callout-block { margin-top: 80px; } #callout-block h2 { font-size: 3em; line-height: 1em; text-align: center; margin-bottom: .2em; } #callout-block h3 { margin-top: 0; font-size: 23px; font-weight: normal; text-align: center; } #callout-block .callout-area { margin-top: 40px; } #callout-block .callout-area .header { max-width: 500px; margin: 0 auto; text-align: center; } #callout-block .callout-icons { list-style:none; text-align: center; padding: 0 0 10px 0; position: relative; margin-bottom: 0; } /* clearfix */ #callout-block .callout-icons {*zoom: 1;} #callout-block .callout-icons:before, #callout-block .callout-icons:after { content: ""; display: table; } #callout-block .callout-icons:after { clear: both; } #callout-block .callout-icons li { float: left; width: 24%; margin: 0px 0px 10px 0px; cursor: pointer; text-transform: uppercase; color:#888; text-align:center; } #callout-block .callout-icons li .iconb { height: 45px; font-size: 45px; line-height: 45px; } #callout-block .callout-icons li.active .img { opacity: 1; } #callout-block .callout-icons li.active {color: black;} #callout-block .callout-icons li.active .nub { border-bottom: 20px solid #ddd; border-right: 20px solid transparent; border-left: 20px solid transparent; height: 0; margin-left: 8%;  margin-top: 11px; position: absolute; width: 0; bottom: 0; } #callout-block .callout-icons li .label { display:block; margin-top: 5px; font-size: 12px; } #callout-block .callout-area .slides { background-color: #ddd; max-width: 800px; margin: 20px auto; padding: 10px; height: auto; overflow: hidden; clear: both; -webkit-transition: height 3s linear; position: relative; } /* clearfix */ #callout-block .callout-area .slides {*zoom: 1;} #callout-block .callout-area .slides:before, #callout-block .callout-area .slides:after { content: ""; display: table; } #callout-block .callout-area .slides:after { clear: both; } #callout-block .callout-area .slides .slide { padding: 10px; overflow: hidden; display: none; } #callout-block .callout-area .slides .active {display: block;} #callout-block .callout-area .slides .content { float: left; font-size: 16px; width: 44%; } #callout-block .callout-area .slides .full-content { padding: 10px 150px; } #callout-block .callout-area .slides .content-images { width: 52%; float: right; } #callout-block .callout-area .slides .content-images {text-align: right;} #callout-block .slides img {max-width: 100%; height: auto;} #callout-block .callout-area .slides .content-qoutes { width: 50%; float: right; text-align:left; } #callout-block .slides img {max-width: 100%;} /* App screenshot images*/ #callout-block .callout-area .slide-img-publish { position: absolute; bottom: 0; right:0; max-width: 50%; height: auto; } #callout-block .callout-area .slide-img-dragdrop {position: absolute;top:20px;right:0;max-width: 50%;} /* speech bubble...things? */ #callout-block .callout-area .slides .content-qoutes blockquote { background: #fff; border: 1px solid #1566a6; margin: .5em 0 3em 0; padding: .5em 5%; box-shadow: 0px -2px 0px #d0e0ed inset, 0px 2px 0px #c5c6c8; border-radius: 10px; position: relative; zoom:1; } #callout-block .callout-area .slides .content-qoutes blockquote::after { content: ''; position: absolute; width: 35px; height: 30px; background: url(gui/quote-talk-bubble.png) top left no-repeat; right: 15%; bottom: -28px; } #callout-block .callout-area .slides .content-qoutes blockquote:nth-of-type(even)::after { background-position: top right; right: auto; left: 15%;} /* qoute-bubbles */ .qoute-bubbles { list-style: none; clear: both; padding-left: 0; } .qoute-bubbles { list-style: none; overflow: hidden; } .qoute-bubbles li { width: 45%; float:left; margin: 15px 2%; } .talk-source { float: left; width: 100px; height: 100px; } .talk-source img { max-width: 100%; height: auto; } .talk-bubble { margin-left: 120px; min-height: 100px; background-color: #ddd; padding: 10px 22px 1px 22px; border-radius: 8px 8px 8px 8px; position: relative; } .talk-bubble .content { padding-bottom: 5px; font-size: 13px; } .talk-bubble .content p { padding: 0; } .talk-bubble .author {text-align: right;} .quote-text { font-size: 16px; font-weight: bold; } .talk-bubble .nub { border-bottom: 20px solid transparent; border-right: 20px solid #DDDDDD; border-top: 20px solid transparent; height: 0; top:50px; left: 0; margin-left: -15px; margin-top: -20px; position: absolute; width: 0; } /* hero slides */ #hero-slides { margin: 55px 0; position: relative; } #hero-slides .slides { display:none; } /* Adding this with JS b/c the flash is kinda annoying. */ /* #hero-slides img {max-width: 100%; height: auto;} */ #hero-slides img {visibility: hidden;} .no-js #hero-slides img {max-width: 100%; height: auto; visibility: visible;} #hero-slides h1 {white-space: nowrap;} /* slide 1 */ /* to get percents, take width and divide by 1020px */ #slide-1 .content-text { margin-left: 21.5686275%; /* 220px */ width: 78.4313725%; margin-top: 10.2%; position: absolute; z-index: 10; } /* unfortunate hack since Webkit has an issue with Margin-top */ @media screen and (-webkit-min-device-pixel-ratio:0) { #slide-1 .content-text{ margin-top: 23.5%; } } #slide-1 .content-text h1 { font-size: 64px; font-weight: normal; line-height: 1em; width: 100%; margin: 0; text-transform: uppercase; } #slide-1 .content-text h1 strong { display:block; } #slide-1 .content-text .sub-wrap { border-top: 1px dashed #BBBBBB; margin-left: 31.4888011%; /* 239/759 */ margin-top: 1em; padding: 1em 0 0 0; width: 67.1936759%; /* 510/759 */ } .sub-wrap p {line-height: 1.2em; font-size: 17.9px;} #slide-1 .content-images #slide-1-bg { left: 3.9215686%; /* 40/1020 */ position: relative; z-index: 2; width: 37.6470588%; /* 384/1020 */ display: inline-block; } #slide-1 .content-images #slide-1-fg { left: -1%; position: absolute; top: 18%; z-index: 3; width: 13.3333333%; /* 136/1020 */ display: inline-block; } /* Bottom of the page simple survey */ #simple-survey { position: fixed; z-index: 80; bottom: -2px; left: 0; width: 100%; height: 65px; } #simple-survey.active {height: 100%;} #survey-target { position: relative; z-index: 81; cursor: pointer; height: 63px; } #survey-target:hover {box-shadow: 0px 0px 20px 1px rgba(100,180,255,.3) inset, 0px 0px 1px 1px rgba(100,180,255,1) inset;} .active #survey-target { height: 100%; z-index: 60; background: rgba(255,255,255,.7); } .active #survey-target:hover {box-shadow: none;} #survey-title-bar { background: #162331; background: rgba(22,35,49,.8); background-image: -webkit-linear-gradient(top, #162331 0%, rgba(22,35,49,0.09) 74%, rgba(22,35,49,0.09) 100%); background-image: -moz-linear-gradient(top, #162331 0%, rgba(22,35,49,0.09) 74%, rgba(22,35,49,0.09) 100%); background-image: -ms-linear-gradient(top, #162331 0%, rgba(22,35,49,0.09) 74%, rgba(22,35,49,0.09) 100%); background-image: linear-gradient(top, #162331 0%, rgba(22,35,49,0.09) 74%, rgba(22,35,49,0.09) 100%); text-shadow: 0px 1px 2px #0c151f; color: #fff; text-align: center; padding: 0; height: 65px; line-height: 65px; cursor: pointer; position: absolute; bottom: 0px; left: -1px; width: 101%; margin: 0 auto; z-index: 70; font-size: 23px; } .active #survey-title-bar { bottom: auto; top:0; position: relative; z-index: 59; } #survey-container { position: absolute; bottom: 0px; left: 0; width: 100%; background: #fff; background: rgba(255,255,255,.95); border-bottom: 0px none; height: 0%; z-index: 70; text-align: center; border: 1px solid #162331; } .active #survey-container { height: 80%; left: 10%; width: 80%; box-shadow: 0px -10px 30px rgba(0,0,0,.4), 0px 0px 1px 1px #fff inset; } /* details */ #simple-survey, #survey-title-bar, #survey-container { -webkit-transition: all .1s linear; -moz-transition: all .1s linear; -ms-transition: all .1s linear; transition: all .1s linear; } #survey-container iframe { width: 100%; height: 100%; margin:0; padding:0; display:block; border:none; } .no-scroll {overflow: hidden;} .ios-fix {display: none;padding-bottom: 1000px;margin-bottom: -980px;} .ios-fix, #survey-container-int { position: absolute; top:50px; bottom:0; left: 0; width: 100%; } #survey-container-int {z-index: 50;} .ios-fix {z-index: 60;} .footer-logo { position: relative; top: 8px; } /* openclose */ .openclose { background: url(images/footer-openclose.png) top right no-repeat; background-size: 79px 29px; display: inline-block; width: 29px; height: 29px; overflow: hidden; text-indent: -1000em; position: relative; top:8px; margin-left: 15px; } .active .openclose {background-position: top left;position: absolute; top:10px; right:10px;} /* IE */ .old-ie #survey-target { background: #162331; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .ie7 #survey-container-int { position: absolute; height: 100%; zoom: 1; } .ie6 #simple-survey {display: none;} /* page-footer */ /* Contact Block */ .contact-block-wrap {text-align: center;} .contact-block { display: inline-block; border: 1px solid #122231; color: #122231; background: #edeff1; box-shadow: 0px 0px 10px rgba(18,35,50,.5), 0px 1px 0px #fff inset; border-radius: 10px; padding: 8px 15px 10px 40px; vertical-align: middle; font-size: 17px; position: relative; top:-77px; } .contact-block-img {position:absolute; top:-1px; left:-30px;vertical-align: middle;} .contact-block-wrap .smalltext { font-size: 80%; color: #66737F; } #page-footer { background-color: #eee; padding: 3em 3%; margin-top: 6em; clear: both; font-size: 14px; height: 260px; margin-top: -250px; position: relative; z-index: 100; } #page-footer #logistics { max-width: 1020px; margin: auto; text-align:center; } #page-footer #logistics a { text-decoration: none; } #page-footer #logistics a:hover { text-decoration: underline; } #footer-copyright { font-size: 12px; padding: 3em 10% 0 10%; margin: 3em 0 0 0; border-top: 1px solid #2b3743; } /* wordpress content (blogs, pages, etc) */ #content, #page-content, #fancybox-outer { color: #595959; line-height: 1.666667em; position: relative; margin-top: 4em; overflow: visible; padding-bottom: 250px; } #fancybox-outer {margin: 0;padding: 0;} h1, h2 {line-height: 1em;} h3 {line-height: 1.35em;} h4, h5, h6 {line-height: 1.65em;} #page-content h1 a{ color: #000; text-decoration: none; } /* ===== Support */ .help-bar { border-radius: 10px; padding: 2%; background: #F6F6F8; border: 4px solid #DCE1E6; margin: 4% 0; } .help-bar h2, .help-bar p {margin: 0;line-height: 1.5em;} .help-bar h2 {font-size: 2em;} .help-bar p {font-size: 1.25em;line-height: 1.5em;line-height: 1.5em;} .help-bar .button-wrap {} .help-bar .buttonish {margin: 0 0 0 .5em;} /* ===== Pagination on blog and search */ .paging {clear: both;padding-bottom: 3em;} .paging a, .paging span { text-decoration: none; border: 1px solid #E3E3E5; padding: 0px 5px; margin: 2px; border-radius: 4px; font-weight: normal; background: #F6F6F8; display: inline-block; } .paging a:hover {border-color: #7593BA;box-shadow: 0px -5px 10px #E8E8EA inset;} .paging span.active {background:#fff;border-color: #000;} .paging span.active {font-weight: bold;} .paging-next-prev {font-size: 120%;} .paging-next-prev a, .paging-next-prev span {padding: 5px 0; width: 45%; text-align: center; box-shadow: 0px 1px 3px #E8E8E8, 0px 1px 0px #fefefe inset;border-bottom-color: #C6C6C6;} .paging-next-prev a:hover {box-shadow: 0px 1px 3px #aaa, 0px 1px 1px #666, 0px -5px 10px #E8E8EA inset;} .paging-next-prev span.disabled {box-shadow: 0 0 0 transparent; border-color: #E3E3E5; color: #aaa;background: #fff;} .paging-nums {padding-top: 1em;} /* ----------------------------------------------------------------------------------------------- PAGE: About us User Photos ----------------------------------------------------------------------------------------------- */ .our-team #fancybox-inner {background: white;border-radius: 5px;overflow: auto;} .team-small-photos { margin: 40px 0 !important; padding: 40px 0; border-top: 1px solid #ccc; } .team-small-photos li { list-style: none; float: left; margin: 0px 20px 20px 0; position: relative; background: #F5F6F7; } .team-small-photos li:hover {z-index: 50;} .t-photo { display: block; cursor: pointer; /* width: 100px; height: 100px; */ width: 83px; height: 83px; -ms-interpolation-mode:bicubic; -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -ms-transition: all .25s linear; transition: all .25s linear; margin: 10px; border: 1px solid #CDD4E1; overflow: hidden; background: url(gui/gizmoface.png) center center no-repeat; background-size: cover; } .four-wide .t-photo { width: 114px; height: 114px; } .five-wide .t-photo { width: 83px; height: 83px; } .t-photo img { width: 100%; height: auto; } .team-small-photos li:hover .t-photo { border-color: #3E6596; box-shadow: 0px 1px 4px rgba(0,0,0,.3); } .t-info { display:none; background: #414141; color: #fff; text-align: center; position: absolute; font-family: Verdana, Arial, sans-serif; font-size: 80%; min-width: 200%; box-shadow: 0px 1px 4px rgba(0,0,0,.3); line-height: 160%; left:10px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .team-small-photos li:hover .t-info { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .t-info::before { content:''; border-color: transparent transparent rgba(0,0,0,.2) transparent; border-style:solid; border-width:6px; width:0; height:0; position: absolute; top:-12px; left: 22%; margin-left: -6px; } .t-info::after { content:''; border-color: transparent transparent #414141 transparent; border-style:solid; border-width:5px; width:0; height:0; position: absolute; top:-10px; left: 22%; margin-left: -5px; } .t-name, .t-title, .t-teaser { margin: 0px 5px; } .t-name { font-weight: bold; border-bottom: 1px solid #4C4C4C; padding-top: 3px; text-align: left; } .t-title { border-bottom: 1px solid #4C4C4C; color: #DDDDDD; padding-bottom: 3px; text-align: left; } .t-teaser { color: #7FD4FF; text-shadow: 0px 1px 1px #000, 0px 0px 2px #000; text-align: center; margin: 10px; display: inline-block; background: #282828; border-radius: 14px; padding: 0 12px; /* box-shadow: 0px 1px 0px #595959, 0px 1px 1px #000 inset, 0px 0px 1px #000 inset; */ cursor: pointer; } /* inside the modal */ #t-photo {float: left; margin: 0 1em 1em 0;} #t-photo .t-photo {border-color: #3E6596;background-color: #F5F6F7;} #t-photo .t-info {display: none;} #t-name {margin: 12px 12px 5px 12px;} #t-title {margin: 5px 12px 1em 12px; border-bottom: 1px solid #ccc; padding-bottom: 1em;} #t-bio {margin-left: 12px;margin-right: 12px;} /* ----------------------------------------------------------------------------------------------- PAGE: Student Signup ----------------------------------------------------------------------------------------------- */ .free-student-account h1 { background: url(images/student-header.png) top center no-repeat; font-family: Helvetica, Arial; border-radius: 6px 6px 0px 0px; padding: 10% 40% 2% 2%; text-rendering: optimizeLegibility; background-size: cover; } .free-student-account h1 a { color: #eef7fc !important; font-weight: normal; display: block; width: 100%; font-size: 44px; line-height: 1em; } #agreetable .row-final label { display: block;padding-top: 1em;} #agreetable .row-final input { padding-left: 10%;padding-right: 10%;} input.disabled-button, input.disabled-button:hover { background: rgba(0,0,0,.03); border: 1px dotted #bbb !important; color: #bbb !important; top:0; box-shadow: 0 0 0 transparent; cursor: not-allowed; } /* ----------------------------------------------------------------------------------------------- BLOCK: Sidebar (used on blog) ----------------------------------------------------------------------------------------------- */ /* Core structure */ .sidebar { background: #F6F6F8; width: 30%; margin-bottom: 60px; float: right; border-radius: 10px; } .sidebar-block { padding: 15px 20px; clear: both; border-bottom: 1px solid #ccc; border-top: 1px solid white; overflow: hidden; } .sidebar-block:last-child { border-bottom: 0px none; } .sidebar-header, .sidebar-block h3 { margin: 0 0 10px 0; } /* Lists */ .sidebar ul.menu { list-style:none; margin:0; padding:0; font-size: 14px; } .sidebar ul.menu li { display:block; padding:3px 0 3px 5px; text-decoration:none; border-top:1px solid #C3CBD0; } .sidebar ul.menu li a {text-decoration: none;} .sidebar ul.menu li:first-child { border:none; } /* Mailchimp signup code */ #mc_embed_signup{background:transparent; clear:left; font:14px Helvetica,Arial,sans-serif; } #mc_embed_signup form {display:block; position:relative; text-align:left; padding: 10px 0 10px 0;} #mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;} #mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;} #mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;} #mc_embed_signup input[type=radio]{-webkit-appearance:radio;} #mc_embed_signup input:focus {border-color:#333;} #mc_embed_signup .button { clear:both; white-space: nowrap; text-align: center; padding: .5em 1em; margin: 0 10px; text-decoration: none; display: block; position: relative; cursor: pointer; border: 1px solid; border-radius: 4px; color: #fff; border-color: #C24B00 #752E00 #682800 #752E00; background: #FF921C; } #mc_embed_signup .button:hover {background-color:#777;} #mc_embed_signup .small-meta {font-size: 11px;} #mc_embed_signup .nowrap {white-space:nowrap;} #mc_embed_signup .clear {clear:none; display:inline;} #mc_embed_signup label {display:block; padding-bottom:10px; font-weight: bold; font-size: 18px;} #mc_embed_signup input.email {width: 80%;display:block; padding:8px 0; margin:0 4% 10px 0; text-indent:5px; } #mc_embed_signup input.button {display:block; margin:0 0 10px 0;} #mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;} #mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;} #mc_embed_signup #mce-error-response {display:none;} #mc_embed_signup #mce-success-response {color:#529214; display:none;} #mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;} #mc_embed_signup p{font-size: 12px; color: #656565; line-height: 16px;} /* Top ten, using MC signup code styles */ #most-popular-posts { background: transparent; clear: left; font: 14px Helvetica,Arial,sans-serif; } #most-popular-posts label {display:block; padding-bottom:10px; font-weight: bold; font-size: 18px;} #most-popular-posts ul#topten li {padding: 10px 0px; clear: both; overflow: hidden; position: relative;} #most-popular-posts ul#topten li .popular-content {width: 85%; float: left; } #most-popular-posts ul#topten li .popular-bg {width: 28px; height: 28px; float: right; background: url('//d34wpjv4rf3nwa.cloudfront.net/www1/wp-content/uploads/2013/04/most-popular-number-sprite.png') no-repeat; position: absolute; right: 0; margin-top: -15px; top: 52%;} #most-popular-posts ul#topten .popular-1 .popular-bg {background-position: 0px 3px;} #most-popular-posts ul#topten .popular-2 .popular-bg {background-position: 0px -24px;} #most-popular-posts ul#topten .popular-3 .popular-bg {background-position: 0px -51px;} #most-popular-posts ul#topten .popular-4 .popular-bg {background-position: 0px -78px;} #most-popular-posts ul#topten .popular-5 .popular-bg {background-position: 0px -105px;} #most-popular-posts ul#topten .popular-6 .popular-bg {background-position: 0px -132px;} #most-popular-posts ul#topten .popular-7 .popular-bg {background-position: 0px -160px;} #most-popular-posts ul#topten .popular-8 .popular-bg {background-position: 0px -187px;} #most-popular-posts ul#topten .popular-9 .popular-bg {background-position: 0px -213px;} #most-popular-posts ul#topten .popular-10 .popular-bg {background-position: -4px -240px;} /* ----------------------------------------------------------------------------------------------- Fancybox ----------------------------------------------------------------------------------------------- */ /* * FancyBox - jQuery Plugin * Simple and fancy lightbox alternative * * Examples and documentation at: http://fancybox.net * * Copyright (c) 2008 - 2010 Janis Skarnelis * * Version: 1.3.1 (05/03/2010) * Requires: jQuery v1.3+ * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ #fancybox-loading { position: fixed; top: 50%; left: 50%; height: 40px; width: 40px; margin-top: -20px; margin-left: -20px; cursor: pointer; overflow: hidden; z-index: 1104; display: none; } * html #fancybox-loading { position: absolute; margin-top: 0; } #fancybox-loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; } #fancybox-overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: #000; z-index: 1100; display: none; } * html #fancybox-overlay { position: absolute; width: 100%; } #fancybox-tmp { padding: 0; margin: 0; border: 0; overflow: auto; display: none; } #fancybox-wrap { position: absolute; top: 0; left: 0; margin: 0px; padding: 13px; z-index: 1101; display: none; background: rgba(0,0,0,.35); box-shadow: 0px 1px 1px 0 rgba(255,255,255,.2), 0px 1px 1px 0 rgba(0,0,0,.2) inset; } #fancybox-outer { position: relative; width: 100%; height: 100%; box-shadow: 0px 0px 2px 1px rgba(0,0,0,.8); } #fancybox-outer img { } #fancybox-inner { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: 0; outline: none; overflow: hidden; } #fancybox-hide-sel-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; } #fancybox-close { position: absolute; top: -20px; right: -20px; width: 40px; height: 40px; background-image: url('//www.surveygizmo.com/wp-content/themes/greyline/gui/fancybox-slice.png'); background-position: -19px -223px; cursor: pointer; z-index: 1103; display: none; } #fancybox_error { color: #444; font: normal 12px/20px Arial; padding: 7px; margin: 0; } #fancybox-content { height: auto; width: auto; padding: 0; margin: 0; } #fancybox-img { width: 100%; height: 100%; padding: 0; margin: 0; border: none; outline: none; line-height: 0; vertical-align: top; -ms-interpolation-mode: bicubic; } #fancybox-frame { position: relative; width: 100%; height: 100%; border: none; display: block; } #fancybox-frame #logo {display: none;} #fancybox-title { position: absolute; bottom: 0; left: 0; font-size: 12px; z-index: 1102; color: #3f3f3f; border: 1px solid #363636; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; margin-top: 10px; background-image: -moz-linear-gradient(top, #f4f4f4,#d8d8d8); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#d8d8d8)); background-color: #f4f4f4; } .fancybox-footer { padding: 20px 15px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; } .fancybox-footer .buttonish { position: relative; top:-10px; right:-5px;} .fancybox-footer .number { font-size: 16px; font-weight: bold;} #fancybox-left, #fancybox-right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; outline: none; background-image: url(gui/blank.gif); z-index: 1102; display: none; } #fancybox-left { left: 0px; } #fancybox-right { right: 0px; } #fancybox-left-ico, #fancybox-right-ico { position: absolute; top: 50%; left: -9999px; width: 78px; height: 103px; margin-top: -57px; cursor: pointer; z-index: 1102; display: block; } #fancybox-left-ico { background-image: url('//www.surveygizmo.com/wp-content/themes/greyline/gui/fancybox-slice.png'); background-position: 0px -103px; } #fancybox-right-ico { background-image: url('//www.surveygizmo.com/wp-content/themes/greyline/gui/fancybox-slice.png'); background-position: 0px 0px; } #fancybox-left:hover, #fancybox-right:hover { visibility: visible; /* IE6 */ } #fancybox-left:hover span { left: 0px; } #fancybox-right:hover span { left: auto; right: 0px; } .fancy-bg { position: absolute; padding: 0; margin: 0; border: 0; width: 20px; height: 20px; z-index: 1001; } /* End FancyBox */ /* == WORDPRESS STUFF == */ /* WP edit */ .admin-link-box { display: inline-block; text-align: center; color: white; position: fixed; left: 0; top: 49%; font-size: 11px; font-family: Verdana; z-index: 10000; } .admin-link-box a { border-radius: 0px 15px 15px 0px; background: rgba(0,0,0,.15); color: #fff; padding: 4px 10px 4px 4px; display: inline-block; box-shadow: 0px 0px 0px rgba(0,0,0,0); transition: all .2s ease-out; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; } .admin-link-box a:hover { color: #BAECFF; background: rgba(0,0,0,.7); padding: 4px 10px 4px 20px; text-shadow: 0px 0px 1px #05BCFF; box-shadow: 0px 0px 6px #009ad3, 0px 0px 1px #05BCFF; } /* Dev. whows which mediaquery is active. */ .dev-width::after { content: 'style.css'; display: inline-block; text-align: center; position: fixed; right: 0; top: 49%; font-size: 11px; font-family: Verdana; z-index: 10000; line-height: 1.666667em; border-radius: 15px 0px 0px 15px; background: rgba(0,0,0,.4); color: #fff; padding: 4px 4px 4px 10px; } /* -------BROWSER FIXES----------- */ /* fallback for icons in IE */ .old-ie .callout-icons .iconb {font-size: 1px;text-indent: -1000px;overflow: hidden;} .old-ie #callout-block .callout-icons {margin: 0 0 10px 0;} .old-ie #callout-block .callout-icons li { background-image: url(gui/icon-fallback.png);background-repeat: no-repeat;} .old-ie #callout-block .callout-icons .icon1 {background-position: 43px -100px;} .old-ie #callout-block .callout-icons .icon2 {background-position: -71px -100px;} .old-ie #callout-block .callout-icons .icon3 {background-position: -185px -100px;} .old-ie #callout-block .callout-icons .icon4 {background-position: -300px -100px;} .old-ie #callout-block .callout-icons .icon1:hover, .old-ie #callout-block .callout-icons .active.icon1 {background-position: 43px 0px;} .old-ie #callout-block .callout-icons .icon2:hover, .old-ie #callout-block .callout-icons .active.icon2 {background-position: -71px 0px;} .old-ie #callout-block .callout-icons .icon3:hover, .old-ie #callout-block .callout-icons .active.icon3 {background-position: -185px 0px;} .old-ie #callout-block .callout-icons .icon4:hover, .old-ie #callout-block .callout-icons .active.icon4 {background-position: -300px 0px;} /* also ie9? */ .ie9 .callout-icons .iconb {font-size: 1px;text-indent: -1000px;overflow: hidden;} .ie9 #callout-block .callout-icons {margin: 0 0 10px 0;} .ie9 #callout-block .callout-icons li { background-image: url(gui/icon-fallback.png);background-repeat: no-repeat;} .ie9 #callout-block .callout-icons .icon1 {background-position: 43px -100px;} .ie9 #callout-block .callout-icons .icon2 {background-position: -71px -100px;} .ie9 #callout-block .callout-icons .icon3 {background-position: -185px -100px;} .ie9 #callout-block .callout-icons .icon4 {background-position: -300px -100px;} .ie9 #callout-block .callout-icons .icon1:hover, .ie9 #callout-block .callout-icons .active.icon1 {background-position: 43px 0px;} .ie9 #callout-block .callout-icons .icon2:hover, .ie9 #callout-block .callout-icons .active.icon2 {background-position: -71px 0px;} .ie9 #callout-block .callout-icons .icon3:hover, .ie9 #callout-block .callout-icons .active.icon3 {background-position: -185px 0px;} .ie9 #callout-block .callout-icons .icon4:hover, .ie9 #callout-block .callout-icons .active.icon4 {background-position: -300px 0px;} /* Misc homepage IE fixes */ .ie7 .callout-icons .nub, .ie6 .callout-icons .nub {display: none;} /* dink on 4-panel thing doesn't work. killing it in