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