API tools faq
paste
Advertisement
RyanEarnshaw

Untitled

RyanEarnshaw
Feb 28th, 2017
104
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.62 KB | None | 0 0
raw download clone embed print report
  1. .bodycontainer {
  2. position: relative;
  3. display: inline-block;
  4. margin-top: 140px; /* size of header */
  5. margin-left: 20%; /* size of side-nav */
  6. padding-bottom: 200px;
  7. background-color: #ffffff;
  8. float: left;
  9. width: 80%;
  10. }
  11. .headerimage {
  12. position: absolute;
  13. display: inline-block;
  14. width: 100%;
  15. height: 220px;
  16. top: 0;
  17. left: 0;
  18. }
  19. .headerimage img {
  20. width: 100%;
  21. height: 100%;
  22. }
  23. .innercont {
  24. position: relative;
  25. display: -webkit-flex;
  26. display: -webkit-box;
  27. display: -moz-flex;
  28. display: -ms-flex;
  29. display: flex;
  30. float: left;
  31. margin: 100px 10% 0 10%;
  32. width: 80%;
  33. }
  34.  
  35. .section {
  36. position: relative;
  37. display: inline-block;
  38. float: left;
  39. background-color: #ffffff;
  40. align-items: stretch;
  41. }
  42. .section.s1 { width: 90%; }
  43. .section.s2 { width: 10%; }
  44. .section.s1 {
  45. padding-left: 5vw;
  46. }
  47.  
  48.  
  49.  
  50.  
  51. .section .title {
  52. position: relative;
  53. display: inline-block;
  54. float: left;
  55. width: 100%;
  56. margin: 40px 0 0;
  57. }
  58. .section .title h1 {
  59. font-size: 24px;
  60. font-family: sans-serif;
  61. font-weight: 600;
  62. color: #363636;
  63. }
  64. .section .title h2 {
  65. margin: 10px 0;
  66. font-size: 14px;
  67. font-family: sans-serif;
  68. font-weight: 100;
  69. color: #828282;
  70. }
  71. .section .body {
  72. position: relative;
  73. display: inline-block;
  74. float: left;
  75. width: 100%;
  76. overflow: hidden;
  77. }
  78. .section .loadingbar {
  79. position: relative;
  80. display: inline-block;
  81. float: left;
  82. width: 100%;
  83. height: 20px;
  84. margin: 20px 0;
  85. background-color: #6c6c6c;
  86. border-radius:20px;
  87. }
  88. .section .loadingbar:after {
  89. content: '';
  90. position: absolute;
  91. display: inline-block;
  92. top: 0;
  93. left: 0;
  94. width: 0;
  95. height: 20px;
  96. background-color: #8ec640;
  97. border-radius:20px;
  98. transition: width 0.5s ease;
  99. }
  100. .section .loadingbar.step1:after { width: 33%; }
  101. .section .loadingbar.step2:after { width: 66%; }
  102. .section .loadingbar.step3:after { width: 100%; }
  103.  
  104. .section .body .form {
  105. position: relative;
  106. display: inline-block;
  107. width: 100%;
  108. height: 660px;
  109. transition: height 0.8s ease;
  110. }
  111. .section .body .form.page1-extended { height: 990px; }
  112. .section .body .form.page1-extended-1-open { height: 1200px; }
  113. .section .body .form.page3-extended { height: 880px; }
  114.  
  115. .section .body .page {
  116. position: absolute;
  117. display: inline-block;
  118. width: 100%;
  119. transition: left 0.5s ease;
  120. }
  121. .section .body .page.minus200 { top: 0; left: -200%; }
  122. .section .body .page.minus100 { top: 0; left: -100%; }
  123. .section .body .page.normal { top: 0; left: 0; }
  124. .section .body .page.plus100 { top: 0; left: 100%; }
  125. .section .body .page.plus200 { top: 0; left: 200%; }
  126.  
  127. .email-modal {
  128. position: fixed;
  129. display: inline-block;
  130. top: -100px;
  131. left: 50%;
  132. transform: translateX(-50%);
  133. width: 100%;
  134. max-width: 600px;
  135. padding: 10px 0 12px;
  136. box-sizing: border-box;
  137. z-index: 100;
  138. border-radius: 5px;
  139. animation: email_animation 5s 0.5s 1 normal forwards;
  140. }
  141. @keyframes email_animation {
  142. 0% { top: -100px; }
  143. 20% { top: 30px; }
  144. 80% { top: 30px; }
  145. 100% { top: -100px; }
  146. }
  147. .email-modal.email-successful { background-color: #8ec640; }
  148. .email-modal.email-unsuccessful { background-color: #e04040; }
  149. .email-modal h1 {
  150. position: relative;
  151. display: inline-block;
  152. width: 100%;
  153. color: #000000;
  154. font-family: sans-serif;
  155. font-weight: bolf;
  156. font-size: 12px;
  157. text-align: center;
  158. }
  159.  
  160. .section .body .form h1 {
  161. font-size: 14px;
  162. font-family: sans-serif;
  163. font-weight: 600;
  164. color: #848484;
  165. }
  166. .section .body .form h1 .star {
  167. font-family: monospace;
  168. font-size: 17px;
  169. color: #da2626;
  170. }
  171. .section .body .form input,
  172. .section .body .form select {
  173. color: #8ec640;
  174. font-size: 13px;
  175. border: none;
  176. padding: 13px 5px;
  177. margin: 3px 0;
  178. background-color: #dfdfdf;
  179. border-radius: 2px;
  180. font-family: arial;
  181. box-sizing: border-box;
  182. float: left;
  183. width: 100%;
  184. }
  185. .section .body .form .insubmit {
  186. font-size: 14px;
  187. float: left;
  188. padding: 15px 40px;
  189. font-family: 'Raleway';
  190. margin-top: 10px;
  191. border: 2px solid #8ec640;
  192. background-color: #8ec640;
  193. color: #ffffff;
  194. width: 100%;
  195. cursor: pointer;
  196. transition: all 0.2s ease;
  197. }
  198. .section .body .form .insubmit:hover {
  199. background-color: #ffffff;
  200. color: #8ec640;
  201. }
  202. .section .body .form input:focus,
  203. .section .body .form input:valid,
  204. .section .body textarea:focus,
  205. .section .body textarea:valid {
  206. box-shadow: none;
  207. outline: none;
  208. background-position: 0 0;
  209. }
  210. .section .body textarea {
  211. float: middle;
  212. display: inline-block;
  213. resize: none;
  214. background-color: #dfdfdf;
  215. color: #8ec640;
  216. width: 100%;
  217. height: 200px;
  218. font-family: arial;
  219. font-size: 13px;
  220. padding: 13px 5px;
  221. box-sizing: border-box;
  222. border: 0;
  223. }
  224. .section .body .form .option_area {
  225. position: relative;
  226. display: inline-block;
  227. width: 200px;
  228. font-family: sans-serif;
  229. font-size: 15px;
  230. text-align: left;
  231. color: #aea9b1;
  232. font-size: 13px;
  233. border: none;
  234. padding: 0px 5px;
  235. margin: 3px 0;
  236. background-color: #dfdfdf;
  237. border-radius: 2px;
  238. font-family: arial;
  239. box-sizing: border-box;
  240. float: left;
  241. width: 100%;
  242. }
  243. .section .body .form .option_area .opt {
  244. position: relative;
  245. display: inline-block;
  246. width: auto;
  247. margin: 0 5px;
  248. padding: 10px 0 10px 5px;
  249. color: #676767;
  250. }
  251. .section .body .form .question-splitter {
  252. position: relative;
  253. display: inline-block;
  254. height: 0px;
  255. width: 100%;
  256. margin: 15px 0;
  257. }
  258. .section .body .form .option_area input {
  259. position:relative;
  260. display: inline-block;
  261. font-size: 13px;
  262. padding: 0;
  263. margin: 0;
  264. width: auto;
  265. }
  266. /*tooltip*/
  267. [data-tip] {
  268. position:relative;
  269. }
  270. [data-tip]:before {
  271. content:'';
  272. /* hides the tooltip when not hovered */
  273. display:none;
  274. content:'';
  275. border-left: 5px solid transparent;
  276. border-right: 5px solid transparent;
  277. border-bottom: 5px solid #1a1a1a;
  278. position:absolute;
  279. top:30px;
  280. left:35px;
  281. z-index:8;
  282. font-size:0;
  283. line-height:0;
  284. width:0;
  285. height:0;
  286. }
  287. [data-tip]:after {
  288. display:none;
  289. content:attr(data-tip);
  290. position:absolute;
  291. top:35px;
  292. left:0px;
  293. padding:5px 8px;
  294. background:#1a1a1a;
  295. color:#fff;
  296. z-index:9;
  297. font-size: 0.75em;
  298. height:18px;
  299. line-height:18px;
  300. -webkit-border-radius: 3px;
  301. -moz-border-radius: 3px;
  302. border-radius: 3px;
  303. white-space:nowrap;
  304. word-wrap:normal;
  305. }
  306. [data-tip]:hover:before,
  307. [data-tip]:hover:after {
  308. display:block;
  309. }
  310. .section .body .form .hiddencontainer {
  311. position: relative;
  312. display: inline-block;
  313. width: 100%;
  314. }
  315. .section .body .form .hiddencontainer.hidden {
  316. display: none;
  317. }
  318.  
  319.  
  320. .section .body .pagebuttons {
  321. position: relative;
  322. display: inline-block;
  323. float: left;
  324. width: 100%;
  325. }
  326. .section .body .fbtn {
  327. position: relative;
  328. display: inline-block;
  329. padding: 10px 20px;
  330. background-color: #8ec640;
  331. color: #ffffff;
  332. font-size: 14px;
  333. font-weight: bold;
  334. font-family: sans-serif;
  335. cursor: pointer;
  336. }
  337. .section .body .fbtn.back { float: left; }
  338. .section .body .fbtn.next { float: right; }
  339.  
  340.  
  341.  
  342. /* ----------------------------------------------------*/
  343. /* Code That Doesnt Change Between Mobile Resolution */
  344. /* ----------------------------------------------------*/
  345. @media only screen and (min-width : 0px) and (max-width : 992px) {
  346. .innercont { margin: 0; width: 100%; }
  347. .section .title h1 { text-align: center; }
  348. .section .title h2 { text-align: center; }
  349. }
  350.  
  351.  
  352. /* ----------------------------------------------------*/
  353. /* Custom, iPhone Retina */
  354. /* ----------------------------------------------------*/
  355. @media only screen and (max-width : 320px) {
  356.  
  357. }
  358.  
  359.  
  360. /* ----------------------------------------------------*/
  361. /* Extra Small Devices, Phones */
  362. /* ----------------------------------------------------*/
  363. @media only screen and (min-width : 320px) and (max-width : 480px) {
  364. .section .body .form { height: 740px; }
  365. .section .body .form.page1-extended { height: 1200px; }
  366. .section .body .form.page1-extended-1-open { height: 1450px; }
  367. .section .body .form.page3-extended { height: 1000px; }
  368. }
  369.  
  370.  
  371. /* ----------------------------------------------------*/
  372. /* Small Devices, Tablets */
  373. /* ----------------------------------------------------*/
  374. @media only screen and (min-width : 480px) and (max-width : 768px) {
  375. .section .body .form { height: 740px; }
  376. .section .body .form.page1-extended { height: 1150px; }
  377. .section .body .form.page1-extended-1-open { height: 1350px; }
  378. .section .body .form.page3-extended { height: 950px; }
  379.  
  380. }
  381.  
  382.  
  383. /* ----------------------------------------------------*/
  384. /* Medium Devices, Desktops */
  385. /* ----------------------------------------------------*/
  386. @media only screen and (min-width : 768px) and (max-width : 992px) {
  387. .section .body .form { height: 680px; }
  388. .section .body .form.page1-extended { height: 1020px; }
  389. .section .body .form.page1-extended-1-open { height: 1230px; }
  390. .section .body .form.page3-extended { height: 880px; }
  391.  
  392. }
  393.  
  394.  
  395. /* ----------------------------------------------------*/
  396. /* Large Devices, Wide Screens */
  397. /* ----------------------------------------------------*/
  398. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  399. .section .body .form { height: 680px; }
  400. .section .body .form.page1-extended { height: 1020px; }
  401. .section .body .form.page1-extended-1-open { height: 1230px; }
  402. .section .body .form.page3-extended { height: 880px; }
  403.  
  404. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!