home *** CD-ROM | disk | FTP | other *** search
/ Cricao de Sites - 650 Layouts Prontos / WebMasters.iso / Templates / CSS / HigherGround11 / images / HigherGround.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2008-01-15  |  9.3 KB  |  481 lines
  1. /********************************************
  2.    AUTHOR:              Erwin Aligam 
  3.    WEBSITE:               http://www.styleshout.com/
  4.     TEMPLATE NAME:        HigherGround
  5.    TEMPLATE CODE:     S-0014
  6.    VERSION:          1.1   
  7.     LAST MODIFIED:    January-12-2008           
  8.  *******************************************/
  9.  
  10. /********************************************
  11.    HTML ELEMENTS
  12. ********************************************/ 
  13.  
  14. /* Top Elements */
  15. * { margin: 0; padding: 0; outline: 0 }
  16.  
  17. body {
  18.     background: #CCC;
  19.     font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
  20.     color: #666666; 
  21.     text-align: center;
  22.     margin: 15px 0;
  23. }
  24.  
  25. /* links */
  26. a, a:visited {    
  27.     color: #5A93C9;
  28.     background: inherit;
  29.     text-decoration: none;
  30. }
  31. a:hover {
  32.     color: #88ac0b;
  33.     background: inherit;
  34.     text-decoration: underline;
  35. }
  36.  
  37. /* headers */
  38. h1, h2, h3 {
  39.     font-family: 'Trebuchet MS', Tahoma, Sans-serif;
  40.     font-weight: Bold;         
  41. }
  42. h1 {
  43.     font-size: 190%;    
  44.     font-weight: normal;
  45.     color: #555;
  46. }
  47. h2 {
  48.     font-size: 130%;
  49.     text-transform: uppercase;
  50.     color: #88ac0b;
  51. }
  52. h3 {
  53.     font-size: 130%;    
  54. }
  55.  
  56. h1, h2, h3, p {
  57.     padding: 10px;        
  58.     margin: 0;
  59. }
  60. ul, ol {
  61.     margin: 5px 20px;
  62.     padding: 0 20px;
  63. }
  64. ul {
  65.     list-style: none;
  66. }
  67.  
  68. /* images */
  69. img {
  70.     background: #FAFAFA;
  71.    border: 1px solid #DCDCDC;
  72.     padding: 5px;
  73. }
  74. img.float-right {
  75.       margin: 5px 0px 10px 10px;  
  76. }
  77. img.float-left {
  78.       margin: 5px 10px 10px 0px;
  79. }
  80.  
  81. code {
  82.       margin: 5px 0;
  83.       padding: 10px;
  84.       text-align: left;
  85.       display: block;
  86.       overflow: auto;  
  87.       font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  88.       /* white-space: pre; */
  89.       background: url(post.jpg);
  90.     border: 1px solid #E0DBC9;  
  91. }
  92. acronym {
  93.   cursor: help;
  94.   border-bottom: 1px dashed #777;
  95. }
  96. blockquote {
  97.     margin: 10px;
  98.      padding: 0 0 0 25px;  
  99.    background: url(post.jpg);
  100.     border: 1px solid #E0DBC9;
  101.     font: bold 1.3em/1.5em 'Trebuchet MS', Tahoma, Sans-serif;
  102.     color: #A89A6A;
  103. }
  104.  
  105.  
  106. /* start - table */
  107. table {
  108.     border-collapse: collapse;
  109.     margin: 10px;    
  110. }
  111. th strong {
  112.     color: #fff;
  113. }
  114. th {
  115.     background: #93BC0C url(nav.jpg) repeat-x;
  116.     height: 29px;
  117.     padding-left: 12px;
  118.     padding-right: 12px;
  119.     color: #FFF;
  120.     text-align: left;
  121.     border-left: 1px solid #B6D59A;
  122.     border-bottom: solid 2px #FFF;
  123. }
  124. tr {
  125.     height: 30px;
  126. }
  127. td {
  128.     padding-left: 11px;
  129.     padding-right: 11px;
  130.     border-left: 1px solid #E8E8E8;
  131.     border-bottom: 1px solid #DFDFDF;
  132. }
  133. td.first,th.first {
  134.     border-left: 0px;
  135. }
  136. tr.row-a {
  137.     background: #F8F8F8;
  138. }
  139. tr.row-b {
  140.     background: #EFEFEF;        
  141. }
  142. /* end - table */
  143.  
  144. /* form elements */
  145. form {
  146.     margin:10px; padding: 0 5px;
  147.     border: 1px solid #D5D5D5; 
  148.     background-color: #DFDFDF;     
  149. }
  150. label {
  151.     display:block;
  152.     font-weight:bold;
  153.     margin:5px 0;
  154. }
  155. input {
  156.     padding:2px;
  157.     border:1px solid #eee;
  158.     font: normal 1em Verdana, sans-serif;
  159.     color:#777;
  160. }
  161. textarea {
  162.     width:400px;
  163.     padding:2px;
  164.     font: normal 1em Verdana, sans-serif;
  165.     border:1px solid #eee;
  166.     height:100px;
  167.     display:block;
  168.     color:#777;
  169. }
  170. input.button { 
  171.     font: bold 12px Arial, Sans-serif; 
  172.     height: 24px;
  173.     margin: 0;
  174.     padding: 2px 3px; 
  175.     color: #FFF;
  176.     background: #8EB50C url(nav.jpg) repeat-x 0 0;
  177.     border: none;
  178. }
  179.  
  180. /* search form */
  181. .searchform {
  182.     background-color: transparent;
  183.     border: none;    
  184.     margin: 0 0 0 3px; padding: 5px 0 10px 0;    
  185.     width: 220px;    
  186. }
  187. .searchform p { margin: 0; padding: 0; }
  188. .searchform input.textbox { 
  189.     width: 130px;
  190.     color: #777; 
  191.     height: 18px;
  192.     padding: 2px;    
  193.     border: 1px solid #E5E5E5;
  194.     vertical-align: top;
  195. }
  196. .searchform input.button { 
  197.     width: 60px;
  198.     height: 24px;
  199.     padding: 2px 5px;
  200.     vertical-align: top;
  201. }
  202.  
  203. /********************************************
  204.    LAYOUT
  205. ********************************************/ 
  206. #wrap {
  207.     position: relative;
  208.     width: 820px;
  209.     background: #CCC url(content.jpg) repeat-y center top;
  210.     margin: 0 auto;
  211.     text-align: left;
  212. }
  213. #top-bg {
  214.    position: absolute;
  215.     width: 820px;
  216.     height: 19px;
  217.     background: #CCC url(top-bg.jpg) repeat-y center top;    
  218.     top: 0; left: 0;
  219.     z-index: 2;    
  220. }
  221. #content-wrap {
  222.     position: relative;
  223.     clear: both;
  224.     float: left;    
  225.     width: 790px;    
  226.     padding: 0;     
  227.     background: #E8E8E8;    
  228.     border-top: 5px solid #FFF;
  229.     border-bottom: 2px solid #D0D0D0;
  230.     margin-left: 15px;    
  231.     display: inline;
  232. }
  233. #header {
  234.     width: 820px;
  235.     position: relative;
  236.     height: 100px;
  237.     background: #CCC url(header-bg.jpg) repeat-y center top;
  238.     padding: 0;    
  239.     color: #FFF;    
  240. }
  241. #header h1#logo-text a {
  242.     position: absolute;
  243.     margin: 0; padding: 0;
  244.     font: bold 36px 'Trebuchet MS', Arial, Sans-serif;
  245.     letter-spacing: -1px;
  246.     color: #787676;
  247.     text-transform: none;
  248.     text-decoration: none;
  249.     
  250.     /* change the values of top and left to adjust the position of the logo*/
  251.     top: 25px; left: 30px;    
  252. }
  253. #header h1#logo-text span {
  254.     color: #9A9696;
  255. }
  256. #header p#slogan {
  257.     position: absolute;
  258.     margin: 0; padding: 0;
  259.     font: normal 12px 'Trebuchet MS', Arial, Sans-serif;
  260.     text-transform: none;
  261.     color: #838181;
  262.     
  263.     /* change the values of top and left to adjust the position of the slogan*/
  264.     top: 67px; left: 95px;        
  265. }
  266.  
  267. /* header links */
  268. #header #header-links {
  269.     position: absolute;
  270.     top: 20px; right: 20px;    
  271.     color: #838181;
  272.     font-size: 10px;    
  273. }
  274. #header #header-links a {    
  275.     color: #838181;
  276.     text-decoration: none;    
  277. }
  278. #header #header-links a:hover {
  279.     color: #444;        
  280. }
  281.  
  282. /* header-photo */
  283. #header-photo {
  284.     clear: both;
  285.     height: 200px;
  286.     width: 790px;
  287.     margin: 0 auto;
  288.     background: #FFF url(header-photo.jpg) no-repeat center center;
  289. }
  290.  
  291. /* Navigation */
  292. #nav {
  293.     clear: both;    
  294.     padding: 0;        
  295. }
  296. #nav ul {
  297.     float: left;
  298.     list-style: none;
  299.     background: url(nav.jpg) repeat-x;    
  300.     width: 790px;        
  301.     text-transform: uppercase;
  302.     margin: 0 0 0 15px;
  303.     padding: 0;    
  304.     display: inline;
  305. }
  306. #nav ul li {
  307.     display: inline;
  308.     margin: 0; padding: 0;
  309. }
  310. #nav ul li a {
  311.     display: block;
  312.     float: left;
  313.     width: auto;
  314.     margin: 0;
  315.     padding: 0 14px;
  316.     border-right: 1px solid #899D00;
  317.     border-left: 1px solid #A7D101;
  318.     border-bottom: none;
  319.     color: #FFF;
  320.     font: bold 13px/2.8em "Century Gothic", "Trebuchet MS", Helvetica, Arial, Geneva, sans-serif;
  321.     text-transform: uppercase;
  322.     text-decoration: none;    
  323.     letter-spacing: 1px;
  324. }
  325. #nav ul li a:hover, 
  326. #nav ul li a:active {
  327.     background: url(nav-hover.jpg) repeat-x;    
  328. }
  329. #nav ul li#current a {    
  330.     background: url(nav-current.jpg) repeat-x;    
  331. }
  332.  
  333. /* Main Column */
  334. #main {
  335.     float: left;
  336.     width: 67%;
  337.     padding: 20px 0 0 0; margin: 0 0 0 10px;
  338.     display: inline;
  339. }
  340. #main h2 {
  341.     font: normal 1.9em 'Trebuchet MS', Tahoma, Sans-serif;
  342.     color: #85970C; 
  343.     text-transform: none;
  344.     padding: 10px 0 0px 10px;             
  345. }
  346. #main h2 a {
  347.     color: #85970C;
  348.     text-decoration: none;    
  349. }
  350. #main ul li {
  351.     list-style-image: url(bullet.gif);
  352. }
  353.  
  354. /* Sidebar */    
  355. #sidebar {
  356.     float: right;
  357.     width: 27.5%;
  358.     padding: 20px 10px 0 0; margin: 0;        
  359. }    
  360. #sidebar h3 {
  361.     padding: 5px 5px; 
  362.     font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
  363.     color: #8C9F0D;         
  364. }
  365. #sidebar ul.sidemenu {
  366.     text-align: left;
  367.     margin: 7px 4px 8px 0; padding: 0;
  368.     text-decoration: none;        
  369.     background: url(dots.jpg) repeat-x left top;
  370. }
  371. #sidebar ul.sidemenu li {
  372.     list-style: none;
  373.     background: url(dots.jpg) repeat-x left bottom;
  374.     padding: 4px 0 4px 5px;
  375.     margin: 0 2px;        
  376.     color: #8F8F8F;
  377. }
  378. * html body #sidebar ul.sidemenu li {
  379.     height: 1%;
  380. }
  381. #sidebar ul.sidemenu li a {
  382.     text-decoration: none;    
  383.     background-image: none;    
  384.     color: #666666;            
  385. }
  386. #sidebar ul.sidemenu li a:hover {    
  387.     color: #1773BC;    
  388. }
  389. #sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
  390. #sidebar ul.sidemenu ul li { background: none; }
  391.  
  392. /* footer */
  393. #footer-wrap {
  394.     clear: both;
  395.     width: 820px;
  396.     font-size: 95%;    
  397.     text-align: left;
  398.     padding: 15px 0;
  399.     background: url(footer-bottom.jpg) no-repeat center bottom;    
  400. }
  401. #footer-wrap a {
  402.     text-decoration: none;
  403.     color: #666666;
  404.     font-weight: bold;
  405. }
  406. #footer-wrap a:hover {
  407.     color: #000;    
  408. }
  409. #footer-wrap p {
  410.     padding:10px 0;
  411. }
  412. #footer-wrap h3 {
  413.     color: #666666;
  414.     margin: 0;
  415.     padding: 0 10px; 
  416.     text-transform: uppercase;
  417. }
  418.  
  419. #footer-columns {
  420.     color: #888;
  421.     margin: 0 auto; 
  422.     padding: 0;    
  423.     width: 760px;        
  424. }
  425. #footer-columns ul {
  426.     list-style: none;
  427.     margin: 10px 0 0 0; 
  428.     padding: 0;    
  429.     background: url(footer-dots.jpg) repeat-x left top;
  430. }
  431. #footer-columns li {
  432.     background: url(footer-dots.jpg) repeat-x left bottom;        
  433. }
  434. #footer-columns li a {
  435.     display: block;
  436.     font-weight: normal;
  437.     padding: 4px 0 4px 10px;
  438.     width: 96%;
  439. }
  440. #footer-columns .col3, .col3-center {
  441.     float: left;
  442.     width: 32%;
  443. }
  444. #footer-columns .col3-center { 
  445.     margin: 0 15px; 
  446. }
  447.  
  448. /* bottom */
  449. #footer-bottom {
  450.     clear: both;
  451.     color: #666;    
  452.     margin: 0 auto; 
  453.     width: 820px;
  454.     padding: 10px 0;
  455.     text-align: center;
  456. }
  457.  
  458. /* postmeta */
  459. .post-footer {
  460.     background: url(post.jpg);
  461.     padding: 5px; margin: 5px 10px 10px 10px;    
  462.     font-size: 95%;    
  463.     color: #AEA471;
  464.     border: 1px solid #E0DBC9;
  465. }
  466. .post-footer .date{ margin: 0 10px 0 5px;    }
  467. .post-footer a.comments { margin: 0 10px 0 5px;    }
  468. .post-footer a.readmore { margin: 0 10px 0 5px;    }
  469. .post-info { font-size: .95em; padding: 0 10px; margin-left: 2px; color: #888; }
  470.  
  471. /* alignment classes */
  472. .float-left  { float: left; }
  473. .float-right { float: right; }
  474. .align-left  { text-align: left; }
  475. .align-right { text-align: right; }
  476.  
  477. /* display and additional classes */
  478. .clear { clear: both; }
  479.  
  480.  
  481.