RyanEarnshaw

Untitled

Feb 23rd, 2017
87
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.27 KB | None | 0 0
  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 .body {
  65. position: relative;
  66. display: inline-block;
  67. float: left;
  68. width: 100%;
  69. overflow: hidden;
  70. }
  71. .section .loadingbar {
  72. position: relative;
  73. display: inline-block;
  74. float: left;
  75. width: 100%;
  76. height: 20px;
  77. margin: 20px 0;
  78. background-color: #6c6c6c;
  79. border-radius:20px;
  80. }
  81. .section .loadingbar:after {
  82. content: '';
  83. position: absolute;
  84. display: inline-block;
  85. top: 0;
  86. left: 0;
  87. width: 0;
  88. height: 20px;
  89. background-color: #8ec640;
  90. border-radius:20px;
  91. transition: width 0.5s ease;
  92. }
  93. .section .loadingbar.step1:after { width: 33%; }
  94. .section .loadingbar.step2:after { width: 66%; }
  95. .section .loadingbar.step3:after { width: 100%; }
  96.  
  97. .section .body .form {
  98. position: relative;
  99. display: inline-block;
  100. height: 400px;
  101. width: 100%;
  102. }
  103. .section .body .page {
  104. position: absolute;
  105. display: inline-block;
  106. width: 100%;
  107. transition: left 0.5s ease;
  108. }
  109. .section .body .page.minus200 { top: 0; left: -200%; }
  110. .section .body .page.minus100 { top: 0; left: -100%; }
  111. .section .body .page.normal { top: 0; left: 0; }
  112. .section .body .page.plus100 { top: 0; left: 100%; }
  113. .section .body .page.plus200 { top: 0; left: 200%; }
  114.  
  115.  
  116. .section .body .form h1 {
  117. font-size: 14px;
  118. font-family: sans-serif;
  119. font-weight: 600;
  120. color: #363636;
  121. }
  122. .section .body .form input {
  123. color: #8ec640;
  124. font-size: 13px;
  125. border: none;
  126. padding: 13px 5px;
  127. margin: 3px 0;
  128. background-color: #dfdfdf;
  129. border-radius: 2px;
  130. font-family: arial;
  131. box-sizing: border-box;
  132. float: left;
  133. width: 100%;
  134. }
  135. .section .body .form input:focus,
  136. .section .body .form input:valid,
  137. .section .body textarea:focus,
  138. .section .body textarea:valid {
  139. box-shadow: none;
  140. outline: none;
  141. background-position: 0 0;
  142. }
  143. .section .body textarea {
  144. float: middle;
  145. display: inline-block;
  146. resize: none;
  147. background-color: #dfdfdf;
  148. color: #8ec640;
  149. width: 100%;
  150. height: 200px;
  151. font-family: arial;
  152. font-size: 13px;
  153. padding: 13px 5px;
  154. box-sizing: border-box;
  155. border: 0;
  156. }
  157. .section .body .form .option_area {
  158. position: relative;
  159. display: inline-block;
  160. width: 200px;
  161. font-family: sans-serif;
  162. font-size: 15px;
  163. text-align: left;
  164. color: #aea9b1;
  165. font-size: 13px;
  166. border: none;
  167. padding: 0px 5px;
  168. margin: 3px 0;
  169. background-color: #dfdfdf;
  170. border-radius: 2px;
  171. font-family: arial;
  172. box-sizing: border-box;
  173. float: left;
  174. width: 100%;
  175. }
  176. .section .body .form .option_area .opt {
  177. position: relative;
  178. display: inline-block;
  179. width: 50px;
  180. padding: 10px 0 10px 5px;
  181. }
  182. .section .body .form .option_area input {
  183. position:relative;
  184. display: inline-block;
  185. font-size: 13px;
  186. padding: 0;
  187. margin: 0;
  188. width: auto;
  189. }
  190.  
  191.  
  192.  
  193.  
  194. .section .body .pagebuttons {
  195. position: relative;
  196. display: inline-block;
  197. float: left;
  198. width: 100%;
  199. }
  200. .section .body .fbtn {
  201. position: relative;
  202. display: inline-block;
  203. padding: 10px 20px;
  204. background-color: #8ec640;
  205. color: #ffffff;
  206. font-size: 14px;
  207. font-weight: bold;
  208. font-family: sans-serif;
  209. cursor: pointer;
  210. }
  211. .section .body .fbtn.back { float: left; }
  212. .section .body .fbtn.next { float: right; }
Advertisement
Add Comment
Please, Sign In to add comment