Advertisement
Guest User

Untitled

a guest
Feb 28th, 2015
203
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.45 KB | None | 0 0
  1. /* Softcase - Table of Contents
  2. ----------------------------------------------------
  3.  
  4. 1. Color-Skin Styles
  5. 2. Reset Styles
  6. 3. Layout and General Styles
  7. 4. Header Styles
  8. 5. Main Section Styles
  9. 6. Features Section Styles
  10. 7. Z-layout sections
  11. 8. Newsletter Section Styles
  12. 9. Footer Section Styles
  13. 10.Contact Form Styles
  14. 11. Responsive Styles
  15.  
  16.  
  17. /*----------------------------------------------------*/
  18. /* ------------- 1. Color/Skin Styles --------------- */
  19. /*----------------------------------------------------*/
  20.  
  21.  
  22.  
  23. /*----------------------------------------------------*/
  24. /* ---------------- 2. Reset Styles ----------------- */
  25. /*----------------------------------------------------*/
  26.  
  27. html, div, span, object, iframe,
  28. h1, body, h2, h3, h4, h5, h6, p, blockquote, pre,
  29. a, img, small, strong, ol, ul, li, form, label,
  30. table, caption, tr, td, footer, header {
  31. margin: 0;
  32. padding: 0;
  33. border: 0;
  34. font-size: 100%;
  35. font: inherit;
  36. vertical-align: baseline;
  37. }
  38. footer, header, menu, nav, section {
  39. display: block;
  40. }
  41.  
  42. /* Reset Body ans Fonts */
  43. body {
  44. line-height: 1;
  45. font-family: "Titillium Web", sans-serif;
  46. font-weight:400;
  47. }
  48. ol, ul {
  49. list-style: none;
  50. }
  51.  
  52. /* Reset a Tags */
  53. a { color:#efefef; text-decoration:none; }
  54. a:focus { outline:0; text-decoration:none; }
  55. a:hover { color:#fff; text-decoration:none; }
  56. p, a { font-family: 'Lato', sans-serif; }
  57.  
  58. /* Reset input Tags */
  59. input { border:0; font-family: 'Lato', sans-serif; sans-serif; color:#a3a3a3; font-style:italic; }
  60. input:focus { border:0; outline:0; }
  61. input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus { color: #a3a3a3;border-color:#cccccc;box-shadow: 0px 0px 0px ; }
  62. input:focus:valid:focus, textarea:focus:valid:focus, select:focus:valid:focus { color: #a3a3a3;border-color:#cccccc;box-shadow: 0px 0px 0px; }
  63.  
  64. /* Reset input Tags */
  65. ::-moz-selection { background: #191919; color: #fff; text-shadow: none; }
  66. ::selection { background: #191919; color: #fff; text-shadow: none; }
  67.  
  68.  
  69. /*----------------------------------------------------*/
  70. /* ----------- 3. Layout and General Styles --------- */
  71. /*----------------------------------------------------*/
  72.  
  73. .background { position:fixed; width:100%; height:100%; top:0; display:block; z-index:-170; }
  74. .wrapper { width:940px; margin:0 auto; }
  75. .clear { clear:both; }
  76. .pattern { position:fixed; width:100%; background:url(https://sites.google.com/site/landingv6/v6/pattern.png) repeat; top:0; display:block; height:100%; z-index:-180;}
  77.  
  78. /*----------------------------------------------------*/
  79. /* ----------- 4. Header Section Styles ------------ */
  80. /*----------------------------------------------------*/
  81.  
  82. header { height:80px; background-color:rgba(255,255,255,0.04); display:block; box-shadow:0px 1px 0px rgba(0,0,0,0.2),0px -1px 0px rgba(255,255,255,0.05) inset; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#1cffffff', endColorstr='#1cffffff'); }
  83. .logo { padding:28px 0 0; width:140px; float:left; }
  84.  
  85. .navi { float:right; color:#5d6065; font-size:15px; margin:22px 0 0; }
  86. .navi li { float:left; margin:12px 30px 0 0; text-shadow:1px 1px 2px rgba(0,0,0,0.3) ; }
  87. .navi li a { color:#fff; opacity:0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
  88. .navi li a:hover, li.active a {opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";}
  89. a.contact { padding:0 0 0 23px; background:url(https://sites.google.com/site/landingv6/v6/contact.png) no-repeat 0 4px; }
  90.  
  91. /*----------------------------------------------------*/
  92. /* ----------- 5. Main section Styles -------------- */
  93. /*----------------------------------------------------*/
  94.  
  95. h1 { text-transform:uppercase; font-size:48px; color:#fff; text-align:center; font-weight:200; padding:90px 0 0; text-shadow:1px 1px 2px rgba(0,0,0,0.2); }
  96. .titles p { color:#fff; opacity:0.4; font-size:22px; text-align:center; padding:20px 0 0; text-shadow:1px 1px 1px rgba(0,0,0,0.2); }
  97.  
  98. .buttons { width:340px; float:left; margin:60px 40px 0; }
  99. .bt1, .bt2 { float:left; border-radius:4px; font-size:18px; text-align:center; padding:14px 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) , 0 -1px 1px rgba(0, 0, 0, 0.2) inset, 0 1px 3px rgba(0, 0, 0, 0.1);}
  100. .bt1 { width:160px; height:22px; margin:0 20px 0 0; background-color:rgba(0,0,0,0.4); display:block; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5c000000', endColorstr='#5c000000'); }
  101. .bt2 { width:160px; height:22px; display:block; text-shadow:1px 1px 1px rgba(0,0,0,0.2); }
  102.  
  103. .divi { height:2px; background:url(https://sites.google.com/site/landingv6/v6/divi.png) repeat-x; width:260px; display:block; float:left; margin:80px 0 0; }
  104.  
  105. .slider { margin:60px auto 0px; height:300px; width:485px; }
  106. .slider img { height:300px; width:920px; background-color:none; }
  107.  
  108. #nav { width:140px; margin:0 auto; }
  109. #nav a { overflow:hidden; display: block; overflow: hidden; border-radius:40px; padding: 6px; float:left; height:1px; width:1px; background-color:#dbdcde; margin:14px 0 0 16px; }
  110. #nav a.activeSlide { padding:8px; margin:12px 0 0 16px; }
  111. .pagi { background-color:#ffffff; height:40px; box-shadow: 0px -1px 0px rgba(255,255,255,0.6) inset; }
  112.  
  113.  
  114. /*----------------------------------------------------*/
  115. /* ----------- 6. Features Section ----------------- */
  116. /*----------------------------------------------------*/
  117.  
  118. .features { background-color:#fafbfc; height:550px; box-shadow: 0px 1px 4px rgba(0,0,0,0.06) inset, 0px -1px 4px rgba(0,0,0,0.06) inset; }
  119. .icon { width:128px; height:128px; margin:0 auto; display:block; }
  120. .ft1 { opacity:0.4; position:absolute; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; }
  121. .featu { padding:45px 10px; display:block; }
  122. .featu-wrap:first-child { margin:0px 30px 0 0; display:block; padding:20px 20px; }
  123. .featu-wrap { margin:0px 30px; display:block; padding:20px 20px; }
  124. .featu:hover { cursor:pointer; }
  125. .featu h3 { padding:9px 0; color:#565f6a; font-family: "Titillium Web", sans-serif; margin-top:25px ; border: 1px solid #efefef; border-left:none; border-right:none; font-size:34px; text-transform:none; text-align:center; text-shadow:1px 2px 1px rgba(255,255,255,0.4); }
  126. .featu p { text-align:center; color:#a8aaab; margin-top:20px ; font-size:14px; text-transform:none; line-height:1.8em; color:#5a5a5a; opacity:0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
  127. .plus { background-color:#eaeaea; height:1px; width:100%; margin:28px 0 0; }
  128. .plus p { line-height:1; background-color:#dbdcde; padding:1px; width:20px; height:20px; font-weight:600; float:right; margin:0; font-size:20px; color:#fff;}
  129.  
  130.  
  131. /*----------------------------------------------------*/
  132. /* ----------- 7. Z-layout Sections ----------- */
  133. /*----------------------------------------------------*/
  134.  
  135. .z1 { height:440px; display:block; background-color:#fff; padding:60px 0 0; }
  136. .image-left {float:left; width:50%;}
  137. .text-right {float:right; width:50%;}
  138. .text-right h2 { color:#1d2d41; font-size:30px; margin:30px 0 30px; }
  139. .text-right p { color:#565f6a; font-size:16px; line-height:1.8em; margin:0 0 45px; }
  140. .text-right p.subtitles { font-weight:300; font-size:20px; margin:0 0 30px; }
  141. .bts2 { text-align:center; border-radius:4px; font-size:16px; padding:10px 0; width:120px; height:18px; display:block; text-shadow:1px 1px 1px rgba(0,0,0,0.2); }
  142.  
  143.  
  144. .z2 { height:410px; display:block; padding:60px 0 0; }
  145. .image-right {float:right; width:50%; height: 264px;}
  146. .text-left {float:left; width:50%;}
  147. .text-left h2 { color:#fefeff; font-size:30px; margin:30px 0 30px; }
  148. .text-left p { color:#fefeff; font-size:16px; line-height:1.8em; margin:0 0 45px; }
  149. .text-left p.subtitles { font-weight:300; font-size:20px; margin:0 0 30px; }
  150. .bts2 { text-align:center; border-radius:4px; font-size:16px; padding:10px 0; width:120px; height:18px; display:block; text-shadow:1px 1px 1px rgba(0,0,0,0.2); }
  151.  
  152.  
  153.  
  154. .z3 { height:380px; display:block; background-color:#fff; padding:40px 0 0; }
  155.  
  156. /*----------------------------------------------------*/
  157. /* ----------- 8. NEWSLETTER Section ----------- */
  158. /*----------------------------------------------------*/
  159.  
  160. .newsletter { height:340px; display:block; text-align:center; }
  161. .newsletter h3 { padding:65px 0 0; font-size:32px; color:#fefeff; }
  162. .newsletter p { padding:30px 0 0; font-size:20px; color:#fff; font-weight:300; opacity:0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; }
  163.  
  164. .newsletter-form { padding:60px 20px; margin:0 auto; width:400px; }
  165. input.email-newsletter { color:#a3a3a3; width:280px ; padding-left:14px;float:left; height:30px; border-radius: 6px 0px 0px 6px; box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.8); }
  166. input.email-newsletter:focus { color:#adadad; outline:0; box-shadow: 0px 0px 0px rgba(255, 255, 255, 0.8); border:1px solid #cccccc; border-color:#cccccc; }
  167. input.button-newsletter { color:#efefef; float:left; height:40px; border-radius: 0px 6px 6px 0px; width:90px; }
  168.  
  169. /*----------------------------------------------------*/
  170. /* ----------- 9. FOOTER SECTION ----------- */
  171. /*----------------------------------------------------*/
  172.  
  173. footer { height:70px; display:block; background-color:#fff; }
  174.  
  175. .copy { float:left; }
  176. .copy p { color:#adadad; padding:25px 0 0; }
  177. .copy p span { font-weight:600; color:#7d7d7d; }
  178.  
  179. .social { float:right; padding:15px 0 0; }
  180. .social li { float:left; }
  181. li.twitter { margin:0 0 0 8px;}
  182. li.facebook a { background:url(https://sites.google.com/site/landingv6/v6/facebook.png) no-repeat; width:40px; height:40px; display:block; background-position:0 0; }
  183. li.facebook a:hover { background-position:0 100%; }
  184.  
  185. li.twitter a { background:url(https://sites.google.com/site/landingv6/v6/twitter.png) no-repeat; width:40px; height:40px; display:block; background-position:0 0; }
  186. li.twitter a:hover { background-position:0 100%; }
  187.  
  188. /*----------------------------------------------------*/
  189. /* ----------------- 10. CONTACT FORM --- ----------- */
  190. /*----------------------------------------------------*/
  191.  
  192. #popi-bg { opacity: 0.7; display:none;}
  193. .wrap h1 { font-family: 'Lato', sans-serif;font-size:30px;height: 20px;font-weight:400;margin: 10px 0 40px 0px;text-align: center;padding:0px; color:#303030; }
  194. .form-contact{ font-family: 'Lato', sans-serif; margin:20px 5px; width:300px; }
  195. .wrap { z-index:800; margin: auto;padding-bottom:20px;}
  196. form {padding: 0;margin: 0 0 20px;}
  197. table {margin: 0 auto;}
  198. tr, td, input, textarea { margin: 0; padding: 0;}
  199. td { padding: 0 0 5px;}
  200. tr td:first-child { padding-right: 18px;padding-top: 11px;text-align: right;vertical-align: top;color:#afafaf;}
  201. .error[generated=true] {
  202. color: #dc0000;
  203. font-size: 16px;
  204. padding: 5px 0 2px 5px;
  205. }
  206. tr.error td { padding: 0;}
  207. .wrap input, textarea {
  208. background: #FFF;
  209. font: inherit;
  210. font-size: 16px;
  211. line-height: 29px;
  212. border:1px solid #909090;
  213. padding: 5px 10px;
  214. border-radius:none;
  215. }
  216. input:focus, textarea:focus {border-color: #303030; outline: none;}
  217. textarea { height: 160px; resize: vertical;}
  218. .wrap input[type=submit] { float:right; color:#fff; font-size:12px; border:none; margin:20px auto; height:28px; display:block; }
  219. .wrap input[type=submit]:hover { background-position:0 100%; }
  220. .wrap p { font-size: 14px; color:#191919; margin:8px 0 0; }
  221. .name { width:18px; height:18px; background: url("https://sites.google.com/site/landingv6/v6/contact-icon.png") no-repeat ; background-position:0 0; display:block; float:left;}
  222. .email { width:18px; height:18px; background: url("https://sites.google.com/site/landingv6/v6/contact-icon.png") no-repeat ; background-position:0 -18px; display:block; float:left;}
  223. .message { width:18px; height:18px; background: url("https://sites.google.com/site/landingv6/v6/contact-icon.png") no-repeat ; background-position:0 -36px; display:block; float:left;}
  224. #popi-bg {
  225. background: url("https://sites.google.com/site/landingv6/v6/bg-checker.png") repeat scroll 0 0 transparent;
  226. border: 1px solid #CECECE;
  227. display: none;
  228. height: 100%;
  229. left: 0;
  230. position: fixed;
  231. top: 0;
  232. width: 100%;
  233. z-index: 700;
  234. opacity: 1;
  235. }
  236. #overlay_form{
  237. display:none;
  238. border-radius: 6px 6px 6px 6px;
  239. position: absolute;
  240. border: 1px solid gray;
  241. padding: 10px;
  242. background: #efefef;
  243. width: 300px;
  244. height: 400px;
  245. background-color:#efefef;
  246. box-shadow:1px 0px 4px #191919;
  247. }
  248. #close2{ background: url("https://sites.google.com/site/landingv6/v6/close-contact.png") no-repeat scroll 0 0 transparent;
  249. display: block;
  250. float: right;
  251. height: 30px;
  252. margin: 10px 0 0;
  253. width: 30px; }
  254. input.submit { background:#303030; color:#fff; line-height:15px; }
  255.  
  256.  
  257. /*----------------------------------------------------*/
  258. /* ----------------- 11. RESPONSIVE --- ----------- */
  259. /*----------------------------------------------------*/
  260.  
  261. @media(min-width: 768px) and (max-width: 979px) {
  262. .wrapper { width:730px; margin:0 auto; }
  263. .divi { width:150px; }
  264. .slider { height:260px; width:100%; }
  265. .slider img { width:100%; height:100%; }
  266. .featu h3 { font-size:28px; }
  267. .features { height:620px; }
  268. .z1 { height:400px; }
  269. .z2 { height:370px; }
  270. .z3 { height:310px; }
  271. .text-right h2 { font-size:24px; margin:10px 0 30px; }
  272. .text-left h2 { font-size:24px; margin:10px 0 30px ;}
  273. .text-right p { font-size:14px; }
  274. .text-right p.subtitles { font-size:16px; }
  275. .text-left p.subtitles { font-size:16px; }
  276. .image-left {float:left; width:50%;}
  277. .text-right {float:right; width:45%;}
  278. }
  279.  
  280. @media(min-width: 480px) and (max-width: 767px) {
  281. .wrapper { width:480px; margin:0 auto; }
  282. .divi { width:20px; }
  283. h1 { font-size:34px; }
  284. .slider { height:200px; width:100%; }
  285. .slider img { width:480px; height:100%; }
  286. .z1 { height:400px; }
  287. .z2 { height:420px; }
  288. .z3 { height:290px; }
  289. .features { height:1420px;}
  290. .text-right h2 { font-size:17px; margin:10px 0 10px; }
  291. .text-left h2 { font-size:17px; margin:10px 0 10px; }
  292. .text-right p { font-size:12px; }
  293. .text-right p.subtitles { font-size:14px; }
  294. .text-left p.subtitles { font-size:14px; }
  295. .image-left {float:left; width:50%; margin:50px 0 0;}
  296. .text-right {float:right; width:42%;}
  297. .image-right {float:right; width:50%; margin:50px 0 0;}
  298. .text-left {float:left; width:42%;}
  299. .newsletter p { font-size:18px; }
  300. }
  301.  
  302. @media(max-width:480px) {
  303. .wrapper { width:290px; margin:0 auto; }
  304. .divi { display:none; }
  305. .logo { width:103px; }
  306. .navi { float:right; color:#5d6065; font-size:11px; margin:22px 0 0; }
  307. .navi li { margin:12px 7px 0; }
  308. h1 { font-size:28px; line-height:45px; padding:50px 0 0;}
  309. .titles p { display:none; }
  310. .buttons { float:none; width:260px; margin:20px auto 0; }
  311. .bt1, .bt2 { width:120px; }
  312. .slider { height:140px; width:100%; }
  313. .slider img { width:290px; height:100%; }
  314. .features { height:1600px;}
  315. .image-left {float:left; width:100%; margin:50px 0 0;}
  316. .text-right {float:right; width:100%;}
  317. .image-right {float:right; width:100%; margin:50px 0 0;}
  318. .text-left {float:left; width:100%;}
  319. .z3 .image-left { float:left; width:100%; }
  320. .z3 .text-right { float:right; width:100%; }
  321. .z1 { height:800px; }
  322. .z2 { height:800px; }
  323. .z3 { height:720px; }
  324. .newsletter-form { width:240px; }
  325. input.email-newsletter { width:110px ; }
  326. input.button-newsletter { width:90px; }
  327. .copy { display:none; }
  328. .social { float:none; width:96px; padding:15px 0 0; margin:0 auto; }
  329. .background { background-size:100% 100%; }
  330. a.contact { height:13px; display:block; background:url(https://sites.google.com/site/landingv6/v6/contact.png) no-repeat 0 1px; }
  331. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement