daily pastebin goal
16%
SHARE
TWEET

Untitled

a guest May 17th, 2018 120 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /**
  2.  *   File containining Article Stylesheet
  3.  */
  4.  
  5. /** Importing of LESS styles from library **/
  6. @import "lib";
  7.  
  8. /* Start body id wrap */
  9. #article {
  10.  
  11. #main {
  12.     z-index:11;
  13. }
  14.  
  15. #article-container {
  16.    
  17.     float:left;
  18.     width:635px;
  19.     margin-left:10px;
  20.    
  21.     #article-image {
  22.         position:relative;
  23.    
  24.         img {
  25.                 .rounded(10px);
  26.         }
  27.         #article-image-desc {
  28.             width:380px;
  29.             height:62px;
  30.             background-color:#000;
  31.             position:absolute;
  32.             z-index:13;
  33.             bottom:15px;
  34.             color:#fff;
  35.             font-size:25px;
  36.             padding:5px 0 5px 10px;
  37.             text-transform:uppercase;
  38.         }
  39.     }
  40.    
  41.     #article-body {
  42.         width:635px;
  43.         position:relative;
  44.        
  45.         #article-date {
  46.             margin-top:15px;
  47.             font-weight:bold;
  48.         }
  49.         #article-author {
  50.             font-weight:bold;
  51.             color:#173757;
  52.             margin-top:5px;
  53.         }
  54.        
  55.         #article-buttons {
  56.             width:400px;
  57.             position:absolute;
  58.             height:40px;
  59.             right:0px;
  60.            
  61.             .article-button {
  62.                     background:#dbdbdb url("/images/layout/grey-bg.png") center;
  63.                     .rounded(4px);
  64.                     padding:4px;
  65.                     float:right;
  66.                     margin-left:10px;
  67.                     border:1px #b5b5b5 solid;
  68.                     cursor:pointer;
  69.                    
  70.                     b {
  71.                         display:block;
  72.                         float:left;
  73.                         margin-right:5px;
  74.                         background-image:url("/images/article/article-button-sprite.png");
  75.                        
  76.                         &.thumb { background-position:top left; width:13px; height:15px; }
  77.                         &.print { background-position:-13px -3px; width:16px; height:12px; }
  78.                         &.share { background-position:-29px -3px; width:10px; height:12px; }
  79.                         &.email { background-position:-39px -3px; width:15px; height:13px; }
  80.                        
  81.                     }
  82.                    
  83.                     &:hover { border-color:#000; }
  84.             }
  85.            
  86.         }
  87.        
  88.         #article-text {
  89.             margin-top:25px;
  90.             overflow:auto;
  91.             color:#343434;
  92.             padding-bottom:10px;
  93.             border-bottom:1px #c2c2c2 solid;
  94.            
  95.             > p {
  96.                 font-weight:bold;
  97.                 color:#173757;
  98.             }
  99.             h2 {
  100.                 font-weight:bold;
  101.                 text-transform:uppercase;
  102.                 margin-top:20px;
  103.             }
  104.             .column {
  105.                 width:307px;
  106.                 float:left;
  107.                 overflow:auto;
  108.                 &.first { margin-right:20px; }
  109.                
  110.                 p {
  111.                     margin-top:15px;
  112.                 }
  113.             }
  114.            
  115.             .photo {
  116.                 font-style:italic;
  117. /*              width:286px;*/
  118.             }
  119.             .photo-quote {
  120.                 clear:both;
  121.                 overflow:auto;
  122.                 padding-top:50px;
  123.                
  124.                 blockquote {
  125.                     width:286px;
  126.                     overflow:visible;
  127.                     float:left;
  128.                     border-top:2px solid #c2c2c2;
  129.                     border-bottom:2px solid #c2c2c2;
  130.                     padding:15px 0;
  131.                     color:#32679c;
  132.                     font-size:24px;
  133.                     text-transform:uppercase;
  134.                 }
  135.  
  136.             }
  137.            
  138.             p.bold-caps {
  139.                 margin-top:0;
  140.                 text-transform:uppercase;
  141.                 font-weight:bold;
  142.             }
  143.            
  144.             .photo-text {
  145.                     clear:both;
  146.                     overflow:auto;
  147.                     padding-top:50px;
  148.             }
  149.         }
  150.        
  151.     }
  152.    
  153. }
  154.  
  155. #article-sidebar {
  156.     width:305px;
  157.     float:right;
  158.     margin-right:10px;
  159.    
  160.     h2 {
  161.         font-size:30px;
  162.         color:#32679c;
  163.         text-transform:uppercase;
  164.     }
  165.    
  166.     hr {
  167.         background-color:#c2c2c2;
  168.         border:0;
  169.         margin:5px 0 10px 0
  170.     }
  171.    
  172.     ul {
  173.         list-style-type:none;
  174.     }
  175.    
  176.     li {
  177.         display:block;
  178.         height:88px;
  179.         padding:10px 0px;
  180.         border-bottom:1px solid #c2c2c2;
  181.         overflow:auto;
  182.         position:relative;
  183.         cursor:pointer;
  184.        
  185.         &:hover {
  186.             .button {
  187.                 background-position:top right;
  188.             }
  189.         }
  190.        
  191.         img {
  192.             float:left;
  193.             height:88px;
  194.         }
  195.         h4, p {
  196.             margin-left:10px;
  197.             width:110px;
  198.             float:left;
  199.         }
  200.         h4 {
  201.             text-transform:uppercase;
  202.         }
  203.         p {
  204.             font-size:11px;
  205.         }
  206.         .button {
  207.             display:block;
  208.             position:absolute;
  209.             right:0px;
  210.             top:50%;
  211.             margin-top:-14px;
  212.            
  213.             width:29px;
  214.             height:28px;
  215.             background-image:url(/images/layout/arrow-buttons-yellow.png);
  216.         }
  217.        
  218.     }
  219.    
  220.     #newsletter {
  221.         width:285px;
  222.         height:203px;
  223.         margin-top:40px;
  224.         background-image:url(/images/article/newsletter-box.jpg);
  225.         padding:10px;
  226.        
  227.         h3 {
  228.             font-size:30px;
  229.             color:#fff;
  230.             text-transform:uppercase;
  231.         }
  232.         h4 {
  233.             padding-top:2px;
  234.             font-size:14px;
  235.             text-transform:uppercase;
  236.         }
  237.         p {
  238.             padding-top:5px;
  239.             font-size:11px;
  240.             font-weight:bold;
  241.         }
  242.         input {
  243.             margin-top:67px;
  244.             width:280px;
  245.             border:1px #a36b32 solid;
  246.             padding:2px;
  247.             text-transform:uppercase;
  248.         }
  249.         .blue-button {
  250.             width:275px;
  251.             text-align:center;
  252.             margin-top:5px;
  253.         }
  254.     }
  255. }
  256.  
  257.  
  258. /* End body id wrap */
  259. }
RAW Paste Data
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
 
Top