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