API tools faq
paste
Advertisement
SalahAdDinYusuf

stylesheet.css

SalahAdDinYusuf
Mar 31st, 2013
53
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.26 KB | None | 0 0
raw download clone embed print report
  1. /*  
  2. Theme Name: Default
  3. Version: 1.0.0
  4. Autor: Designed by SalahAdDinYusuf
  5. Description: Initial Proposition.
  6. */
  7.  
  8. /*
  9. INDEX:
  10.  
  11. 1. SETUP
  12. -1.1 Defaults
  13. -1.2 Hyperlinks
  14.  
  15. 2. SITE STRUCTURE & APPEARANCE
  16. -2.1 Containers & Columns
  17. -2.2 Navigation
  18. -2.2.1 Page Navigation
  19. -2.2.2 Category Navigation
  20. -2.2.3 Search
  21. -2.3 Header
  22. -2.4 Content
  23. -2.5 Sidebar
  24. -2.6 Footer
  25. -2.6.1 Footer Widget Area
  26. -2.7 Featured Area
  27. -2.8 Body
  28.  
  29. 3. POSTS
  30. -3.1 Typographic Elements
  31. -3.2 Images
  32. -3.3 Pagination / WP-Pagenavi
  33. -3.4 Buttons / Banners
  34.  
  35. 4. WIDGETS
  36. -4.1 Generic Widgets
  37. -4.2 Specific Widgets
  38. -4.3 Sidebar Tabs
  39. -4.4 Video
  40.  
  41. 5. COMMENTS
  42. -5.1 Comments
  43. -5.2 Comments Form
  44.  
  45. -------------------------------------------------------------------------------------------*/
  46.  
  47.  
  48. /*-------------------------------------------------------------------------------------------*/
  49. /* 2. SITE STRUCTURE & APPEARANCE */
  50. /*-------------------------------------------------------------------------------------------*/
  51.  
  52. /* 2.1 Containers & Columns */
  53.  
  54. div {
  55.     background: #FFFFFF;    /*General Div*/
  56.     margin: 0 20px 0 30px;
  57.     padding: 10px 10px 10px 10px;
  58. }
  59.  
  60. div.container{
  61.     background: #FFFFFF;
  62.     z-index: -2;
  63.     margin: 0 20px 0 30px;
  64.     -moz-opacity: 0.9;
  65.     opacity: 0.9;
  66.     width: 1280px;
  67. }
  68.  
  69. /* 2.3 Header */
  70. header{
  71.     background: #FFFFFF;
  72.     z-index: 0;
  73.     margin: 40px 20px 5px 30px;
  74.     padding: 10px 10px 0px 10px;
  75.     border-radius: 20px 20px 0 0;
  76.     -moz-opacity: 0.9;
  77.     opacity: 0.9;
  78.     width: 1280px;
  79. }
  80.  
  81. /* Garden's Logo */
  82. div.logo {
  83.     /*background: red; */
  84.     width: 25%;
  85.     display:inline-block;
  86.         margin: 0px;
  87.         padding: 0px;
  88. }
  89.  
  90. div.sidelogo{
  91.     background: yellow;
  92.     width: 73%;
  93.     display:inline-block;
  94.         margin: 0px;
  95.         padding: 0px;
  96. }
  97. /* Follow Us and Lang Chooser */
  98. div.sideuplogo{
  99.     /*background: brown;*/
  100.     text-align:right;
  101. }
  102.  
  103. /* Follow Us */
  104. .followus{
  105.     display: inline-block;
  106.         margin: 0 10px 0 0;
  107.     }
  108. header div a.facebook {
  109.     width: 60px;
  110.     height: 32px;
  111.     line-height: 40px;
  112.     background: url(images/social/facebook_32.png) no-repeat 10px 0px transparent scroll;
  113.     display: inline-block;
  114.         margin: 0 5px 0 5px;
  115.         text-align: center;
  116. }
  117. header div a.subscribe{
  118.         width: 60px;
  119.     height: 32px;
  120.         background: url(images/social/email_32.png) no-repeat   scroll 10px 0px transparent;
  121.         line-height: 40px;
  122.         display: inline-block;
  123.         margin: 0 5px 0 5px;
  124.         text-align: center;
  125. }
  126. header div a.twitter{
  127.         width: 60px;
  128.     height: 32px;
  129.         background: url(images/social/twitter_32.png) no-repeat scroll 10px 0px transparent;
  130.         line-height: 40px;
  131.         display: inline-block;
  132.         margin: 0 5px 0 5px;
  133.         text-align: center;
  134. }
  135.  
  136. /* Lang Chooser */
  137. .lang-chooser {
  138.         display: inline-block;
  139.     float: right;
  140. }
  141.  
  142. /* Slider Banner */
  143. #sliderbannerlogo {
  144.         text-align: center;
  145.                 margin: 0 auto;
  146.                 height: 170px;
  147.         background: green url(images/resources/loader.gif) center center no-repeat;
  148.                 border: 2px solid;
  149.                 border-radius: 10px;
  150.                 padding: 0 auto;
  151. }
  152.      
  153.         #sliderbannerlogo img {
  154.         overflow: hidden;
  155.                 border: none;
  156.         margin: 0;
  157.         padding: 0px;
  158.         outline: 0;
  159.     }
  160.        
  161.     #contentslider {
  162.                 position: absolute;
  163.         overflow: hidden;
  164.                 height: 150px;
  165.                 width: 900px;
  166.                 background: violet;
  167.                 margin: 0 auto;
  168.         }
  169.    
  170.     #bigimages {
  171.         position: inherit;
  172.                 width: 900px;
  173.                 background: blue;
  174.                 margin: 0 auto;
  175.     }
  176.    
  177.     #bigimages div {
  178.         position: inherit;
  179.         width: 900px;
  180.                 background: black;
  181.                 margin: 0 auto;
  182.     }
  183.  
  184. /* Tabbedbox Menu */
  185. div.tabbedboxmenu{
  186.     background: white;
  187.     padding: 5px 0 0 0;
  188. }
  189. /*Tabs*/
  190. .tabs {
  191.     position: relative;
  192.     margin: 40px auto;
  193.     width: 750px;
  194. }
  195.  
  196. .tabs input {
  197.     position: absolute;
  198.     z-index: 1000;
  199.     width: 120px;
  200.     height: 40px;
  201.     left: 0px;
  202.     top: 0px;
  203.     opacity: 0;
  204.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  205.     filter: alpha(opacity=0);
  206.     cursor: pointer;
  207. }
  208. .tabs input#tab-2{
  209.     left: 120px;
  210. }
  211. .tabs input#tab-3{
  212.     left: 240px;
  213. }
  214. .tabs input#tab-4{
  215.     left: 360px;
  216. }
  217. .tabs input#tab-5{
  218.     left: 480px;
  219. }
  220. .tabs input#tab-6{
  221.     left: 600px;
  222. }
  223.  
  224.  
  225. .tabs label {
  226.     background: #8E0000; /*Top Color*/
  227.         /*Gradient*/
  228.     background: -moz-linear-gradient(top, #8E0000 0%, #F05e5f 100%);
  229.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8E0000), color-stop(100%,#F05e5f));
  230.     background: -webkit-linear-gradient(top, #8E0000 0%,#F05e5f 100%);
  231.     background: -o-linear-gradient(top, #8E0000 0%,#F05e5f 100%);
  232.     background: -ms-linear-gradient(top, #8E0000 0%,#F05e5f 100%);
  233.     background: linear-gradient(top, #8E0000 0%,#F05e5f 100%);
  234.     font-size: 15px;
  235.     line-height: 40px;
  236.     height: 40px;
  237.     position: relative;
  238.     padding: 0 20px;
  239.     float: left;
  240.     display: block;
  241.     width: 80px;
  242.     color: #385c5b;
  243.     top: 0px;
  244.     letter-spacing: 1px;
  245.     text-transform: uppercase;
  246.     font-weight: bold;
  247.     text-align: center;
  248.     text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
  249.     border-radius: 3px 3px 0 0;
  250.     box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
  251. }
  252.  
  253. .tabs label:after {
  254.         content: '';
  255.     background: #fff;
  256.     position: absolute;
  257.     bottom: -8px;
  258.     left: 0;
  259.     width: 100%;
  260.     height: 8px;
  261.     display: block;
  262. }
  263.  
  264. .tabs input:hover + label {
  265.     background: #AC0202;
  266.     top: -8px;
  267.     -webkit-transition: top linear 0.2s;
  268.     -moz-transition: top linear 0.2s;
  269.     -o-transition: top linear 0.2s;
  270.     -ms-transition: top linear 0.2s;
  271.     transition: top linear 0.2s;
  272. }
  273. .tabs input:hover + label:after{
  274.     background: #AC0202;
  275. }
  276. .tabs input:hover + label ~ .clear-shadow {
  277.     top: -8px;
  278.     -webkit-transition: top linear 0.2s;
  279.     -moz-transition: top linear 0.2s;
  280.     -o-transition: top linear 0.2s;
  281.     -ms-transition: top linear 0.2s;
  282.     transition: top linear 0.2s;
  283. }
  284.  
  285. .tabs input:checked:hover + label {
  286.     top: 0;
  287. }
  288. .tabs input:checked:hover + label:after{
  289.     background: #fff;
  290. }
  291. .tabs input:checked:hover + label ~ .clear-shadow {
  292.     top: 0;
  293.     background: #fff;
  294.     -webkit-transition: none;
  295.     -moz-transition: none;
  296.     -o-transition: none;
  297.     -ms-transition: none;
  298.     transition: none;
  299. }
  300.  
  301. .tabs input.tab-selector-1:hover + label.tab-label-1 ~ .clear-shadow{
  302.     z-index: 5;
  303. }
  304.  
  305. .tabs input.tab-selector-2:hover + label.tab-label-2 ~ .clear-shadow {
  306.     z-index: 4;
  307. }
  308.  
  309. .tabs input.tab-selector-3:hover + label.tab-label-3 ~ .clear-shadow {
  310.     z-index: 3;
  311. }
  312.  
  313. .tabs input.tab-selector-4:hover + label.tab-label-4 ~ .clear-shadow {
  314.     z-index: 2;
  315. }
  316.  
  317. .tabs input.tab-selector-5:hover + label.tab-label-5 ~ .clear-shadow {
  318.     z-index: 1;
  319. }
  320.  
  321. .tabs input.tab-selector-6:hover + label.tab-label-6 ~ .clear-shadow {
  322.     z-index: 0;
  323. }
  324.  
  325.  
  326. .tabs label:first-of-type {
  327.     z-index: 6;
  328.     box-shadow: 2px 0 2px rgba(0,0,0,0.1);
  329. }
  330.  
  331. .tab-label-2 {
  332.     z-index: 5;
  333. }
  334.  
  335. .tab-label-3 {
  336.     z-index: 4;
  337. }
  338.  
  339. .tab-label-4 {
  340.     z-index: 3;
  341. }
  342.  
  343. .tab-label-5 {
  344.     z-index: 2;
  345. }
  346.  
  347. .tab-label-6 {
  348.     z-index: 1;
  349. }
  350. .tabs input:checked + label {
  351.     background: #fff;
  352.     z-index: 6;
  353.     -webkit-transition: top linear 0.2s;
  354.     -moz-transition: top linear 0.2s;
  355.     -o-transition: top linear 0.2s;
  356.     -ms-transition: top linear 0.2s;
  357.     transition: top linear 0.2s;
  358. }
  359.  
  360. .clear-shadow {
  361.         background: #AC0202;
  362.     position: relative;
  363.     top: 0;
  364.         height: 10px;
  365.     margin-bottom: -10px;
  366.         clear: both;
  367.     z-index: -2;
  368.         box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2);
  369.         border-radius: 3px;
  370. }
  371.  
  372. .content {
  373.     background: #fff;
  374.     position: relative;
  375.         width: 90%;
  376.     height: 370px;
  377.     z-index: 5;
  378.     overflow: hidden;
  379.     box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
  380.     border-radius: 0 3px 3px 3px;
  381.     margin: 0 auto;
  382.     padding: 0px;
  383. }
  384.  
  385. .content div {
  386.     position: absolute;
  387.     top: 0;
  388.     left: 0;
  389.     bottom: 100%;
  390.     padding: 10px 40px;
  391.     overflow: hidden;
  392.     z-index: 1;
  393.     opacity: 0;
  394.     -webkit-transition: all linear 0.1s;
  395.     -moz-transition: all linear 0.1s;
  396.     -o-transition: all linear 0.1s;
  397.     -ms-transition: all linear 0.1s;
  398.     transition: all linear 0.1s;
  399. }
  400.  
  401. .tabs input.tab-selector-1:checked ~ .content .content-1,
  402. .tabs input.tab-selector-2:checked ~ .content .content-2,
  403. .tabs input.tab-selector-3:checked ~ .content .content-3,
  404. .tabs input.tab-selector-4:checked ~ .content .content-4,
  405. .tabs input.tab-selector-5:checked ~ .content .content-5,
  406. .tabs input.tab-selector-6:checked ~ .content .content-6 {
  407.     bottom: 0px;
  408.     z-index: 100;
  409.     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  410.     filter: alpha(opacity=100);
  411.     opacity: 1;
  412.     -webkit-transition: all ease-out 0.2s 0.2s;
  413.     -moz-transition: all ease-out 0.2s 0.2s;
  414.     -o-transition: all ease-out 0.2s 0.2s;
  415.     -ms-transition: all ease-out 0.2s 0.2s;
  416.     transition: all ease-out 0.2s 0.2s;
  417. }
  418.  
  419. .content div h2,
  420. .content div h3{
  421.     color: #398080;
  422. }
  423. .content div p {
  424.     font-size: 14px;
  425.     line-height: 22px;
  426.     font-style: italic;
  427.     text-align: left;
  428.     margin: 0;
  429.     color: #777;
  430.     padding-left: 15px;
  431.     font-family: Cambria, Georgia, serif;
  432.     border-left: 8px solid rgba(63,148,148, 0.1);
  433. }
  434.  
  435. /*2.4 Content*/
  436. article.news_container{
  437.     background: #1add34;
  438.     display: inline-block;
  439.     width: 73%;
  440. }
  441.  
  442. /*2.5 Sidebar*/
  443. aside.menuaside{
  444.     background: royalblue;
  445.     display: inline-block;
  446.     width: 25%;
  447. }
  448.  
  449. /* 2.6 Footer */
  450. footer{
  451.     text-align: center;
  452.     background: #FFFFFF;
  453.     z-index: 0;
  454.     margin: 5px 20px 20px 30px;
  455.     padding: 10px 10px 10px 10px;
  456.     border-radius: 0 0 20px 20px;
  457.     -moz-opacity: 0.9;
  458.     opacity: 0.9;
  459.     width: 1280px;
  460. }
  461.  
  462. /* 2.8 Body */
  463. body {
  464.     background: url(images/fondoweb.jpg) scroll repeat-x;
  465.     background-size: contain;
  466. }
  467.  
  468. /*-------------------------------------------------------------------------------------------*/
  469. /* 3. POSTS */
  470. /*-------------------------------------------------------------------------------------------*/
  471.  
  472. /* 3.2 Images */
  473. div figure figcaption{
  474.     text-align:center;
  475.     font-size:11px;
  476. }
  477.  
  478. #logoan{
  479.     z-index: 1;
  480.     border: none;
  481.     border-radius: 10px;
  482.     width: 220px;
  483.     height: 120px;
  484.     padding-left: 20px;
  485.     margin: 15px 0px 0px 20px;
  486. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!