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