home *** CD-ROM | disk | FTP | other *** search
/ Cricao de Sites - 650 Layouts Prontos / WebMasters.iso / Templates / CSS / CitrusIsland / images / CitrusIsland.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2003-01-01  |  6.3 KB  |  333 lines

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