API tools faq
paste
Advertisement
Guest User

CSS

a guest
Sep 17th, 2013
94
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 14.25 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. .halflings {
  4. padding-left:21px;
  5. padding-bottom:15px;
  6. }
  7. .glyphicons,.social {
  8. padding-left: 34px;
  9. padding-bottom: 25px;
  10. }
  11. /*/////////////////////////////////////
  12. ////                               ////
  13. ////     jQuery UI Overrides       ////
  14. ////                               ////
  15. /////////////////////////////////////*/
  16. .ui-widget-header {
  17.    background-color: hsl(194, 42%, 74%) !important;
  18.   background-repeat: repeat-x;
  19.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a0cbd8", endColorstr="#a0cbd8");
  20.   background-image: -khtml-gradient(linear, left top, left bottom, from(#a0cbd8), to(#a0cbd8));
  21.   background-image: -moz-linear-gradient(top, #a0cbd8, #a0cbd8);
  22.   background-image: -ms-linear-gradient(top, #a0cbd8, #a0cbd8);
  23.   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a0cbd8), color-stop(100%, #a0cbd8));
  24.   background-image: -webkit-linear-gradient(top, #a0cbd8, #a0cbd8);
  25.   background-image: -o-linear-gradient(top, #a0cbd8, #a0cbd8);
  26.   background-image: linear-gradient(#a0cbd8, #a0cbd8);
  27.   border-color: #a0cbd8 #a0cbd8 hsl(194, 42%, 74%);
  28.   color: #333 !important;
  29.   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.00);
  30.   -webkit-font-smoothing: antialiased;
  31.   min-height:62px;
  32. }
  33.    
  34.     .ui-widget-header h1 {
  35.         font-size:1.1em;
  36.         padding-top:.2em;
  37.         display:inline-block;
  38.         text-align:center;
  39.         width:54%;
  40.         }  
  41.     @media (min-width:344px)
  42.     {
  43.        
  44.  
  45.     .ui-widget-header h1 {
  46.         font-size:1.1em;   
  47.         width:58%;
  48.         }
  49.     }
  50.     @media (min-width:400px)
  51.     {
  52.     .ui-widget-header h1 {
  53.         font-size:1.5em;
  54.         padding-top:.2em;
  55.         display:inline-block;
  56.         text-align:center;
  57.         width:64%;
  58.         }  
  59.     }
  60.     @media (min-width:460px)
  61.     {
  62.     .ui-widget-header h1 {
  63.         font-size:2.5em;
  64.         padding-top:.2em;
  65.         display:inline-block;
  66.         text-align:center;
  67.         width:69%;
  68.         }  
  69.     }
  70.     @media (min-width:650px)
  71.     {
  72.     .ui-widget-header h1 {
  73.         font-size:2.5em;
  74.         padding-top:.2em;
  75.         display:inline-block;
  76.         text-align:center;
  77.         width:75%;
  78.         }  
  79.     }
  80.  
  81.     @media (min-width:840px)
  82.     {
  83.     .ui-widget-header h1 {
  84.         font-size:2.5em;
  85.         padding-top:.2em;
  86.         display:inline-block;
  87.         text-align:center;
  88.         width:84%;
  89.         }  
  90.    
  91.     }
  92.  
  93. .ui-corner-left {display:inline-block; float:left; margin:1em 1em; }
  94. .ui-corner-right {display:inline-block; float:right; margin:1em 1em; }
  95.  
  96. /*/////////////////////////////////////
  97. ////                               ////
  98. //// Twitter Bootstrap Overrides   ////
  99. ////                               ////
  100. /////////////////////////////////////*/
  101. .container,
  102. .navbar-static-top .container,
  103. .navbar-fixed-top .container,
  104. .navbar-fixed-bottom .container {
  105.   max-width: 960px;
  106. }
  107. .span12 {
  108.   max-width: 940px;
  109. }
  110. .span11 {
  111.   max-width: 860px;
  112. }
  113. .span10 {
  114.   max-width: 780px;
  115. }
  116. .span9 {
  117.   max-width: 700px;
  118. }
  119. .span8 {
  120.   max-width: 620px;
  121. }
  122. .span7 {
  123.   max-width: 540px;
  124. }
  125. .span6 {
  126.   max-width: 460px;
  127. }
  128. .span5 {
  129.   max-width: 380px;
  130. }
  131. .span4 {
  132.   max-width: 300px;
  133. }
  134. .span3 {
  135.   max-width: 220px;
  136. }
  137. .span2 {
  138.   max-width: 140px;
  139. }
  140. .span1 {
  141.   max-width: 60px;
  142. }
  143.  
  144. /*//////////////////////////////////////
  145. ////                                ////
  146. ////     MAIN TEMPLATE STYLING      ////
  147. ////                                ////
  148. //////////////////////////////////////*/
  149.  
  150. #page {
  151.     padding-top: 20px;
  152. }
  153. html { height:100% !important; overflow:hidden;}
  154.  
  155. p { font-size:16px;font-size:1em;color:#555;}
  156. body {
  157.     min-width:346px;
  158.     height:100%;
  159.     overflow-y:hidden;
  160.     overflow-x:hidden;
  161. }
  162. .container {position:relative;}
  163. body .container {
  164.     position:relative;
  165.     margin: 0; width:100%; height:100%;
  166.     margin-left:auto;
  167.     margin-right:auto;
  168.     background:#fafafa;
  169.     min-height:400px;
  170.     margin-top:3em;
  171.     overflow:hidden;
  172.    
  173. }
  174. .container, .content-box, #pjax-container{
  175.     height:100%;
  176.     position:relative;
  177.     background:none;
  178.     z-index:0;
  179.     padding-top:0;
  180.     font-size:13px;
  181.     display:block;
  182.     top:1em;
  183. }
  184.  
  185. .content-box {
  186. overflow-y:auto;
  187. }
  188.  
  189. .splash { display:block; text-align:center; margin:0 auto; width:90%}
  190. .splash .btn { margin:.8em auto; }
  191. h1, h2, h3, h4, h5, h6      {   color:#111111;      font-family: 'Open Sans', sans-serif;}
  192. a                           {   color:#759CEE;      font-family: 'Open Sans', sans-serif;}
  193. h1 > a                      {   color:#759CEE;      font-family: 'Open Sans', sans-serif;}
  194. h2 > a                      {   color:#759CEE;      font-family: 'Open Sans', sans-serif;}
  195. h3 > a                      {   color:#759CEE;      font-family: 'Open Sans', sans-serif;}
  196. h4 > a                      {   color:#759CEE;      font-family: 'Open Sans', sans-serif;}
  197. h5 > a                      {   color:#759CEE;      font-family: 'Open Sans', sans-serif;}
  198. h6 > a                      {   color:#759CEE;      font-family: 'Open Sans', sans-serif;}
  199. span                            {   color:#759CEE;      font-family: 'Open Sans', sans-serif;}
  200. input                           {   border:groove thin white;   font-family: 'Open Sans', sans-serif;}
  201. li, ul                      {   color:#111111;}
  202. em                          {   color:#111111;}
  203. blockquote                  {   color:#111111!important;}
  204. .filtrable-caption          {   color:#111111;}
  205. .portfolio-tem-full-width a {   color:#111111;}
  206. .portfolio-item-thumb a     {   color:#111111;}
  207. .dropcaps                   {   color:#111111;}
  208. .field-title                {   color:#111111;}
  209. .shadow{                        text-shadow:0px 2px 0px rgba(0,0,0,1);}
  210.  
  211.  
  212.  
  213.  
  214. /*Inner Container
  215. ------------------------------------------*/
  216. .containerInner {
  217.     width:100%;
  218.     margin:0 auto;
  219.     height:80%;
  220.     overflow-y:auto;
  221. }
  222.  
  223. .innerFooter {
  224.     border: thin solid black;
  225.     bottom:0;
  226.     width:100%;
  227.     height:10%;
  228. }
  229.  
  230.  
  231. /*/////////////////////////////////////
  232. ////                               ////
  233. ////     Responsive Columns        ////
  234. ////                               ////
  235. /////////////////////////////////////*/
  236. row:before {
  237. clear:both;
  238. }
  239. row:after {
  240. clear:both;
  241. }
  242. row {
  243. margin:0 auto;
  244. display:block;
  245. min-height:50px;
  246. min-height:3.125em;
  247. height:auto;
  248. padding: 5px 5px;
  249. padding:.3em .3em;
  250. }
  251. row .col-third {
  252.     width:33.3333%;
  253.     height:auto;
  254.     background-color:#fff;
  255.     display:inline-block;
  256.     float:left;
  257.     margin: 4px auto;
  258.     margin: .25em auto;
  259.     padding: 2px 3px;
  260.     padding: .1em .2em;
  261. }
  262. row .col-half {
  263.     width:50%;
  264.     height:auto;
  265.     background-color:#fff;
  266.     display:inline-block;
  267.     float:left;
  268.     margin: 4px auto;
  269.     margin: .25em auto;
  270.     padding: 2px 3px;
  271.     padding: .1em .2em;
  272. }
  273. row .col-qtr {
  274.     width:25%;
  275.     height:auto;
  276.     background-color:#fff;
  277.     display:inline-block;
  278.     float:left;
  279.     margin: 4px auto;
  280.     margin: .25em auto;
  281.     padding: 2px 3px;
  282.     padding: .1em .2em;
  283. }
  284.  
  285. /*/////////////////////////////////////
  286. ////                               ////
  287. ////     FORM STYLING              ////
  288. ////                               ////
  289. /////////////////////////////////////*/
  290.   #loginPanel { z-index:3;padding: .5em 1em; text-decoration: none; }
  291.   #loginPanel { width: 100%; height: 100%; padding: 0.4em; position: relative; }
  292.   #loginPanel h3 { margin-right:4em; padding: 0.4em; text-align: center; }
  293.  
  294.   .fieldWrap {  display:block;}
  295.   .fLabel {
  296.     font-size:18px;
  297.     font-size:1.2em;
  298.     display:block;
  299.     width:100%;
  300.     float:none;
  301.     }
  302.   .fText {
  303.     font-size:18px;
  304.     font-size:1.2em;
  305.     height:32px !important;
  306.     height:2em !important;
  307.     display:block;
  308.     width:100%;
  309.     float:none;
  310. }
  311.  
  312.   #dummyPanel { z-index:3;padding: .5em 1em; text-decoration: none; }
  313.   #dummyPanel { width: 100%; height: 100%; padding: 0.4em; position: relative; }
  314.   #dummyPanel h3 { margin-right:4em; padding: 0.4em; text-align: center; }
  315.  
  316.  
  317. /*///////////////////////////////////*/
  318. /*///                             ///*/
  319. /*///      COLOR SWATCHES         ///*/
  320. /*///                             ///*/
  321. /*///////////////////////////////////*/
  322. .bgWhite {
  323. background: rgb(249,249,249); /* Old browsers */
  324. background: -moz-linear-gradient(-45deg,  rgba(249,249,249,1) 1%, rgba(255,255,255,1) 49%, rgba(249,249,249,1) 100%); /* FF3.6+ */
  325. background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,rgba(249,249,249,1)), color-stop(49%,rgba(255,255,255,1)), color-stop(100%,rgba(249,249,249,1))); /* Chrome,Safari4+ */
  326. background: -webkit-linear-gradient(-45deg,  rgba(249,249,249,1) 1%,rgba(255,255,255,1) 49%,rgba(249,249,249,1) 100%); /* Chrome10+,Safari5.1+ */
  327. background: -o-linear-gradient(-45deg,  rgba(249,249,249,1) 1%,rgba(255,255,255,1) 49%,rgba(249,249,249,1) 100%); /* Opera 11.10+ */
  328. background: -ms-linear-gradient(-45deg,  rgba(249,249,249,1) 1%,rgba(255,255,255,1) 49%,rgba(249,249,249,1) 100%); /* IE10+ */
  329. background: linear-gradient(135deg,  rgba(249,249,249,1) 1%,rgba(255,255,255,1) 49%,rgba(249,249,249,1) 100%); /* W3C */
  330. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  331. }
  332. .white {color:#fff;}
  333.  
  334.  
  335.  
  336. /*/////////////////////////////////
  337. ////                           ////
  338. ////     Custom Icons          ////
  339. ////                           ////
  340. //////////////////////////////////*/
  341.  
  342. .icon-cam-flip{         background-image:url(/images/icon-camflip.png);     background-size:20px 20px;  background-repeat:no-repeat; background-position:center center;}
  343. .head-icon-cam-flip{    background-image:url(/images/icon-camflip.png);     background-size:20px 20px;  background-repeat:no-repeat; background-position:center right;}
  344. .logo {display:inline-block;padding-right:24px;margin-left:auto;width: auto;}
  345.  
  346.     /* demo CSS - remove later */
  347.             /* Removes the default 20px margin and creates some padding space for the indicators and controls */
  348.             .carousel {
  349.                 margin-bottom: 0;
  350.                 padding: 0 40px 30px 40px;
  351.             }
  352.             /* Reposition the controls slightly */
  353.             .carousel-control {
  354.                 left: -12px;
  355.                 font-size: 32px;
  356.                 opacity: .2;
  357.                 }
  358.             .carousel-control.right {
  359.                 right: -12px;
  360.                 font-size: 32px;
  361.                 opacity: .2;
  362.                 }
  363.             /* Changes the position of the indicators */
  364.             .carousel-indicators {
  365.                 right: 50%;
  366.                 top: auto;
  367.                 bottom: 0px;
  368.                 margin-right: -19px;
  369.             }
  370.             /* Changes the colour of the indicators */
  371.             .carousel-indicators li {
  372.                 background: #c0c0c0;
  373.             }
  374.             .carousel-indicators .active {
  375.             background: #333333;
  376.             }
  377.     /* end Demo */
  378.  
  379.  
  380.  
  381. /* social buttons */
  382. .socialButtons {
  383. max-width:247px;
  384. max-width:19em;
  385. margin: 8px auto;
  386. margin:.5em auto;
  387. text-align:center;
  388. }
  389. .socialButtons IMG {
  390. float:left;
  391. cursor:pointer;
  392. max-width:46px;
  393. max-width:3.5em;
  394. margin: 4px 4px 4px auto;
  395. margin:.2em .2em .2em auto;
  396. }
  397.  
  398. /*z-index*/
  399. .layer0{z-index:0;} .layer1{z-index:1;} .layer2{z-index:2;} .layer3{z-index:3;} .layer4{z-index:4;}
  400. .layer5{z-index:5;} .layer6{z-index:6;} .layer7{z-index:7;} .layer8{z-index:8;} .layer9{z-index:9;}
  401.  
  402.  
  403.  
  404. /*//////////////////////////////////////////////////
  405. ////                                            ////
  406. ////   MEDIA QUERIES (Responsive Design         ////                
  407. ////                                            ////
  408. //////////////////////////////////////////////////*/
  409.  
  410. .navbar-inner { padding-left:0;margin-left:0; }
  411. /*mobile Toggler for js */
  412. #mobileToggle { display:inline; }
  413.  
  414.     .container .aside {
  415.         height:100%;
  416.        
  417.     }
  418. .aside {
  419.     overflow-x:hidden;
  420.     overflow-y:scroll;
  421.     left:-150%;
  422.     position:fixed;
  423.     width:250px;
  424.     top:0;
  425.     background:#fafafa;
  426.     z-index:21;
  427. }
  428.  
  429. .side-bar-searchbar
  430. .side-bar-searchbar {display:inherit;}
  431. #openLeft {display:inherit;}
  432. .homeBtn {display:none;}
  433. .sidebar-left-close { display:block;}
  434. .container {margin-bottom:3em;  }
  435. @media (min-width: 610px) {
  436. .container .content-box {
  437.     top:0em;
  438.  
  439. }
  440.     .homeBtn {display:block;}
  441.     #openLeft {display:none;}
  442.     .sidebar-left-close { display:none;}
  443.     #mobileToggle { display: none; }
  444.     .fLabel {   width:auto; display:inline; float:left;}
  445.     .fText { width:auto; float:right; display:inline;}  
  446.     .aside {display:block;}
  447.     .aside {
  448.             left:0;
  449.             float:left;
  450.             background:inherit;
  451.             overflow:hidden;
  452.             z-index:5;
  453.         }
  454.     .container .aside {
  455.         padding: 0px 12px;
  456.         width: 250px;
  457.         position:relative;
  458.         }
  459.         .container .content-box { padding:9px; padding-bottom:0px;}
  460.     .content-box {
  461.  
  462.         float:right;
  463.         position:relative;
  464.         width:100%;
  465.     }
  466. }
  467.  
  468. @media (min-width:960px)  {
  469.     body {  background:#B9BDC2;}
  470.  
  471.     body .container {
  472.         margin-top:3em;
  473.         background:#fafafa;
  474.         -webkit-box-shadow: 1px 1px 3px #000,inset 0px 0px 1px -7px rgba(0,0,0,0.75);
  475.         -moz-box-shadow: 1px 1px 3px #000,inset 0px 0px 1px -7px rgba(0,0,0,0.75);
  476.         box-shadow: 1px 1px 3px #000,inset 0px 0px 1px -7px rgba(0,0,0,0.75);  
  477.        
  478.     }
  479.    
  480.  
  481.    
  482. }
  483.  
  484. h1 {
  485. position: absolute;
  486. display: inline;
  487. margin-left: auto;
  488. margin-right: auto;
  489. text-align: center;
  490. }
  491.  
  492. /*//////////////////////////////////////////////////
  493. ////                                            ////
  494. ////               PROTOTYPING                  ////                
  495. ////                                            ////
  496. //////////////////////////////////////////////////*/
  497.  
  498. .dots { font-size:14px;}
  499. /*SubNav affix */
  500. .affix {
  501.     position: fixed;
  502.     width: 100%;
  503.     top: 0;
  504.     margin: 0;
  505.     padding: 0;
  506.     left: 0;
  507. }
  508.  
  509. /*User listing*/
  510.  
  511. .userList {
  512.     width:98%;
  513.     margin:1em auto;
  514. }
  515.  
  516. .alt { background-color:#E4F2F8; }
  517.  
  518. .userList_pic {
  519.     width:109px;
  520.     float:left;
  521.     display:inline-block;
  522. }
  523.  
  524. .userList IMG {
  525.     min-width:100px;
  526.     width:100%;
  527. }
  528.  
  529. .userList_info {
  530.     float:left;
  531.     display:inline-block;
  532. }
  533.  
  534. .userList_follow {
  535.     display:inline-block;
  536.     float:right;
  537.     min-width:10%;
  538.     max-width:22%;
  539.     width:100%;
  540.     padding-left:1%;
  541.     padding-top:14%;
  542. }
  543. .userList_follow button { padding:1px;font-size:9px;}
  544. .userList_info badge {
  545. font-size:9px;
  546. }
  547. @media (min-width:355px) {
  548.     .dots { font-size:16px;}
  549.     .userList_follow { max-width:30%; width:100%; margin-right:1%;padding-top:11%;}
  550.     .userList_info badge {font-size:10px;}
  551.     .userList_follow button { padding:1px;font-size:12px;}
  552. }
  553. @media (min-width:420px) {
  554.     .dots { font-size:16px;}
  555.     .userList_follow { max-width:40%; width:100%; margin-right:1%;padding-top:9%;}
  556.     .userList_info badge {font-size:10px;}
  557.     .userList_follow button { padding:1px;font-size:12px;}
  558. }
  559. @media (min-width:483px) {
  560.     .userList_follow { max-width:50%; width:100%; margin-right:1%;padding-top:7%;}
  561.     .userList_info badge {font-size:10px;}
  562.     .userList_follow button { padding:1px;font-size:12px;}
  563. }
  564. @media (min-width:600px) {
  565. .affix {
  566.     position: relative;
  567.     width: 100%;
  568.     top: 0;
  569.     margin: 0;
  570.     padding: 0;
  571.     left: 0;
  572. }
  573.  
  574.     .userList_follow { max-width:56%; width:100%; margin-right:1%;padding-top:5%;}
  575.     .userList_info badge {font-size:11px;}
  576.     .userList_follow button { padding:3px;font-size:14px;}
  577. }
  578. @media (min-width:700px) {
  579.     .userList_follow { max-width:66%; width:100%; margin-right:1%; padding-top:4%;}
  580.     .userList_info badge {font-size:12px;}
  581.     .userList_follow button { padding:4px;font-size:16px;}
  582. }
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!