home *** CD-ROM | disk | FTP | other *** search
/ Cricao de Sites - 650 Layouts Prontos / WebMasters.iso / Templates / CSS / Ablaze / images / Ablaze.css next >
Cascading Style Sheet File  |  2006-11-27  |  6KB  |  345 lines
  1. /********************************************
  2.    AUTHOR:              Erwin Aligam 
  3.    WEBSITE:               http://www.styleshout.com/
  4.     TEMPLATE NAME:     ablaze
  5.    TEMPLATE CODE:     S-0009
  6.    VERSION:          1.0              
  7.  *******************************************/ 
  8.  
  9. /********************************************
  10.    HTML ELEMENTS
  11. ********************************************/ 
  12.  
  13. /* top elements */
  14. * { 
  15.     padding: 0; margin: 0;
  16. }
  17. body {
  18.     margin: 0;     padding: 0;
  19.     font: normal .72em/1.5em  Tahoma, 'Trebuchet MS', sans-serif;
  20.     color: #CCC;
  21.     background: #444;
  22.     text-align: center;        
  23. }
  24.  
  25. /* links */
  26. a {
  27.     color: #F88F26; 
  28.     background-color: inherit;
  29.     text-decoration: none    
  30. }
  31. a:hover {
  32.     color: #FFF;
  33.     background-color: inherit;
  34. }
  35.  
  36. /* headers */
  37. h1, h2, h3 {
  38.     font: bold 1.3em 'Trebuchet MS', Arial, Sans-serif;
  39.     color: #B7080F;
  40. }
  41. h1 { font-size: 1.6em; } 
  42. h2 { font-size: 1.4em; text-transform:uppercase;}
  43. h3 { font-size: 1.3em; }
  44.  
  45. p, h1, h2, h3 {
  46.     margin: 0;
  47.     padding: 10px 15px;
  48. }
  49.  
  50. ul, ol {
  51.     margin: 10px 30px;
  52.     padding: 0 15px;
  53.     color: #F88F26;
  54. }
  55. ul span, ol span {
  56.     color: #CCC;
  57. } 
  58.  
  59. /* images */
  60. img {
  61.     border: 3px solid #CCC;
  62. }
  63. img.no-border {
  64.     border: none;
  65. }
  66. img.float-right {
  67.   margin: 5px 0px 5px 15px;  
  68. }
  69. img.float-left {
  70.   margin: 5px 15px 5px 0px;
  71. }
  72. a img {  
  73.   border: 3px solid #555;
  74. }
  75. a:hover img {  
  76.   border: 3px solid #CCC !important; /* IE fix*/
  77.   border: 3px solid #555;
  78. }
  79.  
  80. code {
  81.   margin: 5px 0;
  82.   padding: 10px;
  83.   text-align: left;
  84.   display: block;
  85.   overflow: auto;  
  86.   font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  87.   /* white-space: pre; */
  88.   background: #444;
  89. }
  90. acronym {
  91.   cursor: help;
  92.   border-bottom: 1px solid #777;
  93. }
  94. blockquote {
  95.     margin: 15px 15px 15px 0;
  96.      padding: 0 0 0 20px;      
  97.       background: #444;
  98.     font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif;   
  99. }
  100.  
  101. /* form elements */
  102. form {
  103.     margin: 10px 15px 10px 0;
  104.     padding: 10px 15px;
  105.     background: #444;
  106. }
  107. label {
  108.     display:block;
  109.     font-weight:bold;
  110.     margin:5px 0;
  111. }
  112. input {
  113.     padding: 2px;
  114.     border: 1px solid #eee;
  115.     font: normal 1em Verdana, sans-serif;
  116.     color:#000;
  117.     background: #CCC;
  118. }
  119. textarea {
  120.     width: 250px;
  121.     padding:2px;
  122.     font: normal 1em Verdana, sans-serif;
  123.     border:1px solid #eee;
  124.     height:100px;
  125.     display:block;
  126.     color:#000;
  127.     background: #CCC;
  128. }
  129. input.button { 
  130.     margin: 0; 
  131.     font: bold 1em Arial, Sans-serif; 
  132.     border: 1px solid #CCC;
  133.     padding: 2px 3px; 
  134.     color: #000;
  135.     background: #CCC;    
  136. }
  137.  
  138. /* search form */
  139. .searchform form{
  140.     position: absolute;
  141.     top: 5px; right: 0;
  142.     background-color: transparent;
  143.     border: none;
  144.     margin: 0; padding: 0;
  145. }
  146. .searchform input.textbox { 
  147.     margin: 0 3px; padding: 0 2px;
  148.     width: 130px;
  149.     background: #000;
  150.     color: #FFF; 
  151.     height: 20px;
  152.     border: 1px solid #B7080F;    
  153.     vertical-align: top;
  154. }
  155. .searchform input.button { 
  156.     font: bold 12px Arial, Sans-serif; 
  157.     background: #000;
  158.     color: #fff;    
  159.     width: 70px;
  160.     height: 22px;
  161.     border: none;
  162.     padding: 3px 5px;
  163.     vertical-align: top;
  164. }
  165.  
  166. /***********************
  167.       LAYOUT
  168. ************************/
  169.  
  170. #header-content, 
  171. #footer-content,
  172. #content {
  173.     width: 88%;
  174. }
  175.  
  176. /* header */
  177. #header {
  178.     background: #444 url(headerbg.jpg) repeat-x 0% 100%;
  179.     height: 110px;
  180.     text-align: left;    
  181. }
  182. #header-content {
  183.     position: relative;
  184.     margin: 0 auto; padding: 0;
  185. }
  186.  
  187. #header-content #logo {
  188.     position: absolute;    
  189.     font: bold 4.6em Tahoma, 'Trebuchet Ms', Sans-serif;
  190.     letter-spacing: -2px; 
  191.     color: #000;
  192.     margin: 0; padding: 0;
  193.     
  194.     /* change the values of left and top to adjust the position of the logo */
  195.     top: 5px; left: 10px;
  196. }
  197. #header-content #slogan {
  198.     position: absolute;    
  199.     font: bold 1.1em 'Trebuchet Ms', Sans-serif;
  200.     text-transform: none;
  201.     color: #f2f2f2;    
  202.     margin: 0; padding: 0;
  203.     
  204.     /* change the values of left and top to adjust the position of the slogan */
  205.     top: 60px; left: 15px;
  206. }
  207.  
  208. /* header menu */
  209. #header-content ul {
  210.     position: absolute;
  211.     right: 0; top: 70px;
  212.     font: bolder 1.3em 'Trebuchet MS', sans-serif;
  213.     color: #000;
  214.     list-style: none;
  215.     margin: 0; padding: 0;        
  216. }
  217. #header-content li {
  218.     display: inline;
  219. }
  220. #header-content li a {
  221.     float: left;
  222.     display: block;
  223.     padding: 3px 12px;    
  224.     color: #000;
  225. }
  226. #header-content li a:hover {
  227.     background: #000;
  228.     color: #F88F26;
  229. }
  230. #header-content li a#current  {
  231.     background: #000;
  232.     color: #FFF;
  233. }
  234.  
  235. /* content */
  236. #content-wrap {
  237.     clear: both;
  238.     float: left;
  239.     background: #000;        
  240.     width: 100%;
  241. }
  242. #content {
  243.     text-align: left;    
  244.     padding: 0; margin: 0 auto;    
  245. }
  246.  
  247. /* sidebar */
  248. #sidebar {
  249.     float: right;
  250.     width: 30%;
  251.     margin: 10px 0; padding: 0;
  252.     background: #000 url(gradientbg.jpg) repeat-x;
  253. }
  254. #sidebar ul.sidemenu {
  255.     list-style:none;
  256.     margin:10px 15px;
  257.     background: #444;
  258.     padding: 15px 0;        
  259.     border: 1px solid #000;
  260. }
  261. #sidebar ul.sidemenu li {
  262.     padding: 0px 10px;
  263. }
  264. #sidebar ul.sidemenu a {
  265.     display: block;
  266.     font-weight:bold;
  267.     color: #f5f5f5;
  268.     height: 1.5em;
  269.     text-decoration: none;
  270.     padding:.3em 0 .3em 15px;
  271.     background: #444;        
  272.     border-bottom: 1px dashed #000;
  273.     line-height: 1.5em;
  274. }
  275. #sidebar ul.sidemenu a.top{
  276.     border-top: 1px dashed #000;
  277. }
  278. #sidebar ul.sidemenu a:hover {
  279.     padding: .3em 0 .3em 10px;
  280.     background: #000;
  281.     border-left: 5px solid  #D30F16;
  282.     color: #D30F16;        
  283. }
  284.  
  285. /* main */
  286. #main {
  287.     float: left;
  288.     width: 68%;    
  289.     margin: 10px 0; padding: 0;
  290.     background: #000 url(gradientbg.jpg) repeat-x;
  291. }
  292.  
  293. /* footer */
  294. #footer {
  295.     clear: both;
  296.     margin: 0; padding: 0;
  297.     border-top: 1px solid #555;
  298.     font-size: 95%;
  299.     text-align: left;    
  300. }
  301. #footer h2, #footer p {
  302.     padding-left: 0;
  303. }
  304. #footer-content {    
  305.     margin: 0 auto;
  306. }
  307. #footer-content a {
  308.     text-decoration: none;
  309.     color: #CCC;
  310. }
  311. #footer-content a:hover {
  312.     text-decoration: underline;
  313.     color: #FFF;
  314. }
  315. #footer-content ul {
  316.     list-style: none;
  317.     margin: 0; padding: 0;
  318. }
  319. #footer-content .col {
  320.     width: 33%;
  321.     padding: 0 5px 30px 0;    
  322. }
  323. #footer-content .col2 {
  324.     width: 32%;
  325.     padding: 0 0 30px 0;    
  326. }
  327.  
  328. /* alignment classes */
  329. .float-left  { float: left; }
  330. .float-right { float: right; }
  331. .align-left  {    text-align: left; }
  332. .align-right {    text-align: right; }
  333.  
  334. /* additional classes */
  335. .clear { clear: both; }
  336. .comments { 
  337.     text-align: right; 
  338.     background: #444;
  339.     padding: 5px 15px;
  340.     margin: 20px 0px 10px 0px;
  341. }
  342.  
  343.  
  344.  
  345.