Templatemo style css

SUBMITTED BY: Guest

DATE: Dec. 16, 2013, 9:39 a.m.

FORMAT: CSS

SIZE: 8.9 kB

Raw Download

HITS: 23308

Report
  1. /* Credit: http://www.templatemo.com */
  3. body{
  4. margin: 0;
  5. padding: 0;
  6. color: #e2e2e2;
  7. font-size: 12px;
  8. line-height: 1.6em;
  9. font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  10. background-color: #313030;
  11. background-image: url(images/templatemo_body.jpg);
  12. background-position: center top;
  13. background-repeat: no-repeat
  14. }
  16. a, a:link, a:visited { color: #FFFFFF; font-weight: normal; text-decoration: none }
  18. ul, li {
  19. padding:0;
  20. margin:0;
  21. list-style:none;
  22. }
  24. h1, h2, h3, h4, h5, h6 { color: #fff; font-weight: normal; }
  25. h1 { font-size: 36px; margin: 0 0 30px; padding: 5px 0 }
  26. h2 { font-size: 24px; margin: 0 0 25px; padding: 5px 0 }
  27. h3 { font-size: 20px; margin: 0 0 20px; padding: 0; }
  28. h4 { font-size: 16px; margin: 0 0 15px; padding: 0; }
  29. h5 { font-size: 14px; margin: 0 0 10px; padding: 0; }
  30. h6 { font-size: 12px; margin: 0 0 5px; padding: 0; font-weight: 700 }
  32. p { padding: 0; margin: 0 0 15px 0 }
  34. p a, p a:link, p a:visited { color: #00CCFF; font-weight: normal; text-decoration: none }
  35. p a:hover { color: #CC66FF; text-decoration: none; }
  37. .clear{ clear:left; }
  39. blockquote.testimonial_block { margin: 40px; background: url(images/icon_testimonial.png) left center no-repeat; padding-left: 120px }
  40. cite { font-weight: bold; color:#fff; }
  41. cite a, cite a:link, cite a:visited { font-size: 12px; text-decoration: none; font-style: normal }
  42. cite span { font-weight: 400; color: #ccc; }
  44. .list_bullet { margin: 10px 0 10px 15px; padding: 0; list-style: none }
  45. .list_bullet li { color:#fff; margin: 0 0 7px 0; padding: 0 0 0 20px; background: url(images/templatemo_list.png) no-repeat scroll 0 6px }
  46. .list_bullet li a { color: #fff; font-weight: normal; text-decoration: none }
  47. .list_bullet li a:hover { color: #fff }
  49. .no_bullet { margin: 0; padding: 0; list-style: none }
  50. .no_bullet li { margin: 0 0 20px 0; padding: 0 }
  51. a.header { display: block; font-weight: 700 }
  53. .half { width: 330px }
  55. .h20 { height: 20px }
  56. .h40 { height: 40px }
  58. img { margin: 0; padding: 0; border: none }
  59. .img_border { background: #525252; padding: 4px; border: 1px solid #282828 }
  60. .img_nom { display: block; margin-bottom: 15px }
  61. .img_fl { float: left; margin: 3px 15px 5px 0 }
  62. .img_fr { float: left; margin: 3px 0 5px 15px }
  64. .left { float: left }
  65. .right { float: right }
  67. #templatemo_header_wrapper {
  68. width: 100%;
  69. background: url(images/templatemo_header.png) center bottom no-repeat
  70. }
  72. #templatemo_header {
  73. width: 800px;
  74. margin: 0 auto;
  75. padding: 35px 20px 40px;
  76. background: url(images/templatemo-header-bg.png) no-repeat center;
  77. position:relative;
  78. }
  79. .templatemo_header_bg {
  80. position:absolute;
  81. right:157px;
  82. top:14px;
  83. cursor:default;
  84. }
  85. #templatemo_main_wrapper {
  86. width: 800px;
  87. height: 480px;
  88. margin: 0 auto;
  89. padding: 9px;
  90. background: url(images/templatemo_content_bg.png) no-repeat
  91. }
  93. #templatemo_main {
  94. width: 800px;
  95. height: 480px;
  96. overflow: hidden;
  97. }
  99. #templatemo_footer_wrapper {
  100. width: 100%;
  101. background: url(images/templatemo_footer.png) center top no-repeat
  102. }
  104. #templatemo_footer {
  105. width: 780px;
  106. margin: 0 auto;
  107. padding: 20px 20px;
  108. color: #999999;
  109. text-align: center;
  110. }
  112. #templatemo_footer a {
  113. color: #999999;
  114. }
  116. #site_title { display: block; width: 300px; margin: 0 auto; text-align: center }
  117. #site_title a { font-size: 28px; color: #fff; font-weight: 700 }
  119. #content{
  120. overflow:hidden;
  121. width: 7000px;
  122. position:relative;
  123. height: 480px;
  124. background: #3c3b3b;
  125. }
  127. .section {
  128. position:relative;
  129. float:left;
  130. width: 800px;
  131. height: 480px;
  132. margin-right: 20px;
  133. background: #3c3b3b;
  134. }
  136. .section_with_padding {
  137. padding:40px;
  138. width: 720px;
  139. height: 400px;
  140. }
  142. .section a.home_btn {
  143. position: absolute;
  144. top: 20px;
  145. right: -1px;
  146. width: 52px;
  147. height: 45px;
  148. display: block;
  149. background: url(images/home_btn.png);
  150. text-indent: -10000px
  151. }
  153. .section a.page_nav_btn { position: absolute; display: block; width: 77px; height: 27px; line-height: 27px; font-weight: 700; bottom: 20px; text-align: center }
  155. .section a.previous { left: 0; background: url(images/previous_btn.png) left center no-repeat }
  157. .section a.next { right: 0; background: url(images/next_btn.png) right center no-repeat }
  159. .home_box { width: 400px; height: 480px; }
  161. .row1 { width: 400px; height: 120px }
  162. .row2 { width: 400px; height: 240px }
  164. .box1 { background: #9168b3 url(images/templatemo_01.png) scroll 20px 25px no-repeat }
  165. .box1:hover { background-color: #7c549d }
  167. .box2 { background: #a8b368 url(images/templatemo_02.png) scroll 20px 25px no-repeat }
  168. .box2:hover { background-color: #909b51 }
  170. .box3 { background: #b36c68 url(images/templatemo_03.png) scroll 20px 25px no-repeat }
  171. .box3:hover { background-color: #9d5652 }
  173. .box4 { background: #636363 url(images/templatemo_04.png) scroll 20px 25px no-repeat }
  174. .box4:hover { background-color: #4b4b4b }
  176. .box5 { background: #413959 url(images/twitter.png) scroll 18px 15px no-repeat }
  177. .box5:hover { background-color: #302945 }
  179. .box6 { background: #3c3b3b }
  181. .home_box .box_with_padding { padding: 25px 15px 15px 140px }
  183. #content .home_box h2 { color: #fff; font-size: 28px; margin-bottom: 10px }
  185. #home_gallery {
  186. position: relative;
  187. }
  189. #mini_contact_form { padding: 15px; width: 370px }
  191. #mini_contact_form .input_field {
  192. display: block;
  193. margin-left: 5px;
  194. float: left;
  195. width: 78px;
  196. padding: 2px;
  197. height: 18px;
  198. font-size: 11px;
  199. font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  200. color: #999999;
  201. border: 1px solid #525252;
  202. background: #292929;
  203. margin-bottom: 5px;
  204. }
  206. #mini_contact_form textarea {
  207. clear: both;
  208. width: 160px;
  209. height: 50px;
  210. padding: 2px;
  211. font-size: 11px;
  212. font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  213. color: #999999;
  214. border: 1px solid #525252;
  215. background: #292929;
  216. margin-bottom: 10px;
  217. }
  219. #mini_contact_form .submit_btn {
  220. display: block;
  221. float: right;
  222. font-size: 11px;
  223. font-weight: bold;
  224. background: #15171d;
  225. color: #999999;
  226. cursor: pointer;
  227. border: 1px solid #30333c;
  228. padding: 4px 10px;
  229. margin-right: 8px;
  230. }
  232. #mini_contact_form .col_half { width: 185px }
  234. #social_links {
  235. }
  237. #social_links li {
  238. width: auto;
  239. height: auto;
  240. padding: 0;
  241. background: none;
  242. }
  243. #social_links li a {
  244. display: block;
  245. float: left;
  246. width: 100px;
  247. height: 48px;
  248. line-height: 48px;
  249. padding: 5px 0 5px 60px;
  250. margin-bottom: 20px;
  251. font-size: 14px;
  252. background-position: left;
  253. background-repeat: no-repeat
  254. }
  256. #social_links li a.facebook {
  257. background-image: url(images/facebook.png)
  258. }
  259. #social_links li a.flickr {
  260. background-image: url(images/flickr.png)
  261. }
  262. #social_links li a.skype {
  263. background-image: url(images/skype.png)
  264. }
  265. #social_links li a.twitter {
  266. background-image: url(images/twitter-2.png)
  267. }
  268. #social_links li a.vimeo {
  269. background-image: url(images/vimeo.png)
  270. }
  271. #social_links li a.youtube {
  272. background-image: url(images/youtube.png)
  273. }
  275. #gallery {
  277. }
  279. #gallery li {
  280. width: auto;
  281. height: auto;
  282. float: left;
  283. width: 200px;
  284. height: 120px;
  285. padding: 0;
  286. background: none;
  287. }
  289. #gallery li a {
  290. display: block;
  291. }
  293. #gallery li a img { }
  295. #contact_form { padding: 0; width: 330px }
  297. #contact_form form { margin: 0px; padding: 0px; }
  299. #contact_form form .input_field {
  300. width: 150px;
  301. padding: 4px;
  302. font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  303. color: #999999;
  304. border: 1px solid #525252;
  305. background: #292929;
  306. margin-bottom: 10px;
  307. }
  309. #contact_form form label { display: block;font-size: 11px }
  311. #contact_form form textarea {
  312. clear: both;
  313. width: 320px;
  314. height: 120px;
  315. padding: 4px;
  316. font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  317. color: #999999;
  318. border: 1px solid #525252;
  319. background: #292929;
  320. margin-bottom: 10px;
  321. }
  323. #contact_form form .submit_btn {
  324. font-size: 11px;
  325. font-weight: bold;
  326. background: #15171d;
  327. color: #999999;
  328. cursor: pointer;
  329. border: 1px solid #30333c;
  330. padding: 5px 10px;
  331. margin: 0px;
  332. }
comments powered by Disqus