home *** CD-ROM | disk | FTP | other *** search
/ Cricao de Sites - 650 Layouts Prontos / WebMasters.iso / Templates / CSS / Four-Ums / style.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2007-09-01  |  6.8 KB  |  444 lines
  1. /* Basic Elements */
  2.  
  3.  
  4.  
  5. body {
  6.  
  7.             background-color: #000;
  8.  
  9. }
  10.  
  11.  
  12. a {
  13.  
  14.             color: #333333;
  15.             text-decoration: none;
  16. }
  17.  
  18. a:hover {
  19.  
  20.             text-decoration: underline;
  21. }
  22.  
  23. /* Layout */
  24.  
  25. #header {
  26.  
  27.             margin: 0px auto;
  28.             height: 125px;
  29.             border: 1px solid #444444;
  30.             background-color: #1e1e1e;
  31.             background-image: url(images/header_bg.png);
  32.             background-position: left;
  33.             background-repeat: repeat-x;
  34.             
  35.  
  36. }
  37.  
  38.  
  39. #navbar {
  40.     
  41.             margin: 0px auto;
  42.             height: 155px;
  43.             background-color: #1e1e1e;
  44.             background-image: url(images/navbar_bg.png);
  45.             text-align: center;
  46.             
  47.  
  48. }
  49.  
  50.  
  51. #toolbar {
  52.  
  53.             margin: 0px auto;
  54.             height: 30px;
  55.             background-color: #000;
  56.             
  57.  
  58. }
  59.  
  60. #wrapper {
  61.  
  62.             margin: 0px auto;
  63.             width: 940px;
  64.             border: 1px solid #555555;
  65.  
  66. }
  67.  
  68. #online {
  69.  
  70.             margin: 0px auto;
  71.             width: 940px;
  72.             border: 1px solid #555555;
  73.             border-top: 0px;
  74.             position: relative; top: 15px;
  75.  
  76. }
  77.  
  78.  
  79. /* Other Id's */
  80.  
  81. #header #logo {
  82.  
  83.             float: left;
  84.             width: 325px;
  85.             height: 55px;
  86.             background-image: url(images/logo.png);
  87.             background-position: center center;
  88.             background-repeat: no-repeat;
  89. }
  90.  
  91. #header #search {
  92.  
  93.             float:right;
  94.             width: 350px;
  95.             position: relative; top: 10px; right: 15px;
  96.             text-align: right;
  97. }
  98.  
  99.  
  100. #header #topnav {
  101.  
  102.             float: right;
  103.             position: relative; top: 30px; right: 15px;
  104.             font-family: Verdana;
  105.             font-size: 10px;
  106.             color: #ccc;
  107.             
  108. }
  109.  
  110. #header #topnav a {
  111.  
  112.             color: #ff7507;
  113.             text-decoration: none;
  114. }
  115.  
  116. #header #topnav a:hover {
  117.  
  118.             text-decoration: underline;
  119.  
  120. }
  121.  
  122.  
  123. #header #sloagan {
  124.  
  125.             font-size: .6em;
  126.             font-family: Verdana;
  127.             color: #ccc;
  128.             letter-spacing: -.1em;
  129.             position: relative;
  130.             left: 15px;
  131.             width: 275px;
  132.  
  133. }
  134.  
  135. #toolbar #login {
  136.  
  137.             float: right;
  138.             position: relative; top: 3px; right: 15px;
  139.             width: 290px;
  140.             text-align: right;
  141.  
  142. }
  143.  
  144. #toolbar #message {
  145.  
  146.             margin: 0px auto;
  147.             position: relative; top: 8px;
  148.             font-family: Verdana;
  149.             font-size: 10px;
  150.             color: #cccccc;
  151.             width: 250px;
  152.             
  153.             
  154. }
  155.  
  156. #toolbar #message a {
  157.  
  158.             color: #ff7507;
  159.             text-decoration: none;
  160. }
  161.  
  162. #toolbar #message a:hover {    
  163.             
  164.             text-decoration: underline;
  165.  
  166. }
  167.  
  168. #toolbar #date {
  169.  
  170.             float: left;
  171.             font-size: 10px;
  172.             font-family: Verdana;
  173.             color: #cccccc;
  174.             width: 250px;
  175.             position: relative; top: 8px; left: 10px;
  176. }
  177.  
  178.  
  179. #online .f_header .title {
  180.  
  181.             position: relative; left: 35px;
  182.             border-right: 0px;
  183.  
  184. }
  185.  
  186.  
  187. #online .users_list {
  188.  
  189.             background-color: #1e1e1e;
  190.             padding: 15px 5px 15px 5px;
  191.             font-size: 10px;
  192.             font-family: Verdana;
  193.             text-align: center;
  194.             color: #cccccc;
  195. }
  196.  
  197. #online .users_total {
  198.             
  199.             background-color: #1e1e1e;
  200.             font-size: 10px;
  201.             font-family: Verdana;
  202.             color: #cccccc;
  203.  
  204.  
  205. }
  206.  
  207.  
  208. #online .users_list span a {
  209.  
  210.             text-decoration: none;
  211. }
  212.  
  213. #online .users_list span a:hover {
  214.  
  215.             text-decoration: underline;
  216. }
  217.  
  218. #online .users_total span {
  219.  
  220.             position: relative;
  221.             left: 15px; bottom: 5px;
  222.             
  223.  
  224. }
  225.  
  226. .ranks {    
  227.  
  228.             position: relative;
  229.             left: 40px;
  230. }
  231.  
  232.  
  233. /* Forum header */
  234.  
  235. .f_header {
  236.     
  237.             background-color: #f4f4f4;
  238.             height: 26px;
  239.             font-size: 11px;
  240.             font-weight: bold;
  241.             font-family: Verdana;
  242.             color: #ccc;
  243.             padding: 12px 0px 0px 0px;
  244.             background-image: url(images/fheader.gif);
  245.             background-repeat: repeat-x;
  246.             
  247.  
  248. }
  249.  
  250. .f_header .h_title, .h_lastpost, .h_threads, .h_posts {
  251.  
  252.             float: left;
  253.             text-align: center;
  254.             
  255.  
  256. }
  257.  
  258.  
  259. .f_header .h_title {width: 390px;}
  260. .f_header .h_lastpost {width: 365px;}
  261. .f_header .h_threads {width: 90px;}
  262. .f_header .h_posts {width: 90px; border-right: 0px;}
  263.  
  264. /* Category bar */
  265.  
  266. .category {
  267.  
  268.             height: 32px;
  269.             background-image: url(images/topic_bg.png);
  270.             background-repeat: repeat-x;
  271.             font-family: Verdana;
  272.             font-size: 11px;
  273.             color: #333333;
  274.             padding: 8px 0px 0px 12px;
  275.             border-top: 1px solid orange;
  276. }
  277.  
  278.  
  279. /* Threads */
  280.  
  281. .thread {
  282.     
  283.             background-color: #000;
  284.             height: 40px;
  285.             background-image: url(images/thread_bg.png);
  286.             background-repeat: repeat-x;
  287.             font-family: Verdana;
  288.             font-size: 11px;
  289.             color: #777777;
  290.             font-weight: bold;
  291.             
  292. }
  293.  
  294. .thread .pic, .title, .lastpost, .threads, .posts {
  295.  
  296.             float: left;
  297.             text-align: center;
  298.             border-right: 1px solid #dddddd;
  299.             
  300. }
  301.             
  302. .thread .pic {width: 90px;}
  303. .thread .title {width: 300px;}
  304. .thread .lastpost {width: 365px;}
  305. .thread .threads {width: 90px;}
  306. .thread .posts {width: 90px; border-right: 0px;}
  307.  
  308. .thread div {
  309.     
  310.             height: 27px;
  311.             padding: 13px 0px 0px 0px;
  312.  
  313. }
  314.  
  315. .thread div.lastpost {
  316.  
  317.             height: 32px;
  318.             padding: 8px 0px 0px 0px;
  319.  
  320. }
  321.  
  322.  
  323. .thread div.lastpost .date {
  324.     
  325.             font-weight: normal;
  326.             font-size: 9px;
  327.  
  328. }
  329.  
  330.  
  331. /* Navigation */
  332.  
  333.  
  334. #navbar #links  {
  335.  
  336.             position: relative;
  337.             top: 4px; 
  338.                     
  339. }
  340.  
  341. #navbar #links div {
  342.             
  343.             cursor: pointer;
  344. }
  345.  
  346. #navbar #links .home {
  347.  
  348.             float: left;
  349.             background-image: url(images/home.png); 
  350.             background-repeat: no-repeat;
  351.             background-position: center center;
  352.             height: 150px; width: 150px;
  353.             position: relative; left: 90px;
  354.             
  355. }
  356.  
  357. #navbar #links .about {
  358.  
  359.             float: left;
  360.             background-image: url(images/about.png); 
  361.             background-repeat: no-repeat;
  362.             background-position: center center;
  363.             height: 150px; width: 150px;
  364.             position: relative; left: 90px;
  365.             
  366. }
  367.  
  368. #navbar #links .signup {
  369.  
  370.             float: left;
  371.             background-image: url(images/signup.png); 
  372.             background-repeat: no-repeat;
  373.             background-position: center center;
  374.             height: 150px; width: 150px;
  375.             position: relative; left: 90px;
  376.             
  377. }
  378.  
  379. #navbar #links .links {
  380.  
  381.             float: left;
  382.             background-image: url(images/links.png); 
  383.             background-repeat: no-repeat;
  384.             background-position: center center;
  385.             height: 150px; width: 150px;
  386.             position: relative; left: 90px;
  387.             
  388. }
  389.  
  390. #navbar #links .help {
  391.  
  392.             float: left;
  393.             background-image: url(images/help.png); 
  394.             background-repeat: no-repeat;
  395.             background-position: center center;
  396.             height: 150px; width: 150px;
  397.             position: relative; left: 90px;
  398.             
  399. }
  400.  
  401.  
  402.  
  403. /* Form elements */
  404.  
  405.  .textbox {
  406.  
  407.             background-color: #1e1e1e;
  408.             background-image: url(images/textbox_bg.png);
  409.             background-position: top left;
  410.             background-repeat: no-repeat;
  411.             color: #cccccc;
  412.             font-family: Verdana;
  413.             font-size: 10px;
  414.             width: 120px;
  415.             height: 13px;
  416.             border: 1px solid #222222;
  417.             padding-left: 5px;
  418. }
  419.  
  420. .button {
  421.  
  422.             background-color: transparent;
  423.             color: #ff7507;
  424.             font-weight: bold;
  425.             border: 0px;
  426.             width: 20px;
  427.             
  428. }
  429.  
  430. .button:hover {
  431.     
  432.             cursor: pointer;
  433. }
  434.  
  435. /* User Levels */
  436.  
  437. .admin { color: #21a2d6; }
  438. .moderator { color: red; }
  439. .user { color: #ff7507; }
  440. .guest { color: #cccccc; font-weight: normal; }
  441.  
  442. /* Extras */
  443.  
  444. .clear { clear: both; }