DISTRHO
/
Website
mirror of https://github.com/DISTRHO/Website
1
0
Fork 0
Code Releases 0 Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 Commits
1 Branch
7.5MB
Tree: abe18de959
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'abe18de959'
${ noResults }
Website/css/style.css

742 lines
20KB
Raw Blame History 

  1. /* Getting the new tags to behave */

  2. article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup,

  3. keygen, meter, nav, output, progress, section, source, video {

  4.     display: block;

  5. }

  6. mark, rp, rt, ruby, summary, time {

  7.     display:inline;

  8. }

  9. 

  10. /* Global properties ======================================================== */

  11. body {

  12.     color: #BABABA; /* XX-WHITE #272727 | #7A7A7A */;

  13.     display: flex;

  14.     flex-direction: column;

  15.     font-family: sans-serif;

  16.     font-weight: normal;

  17.     font-size: 20px;

  18.     line-height: 1.125em;

  19. }

  20. html {

  21.     /* FIXME */

  22.     min-width: 750px;

  23. }

  24. html, body {

  25.     height: 100%;

  26.     /*background-color: #1E1F1F;*/

  27.     background-color: #F4F4F4;

  28. }

  29. hr {

  30.     color: #191A1A4D/* XX-WHITE #D6D6D64D */;

  31.     background-color: transparent;

  32. }

  33. 

  34. /*===== footer =====*/

  35. footer {

  36.     color: #fff;

  37.     background-color: #1E1F1F;

  38.     border-top: 5px solid #1A1A1A /* XX-WHITE #D6D6D6 */;

  39.     display: flex;

  40.     justify-content: space-around;

  41.     font-size: 0.9rem;

  42.     padding: 18px 0 18px 0;

  43.     text-align: center;

  44. }

  45. footer a {

  46.     color: #A3B6B6;

  47. }

  48. footer a:hover {

  49.     color: #ffffff;

  50. }

  51. 

  52. /* Global Structure ============================================================= */

  53. .container {

  54.         margin: 0 auto;

  55.         position: relative;

  56.         min-width: 750px;

  57.         max-width: 1000px;

  58.         font-size:.8125em;

  59. }

  60. 

  61.         /* Header */

  62.         header{

  63.                 height:72px;

  64.                 min-height:72px;

  65.                 overflow:hidden;

  66.                 background:url(../images/header-bg_black.gif)/* XX-WHITE url(../images/header-bg_white.gif) */ 0 0 repeat-x;

  67.         }

  68. 

  69.         /*Gallery*/

  70.         #gallery {

  71.                 height:380px;

  72.                 min-height:380px;

  73.                 overflow:hidden;

  74.                 background:url(../images/gallerry-bg_black.jpg)/* XX-WHITE url(../images/gallerry-bg_white.jpg) */ 0 0 repeat-x;

  75.         }

  76.         #gallery_plugins {

  77.                 height:296px;

  78.                 overflow:hidden;

  79.                 background:url(../images/gallerry-bg_black.jpg)/* XX-WHITE url(../images/gallerry-bg_white.jpg) */ 0 0 repeat-x;

  80.         }

  81. 		.individual_plugin_container{

  82. 				position:absolute;

  83. 				left:0;

  84. 				top:60px;

  85. 		}

  86. 		.text_download{

  87. 				/*font-family: 'Cutive Mono', sans-serif;*/

  88. 				z-index:100;

  89. 				position:absolute;

  90. 				color:#cfcdcd; /* XX-WHITE FIXME */

  91. 				font-size:100%;

  92. 				left:45px;

  93. 				top:215px;

  94. 		}

  95. 		.text_download a{

  96. 				color:#cfcdcd; /* XX-WHITE FIXME */

  97. 		}

  98. 		.text_download a:hover{

  99. 				color:#9eb2c5; /* XX-WHITE FIXME */

  100. 		}

  101. 		.linuxLogo{

  102. 				background:url(../images/logo_linux.png) 100% 0 no-repeat;

  103. 		}

  104. 		.windowsLogo{

  105. 				background:url(../images/windowsLogo.png) 50% 0 no-repeat;

  106. 		}

  107. 

  108.         /* Content */

  109.         .content {

  110.                 float: left;

  111.                 width: 572px;

  112.         }

  113. 

  114.         /* Sidebar */

  115.         aside{

  116.                 float: left;

  117.                 width: 302px;

  118.                 margin: 0px 52px 0 0;

  119.         }

  120.          .homeAside{

  121.                 float: left;

  122.                 width: 302px;

  123.                 margin:0px 52px 0 0;

  124.         }

  125.         /* Footer */

  126. 

  127. 

  128. 

  129. 

  130. /* Left & Right alignment */

  131. 

  132. .fleft { float:left;font-size:100%;vertical-align:text-bottom;}

  133. .fright { float:right;}

  134. .clear { clear:both;}

  135. 

  136. .col-1, .col-2, .col-3 { float:left;}

  137. 

  138. .alignright { text-align:right;}

  139. .aligncenter { text-align:center;}

  140. 

  141. .wrapper {

  142.         width:100%;

  143.         overflow:hidden;

  144. }

  145. 

  146. /* The inside class provides consistent padding. To be used often! */

  147. .inside{ padding: 20px 37px 30px 37px; }

  148. 

  149. .imagebox{ padding:50px 0px 0px 0px;}

  150. 

  151. /*----- form defaults -----*/

  152. input, select, textarea {

  153.         font-family: sans-serif;

  154.         font-size:1em;

  155.         vertical-align:middle;

  156.         font-weight:normal;

  157. }

  158. 

  159. /*----- other -----*/

  160. figure {

  161. 

  162.         margin-bottom:5px;

  163. 

  164. }

  165. 

  166. img {padding:0px;}

  167. 

  168. legend {

  169.   padding-top:0;

  170.   padding-left:6px;

  171.   float:right; }

  172. 

  173. .img-indent {

  174.         margin:0 20px 0 0;

  175.         float:left;

  176. }

  177. .img-box {

  178.         width:100%;

  179.         overflow:hidden;

  180.         padding-bottom:15px;

  181. }

  182.         .img-box figure {

  183.                 float:left;

  184.                 margin:0 20px 0 0;

  185.                 padding:0;

  186.         }

  187. 

  188. .extra-wrap {

  189.         overflow:hidden;

  190. }

  191. 

  192. p {margin-bottom:18px;}

  193. .p1 { margin-bottom:9px;}

  194. .p2 { margin-bottom:18px;}

  195. .p3 { margin-bottom:27px;}

  196. 

  197. pmain{

  198.        margin-bottom:18px;

  199.        font-size:120%;

  200. 

  201. }

  202. 

  203. /*----- txt, links, lines, titles -----*/

  204. a {

  205.         color:#5D8BAA/* XX-WHITE #2D5B7A */;

  206.         outline:none;

  207. 	text-decoration:none;

  208. }

  209. a:hover{

  210.         text-decoration:none;

  211. 	color:#8a8a8a;

  212. }

  213. 

  214. h1 {

  215.         font-size:34px;

  216.         line-height:1.2em;

  217.         color:#fff;

  218.         font-weight:normal;

  219. /*        background:url(../images/logo.png) no-repeat 0 0;*/

  220.         padding:6px 0 8px 0px;

  221.         position:absolute;

  222.         left: 0px;

  223.         top:6px;

  224. 

  225. }

  226.         h1 a {

  227.                 color:#fff;

  228.                 text-decoration:none;

  229.         }

  230. h2.pointer a{

  231. 		font-family: sans-serif;

  232.         font-size:30px;

  233.         line-height:1.2em;

  234.         font-weight:200;

  235.         color:#5D8BAA/* XX-WHITE #2D5B7A */;

  236.         margin-bottom:22px;

  237. }

  238. h2.pointer a:hover{

  239. 		color:#8a8a8a;

  240. }

  241. h2 {

  242. 		font-family: sans-serif;

  243.         font-size:30px;

  244.         line-height:1.2em;

  245.         font-weight:200;

  246.         color:#F1F2F2/* XX-WHITE #212222 */;

  247.         margin-bottom:22px;

  248. }

  249.         h2 a {

  250.                 color:#F1F2F2/* XX-WHITE #212222 */;

  251.                 text-decoration:none;

  252.                 font-size:24px;

  253.         }

  254.         h2 span {

  255.                 color:#8a8a8a;

  256.         }

  257. h3 {

  258. 		font-family: sans-serif;

  259. 		font-weight: 300;

  260.         font-size:120%;

  261.         margin-bottom:6px;

  262. 	    color:#E1E2E2/* XX-WHITE #212222 */;

  263. }

  264.         h3 a {

  265. 	        text-decoration:none;

  266. 	        color:#E1E2E2/* XX-WHITE #212222 */; }

  267.         h3 a:hover {

  268.                 color:#8a8a8a;

  269.         }

  270. 

  271. #loopedSlider a {

  272.         color:#ff0000;

  273.         outline:none;

  274. 	text-decoration:none;

  275. }

  276. #loopedSlider a:hover{

  277.         color:#F1F2F2/* XX-WHITE #212222 */;

  278.         text-decoration:none;

  279. }

  280. 

  281. /*==================boxes====================*/

  282. .main-box {

  283.         border-top:5px solid #040404/* XX-WHITE #f9f9f9 */;

  284.         background:#040404/* XX-WHITE #f9f9f9 */;

  285.         width:100%;

  286.         flex:1;

  287. }

  288. 

  289. 

  290. .contacts {

  291.         padding-bottom:20px;

  292. }

  293.         .contacts li {

  294.                 width:100%;

  295.                 overflow:hidden;

  296.         }

  297.                 .contacts li strong {

  298.                         float:left;

  299.                         width:95px;

  300.                 }

  301. 

  302. 

  303. .list1 {

  304.         margin-left:12px;

  305.         padding-bottom:18px;

  306. }

  307. .list1 li {

  308.         background:url(../images/arrow1.gif) no-repeat 0 6px;

  309.         padding:0 0 0 12px;

  310. }

  311. 

  312. 

  313. 

  314. /*===== header =====*/

  315. header nav {

  316.         float:right;

  317. }

  318.                 header nav ul li {

  319.                         float:left;

  320.                 }

  321.                         header nav ul li a {

  322. 								font-family:sans-serif;

  323. 								font-weight: 300;

  324.                                 font-size:22px;

  325.                                 color:#fff/* XX-WHITE #ddd */;

  326.                                 height:67px;

  327.                                 line-height:67px;

  328.                                 text-decoration:none;

  329.                                 width:101px;

  330.                                 text-align:center;

  331.                                 float:left;

  332.                                 background:#0B1C27;

  333.                                 background-image: gradient(top, #091720, #0B1C27); /* FF3.6 */

  334.                                 background-image: -moz-linear-gradient(top, #091720, #0B1C27); /* FF3.6 */

  335.                                 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #091720),color-stop(1, #0B1C27)); /* Saf4+, Chrome */

  336.         filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#091720', EndColorStr='#0B1C27'); /* IE6,IE7 */

  337.         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#091720', EndColorStr='#0B1C27')"; /* IE8 */

  338.                 }

  339.                 header nav ul li a.current, header nav ul li a:hover {

  340.                         padding-bottom:5px;

  341.                 }

  342. 

  343.                 header nav ul li:nth-of-type(2) a {

  344.                         background:#102634;

  345.                         background-image: -moz-linear-gradient(top, #102634, #132D3E); /* FF3.6 */

  346.                         background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #102634),color-stop(1, #132D3E)); /* Saf4+, Chrome */

  347.                         filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#102634', EndColorStr='#132D3E'); /* IE6,IE7 */

  348.                         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#102634', EndColorStr='#132D3E')"; /* IE8 */

  349.                 }

  350. 

  351.                 header nav ul li:nth-of-type(3) a {

  352.                         background:#343233;

  353.                         background-image: -moz-linear-gradient(top, #343233, #464344); /* FF3.6 */

  354.                         background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #343233),color-stop(1, #464344)); /* Saf4+, Chrome */

  355.                         filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#343233', EndColorStr='#464344'); /* IE6,IE7 */

  356.                         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#343233', EndColorStr='#464344')"; /* IE8 */

  357.                 }

  358.                 header nav ul li:nth-of-type(4) a {

  359.                         background:#4F4842;

  360.                         background-image: -moz-linear-gradient(top, #4F4842, #605750); /* FF3.6 */

  361.                         background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4F4842),color-stop(1, #605750)); /* Saf4+, Chrome */

  362.                         filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#4F4842', EndColorStr='#605750'); /* IE6,IE7 */

  363.                         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4F4842', EndColorStr='#605750')"; /* IE8 */

  364.                 }

  365.                 header nav ul li:nth-of-type(5) a {

  366.                         background:#746C55;

  367.                         background-image: -moz-linear-gradient(top, #746C55, #7E755C); /* FF3.6 */

  368.                         background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #746C55),color-stop(1, #7E755C)); /* Saf4+, Chrome */

  369.                         filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#746C55', EndColorStr='#7E755C'); /* IE6,IE7 */

  370.                         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#746C55', EndColorStr='#7E755C')"; /* IE8 */

  371.                 }

  372.                 header nav ul li:nth-of-type(6) a {

  373.                         background:#90866A;

  374.                         background-image: -moz-linear-gradient(top, #90866A, #A89D7B); /* FF3.6 */

  375.                         background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #90866A),color-stop(1, #A89D7B)); /* Saf4+, Chrome */

  376.                         filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#90866A', EndColorStr='#A89D7B'); /* IE6,IE7 */

  377.                         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#90866A', EndColorStr='#A89D7B')"; /* IE8 */

  378.                 }

  379. 

  380. 

  381. 

  382. 

  383. /*===== gallery =====*/

  384. .roundabout-holder  {

  385.         width:850px;

  386.         height:496px;

  387.         margin:0 auto;

  388. }

  389. .roundabout-moveable-item {

  390.    width: 646px;

  391.    height: 416px;

  392.    cursor: pointer;

  393.          border:3px solid #ccc;

  394.          border:3px solid rgba(0, 0, 0, 0.08);

  395.    border-radius:4px;

  396.          -moz-border-radius:4px;

  397.          -webkit-border-radius:4px;

  398. }

  399.         .roundabout-moveable-item img{

  400.                 width:100%;

  401.         }

  402. .roundabout-in-focus {

  403.         border:3px solid rgba(0, 0, 0, 0.2);

  404. }

  405. 

  406. 

  407. /*===== content =====*/

  408. .content {

  409. 

  410. }

  411.         .content img, aside img {

  412.                 border:1px solid #3B3B3B/* XX-WHITE #EBEBEB */;

  413. 				padding:2px;

  414.                 border-radius:4px;

  415.                 -moz-border-radius:4px;

  416.                 -webkit-border-radius:4px;

  417.         }

  418.         .content img:hover {

  419.                 border-color:#bbb;

  420.         }

  421. 

  422. 

  423. .team-list li {

  424.         width:100%;

  425.         overflow:hidden;

  426.         padding-bottom:43px;

  427. }

  428. .team-list li:last-child {

  429.         padding-bottom:0;

  430. }

  431.         .team-list li figure {

  432.                 float:left;

  433.                 margin:0 20px 0 0;

  434.                 padding:0;

  435.         }

  436. 

  437. 

  438. /*--- loopedSlider styles ---*/

  439. /*

  440.  * Required

  441. */

  442. #loopedSlider .wrap { width:295px; height:295px; overflow:hidden; position:relative;}

  443. #loopedSlider .slides { position:absolute; top:0; left:0; }

  444. #loopedSlider .slides div { position:absolute; top:0; width:295px; display:none; }

  445. /*

  446.  * Optional

  447. */

  448. #loopedSlider { width:295px; position:relative; clear:both; }

  449. #loopedSlider .nav-controls {

  450.         width:100%;

  451.         overflow:hidden;

  452.         padding-top:10px;

  453. }

  454. #loopedSlider li {

  455.         display:inline;

  456. }

  457. #loopedSlider li a.previous {

  458.         float:left;

  459. }

  460. #loopedSlider li a.next {

  461.         float:right;

  462. }

  463. 

  464. /*--- images styles ---*/

  465. 

  466. 

  467. /*#imagens { width:295px; height:170px; overflow:hidden; position:relative;}*/

  468. 

  469. 

  470. /*----- forms -----*/

  471. #contacts-form {

  472.         clear:right;

  473.         width:100%;

  474.         overflow:hidden;

  475. }

  476.         #contacts-form fieldset {

  477.                 border:none;

  478.                 float:left;

  479.         }

  480.                 #contacts-form .field {

  481.                         clear:both;

  482.                 }

  483.                         #contacts-form label {

  484.                                 float:left;

  485.                                 width:110px;

  486.                                 line-height:18px;

  487.                                 padding-bottom:6px;

  488.                                 font-weight:bold;

  489.                         }

  490.                         #contacts-form input {

  491.                                 width:205px;

  492.                                 padding:1px 0 1px 3px;

  493.                                 background:none;

  494.                                 border:1px solid #e5e5e5;

  495.                                 color:#616161;

  496.                                 float:left

  497.                         }

  498.                         #contacts-form input:invalid {

  499.                                 border-color:red;

  500.                         }

  501.                         #contacts-form textarea {

  502.                                 width:450px;

  503.                                 height:215px;

  504.                                 padding:1px 0 1px 3px;

  505.                                 background:none;

  506.                                 border:1px solid #e5e5e5;

  507.                                 color:#616161;

  508.                                 margin-bottom:12px;

  509.                                 overflow:auto;

  510.                                 float:left;

  511.                         }

  512.                         #contacts-form div:last-child {

  513.                                 padding-left:110px;

  514.                         }

  515. 

  516. /*==================lightbox========================*/

  517. 

  518. #lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}

  519. #lightbox img{ width: auto; height: auto;}

  520. #lightbox a img{ border: none; }

  521. 

  522. #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

  523. #imageContainer{ padding: 10px; }

  524. 

  525. #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

  526. #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

  527. #imageContainer>#hoverNav{ left: 0;}

  528. #hoverNav a{ outline: none;}

  529. 

  530. #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(../images/nolabel.gif); /* Trick IE into showing hover */ display: block; }

  531. #prevLink { left: 0; float: left;}

  532. #nextLink { right: 0; float: right;}

  533. #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

  534. #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

  535. 

  536. #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

  537. 

  538. #imageData{	padding:0 10px; color: #666; }

  539. #imageData #imageDetails{ width: 70%; float: left; text-align: left; }

  540. #imageData #caption{ font-weight: bold;	}

  541. #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}

  542. #imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}

  543. 

  544. #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

  545. a.hidden{ display:none;}

  546. 

  547. /*==================menuslider========================*/

  548. 

  549. .button {

  550. position:absolute;

  551. }

  552. .button img {

  553. margin-bottom:10px;

  554. }

  555. 

  556. .menu_button {

  557. height: 16px;

  558. width: 92px;

  559. margin: auto;

  560. }

  561. 

  562. .menu_class {

  563. }

  564. .the_menu {

  565. display:none;

  566. width:300px;

  567. }

  568. .the_menu li {

  569. background-color: #040404/* XX-WHITE #ffffff */;

  570. }

  571. .the_menu li a {

  572. font-family:sans-serif;

  573. font-weight: 200;

  574. color:#5D9BAA/* XX-WHITE #2D5B7A */;

  575. text-decoration:none;

  576. padding:0px 10px 0px 5px;

  577. display:block;

  578. font-size:100%;

  579. }

  580. .the_menu li a:hover {

  581. padding:0px 10px 0px 5px;

  582. color: #8a8a8a;

  583. }

  584. .formleftside{

  585. position:relative;

  586. left:10px;

  587. bottom:5px;

  588. }

  589. .rslides {

  590.   position: relative;

  591.   list-style: none;

  592.   overflow: hidden;

  593.   width: 100%;

  594.   padding: 0;

  595.   margin: 0;

  596.   }

  597. 

  598. .rslides li {

  599.   -webkit-backface-visibility: hidden;

  600.   position: absolute;

  601.   display: none;

  602.   width: 100%;

  603.   left: 0;

  604.   top: 0;

  605.   }

  606. 

  607. .rslides li:first-child {

  608.   position: relative;

  609.   display: block;

  610.   float: left;

  611.   }

  612. 

  613. .rslides img {

  614.   display: block;

  615.   height: auto;

  616.   float: left;

  617.   width: 100%;

  618.   border: 0;

  619.   }

  620. 

  621.   .centered-btns_nav {

  622.   z-index: 10;

  623.   position: absolute;

  624.   -webkit-tap-highlight-color: rgba(0,0,0,0);

  625.   top: 50%;

  626.   left: 0;

  627.   opacity: 0.7;

  628.   text-indent: -9999px;

  629.   overflow: hidden;

  630.   text-decoration: none;

  631.   height: 61px;

  632.   width: 38px;

  633.   background: transparent url(../images/themes.gif) no-repeat left top;

  634.   margin-top: -45px;

  635.   }

  636. 

  637. .centered-btns_nav:active {

  638.   opacity: 1.0;

  639.   }

  640. 

  641. .centered-btns_nav.next {

  642.   left: auto;

  643.   background-position: right top;

  644.   right: 0;

  645.   }

  646. 

  647. .transparent-btns_nav {

  648.   z-index: 3;

  649.   position: absolute;

  650.   -webkit-tap-highlight-color: rgba(0,0,0,0);

  651.   top: 0;

  652.   left: 0;

  653.   display: block;

  654.   background: #fff; /* Fix for IE6-9 */

  655.   opacity: 0;

  656.   filter: alpha(opacity=1);

  657.   width: 48%;

  658.   text-indent: -9999px;

  659.   overflow: hidden;

  660.   height: 91%;

  661.   }

  662. 

  663. .transparent-btns_nav.next {

  664.   left: auto;

  665.   right: 0;

  666.   }

  667. 

  668. .large-btns_nav {

  669.   z-index: 10;

  670.   position: absolute;

  671.   -webkit-tap-highlight-color: rgba(0,0,0,0);

  672.   opacity: 0.6;

  673.   text-indent: -9999px;

  674.   overflow: hidden;

  675.   top: 0;

  676.   bottom: 0;

  677.   left: 0;

  678.   background: #000 url(../images/themes.gif) no-repeat left 50%;

  679.   width: 38px;

  680.   }

  681. 

  682. .large-btns_nav:active {

  683.   opacity: 1.0;

  684.   }

  685. 

  686. .large-btns_nav.next {

  687.   left: auto;

  688.   background-position: right 50%;

  689.   right: 0;

  690.   }

  691. 

  692. .centered-btns_nav:focus,

  693. .transparent-btns_nav:focus,

  694. .large-btns_nav:focus {

  695.   outline: none;

  696.   }

  697. 

  698. .centered-btns_tabs,

  699. .transparent-btns_tabs,

  700. .large-btns_tabs {

  701.   margin-top: 10px;

  702.   text-align: right;

  703.   }

  704. 

  705. .centered-btns_tabs li,

  706. .transparent-btns_tabs li,

  707. .large-btns_tabs li {

  708.   display: inline;

  709.   float: none;

  710.   _float: left;

  711.   *float: left;

  712.   margin-right: 5px;

  713.   }

  714. 

  715. .centered-btns_tabs a,

  716. .transparent-btns_tabs a,

  717. .large-btns_tabs a {

  718.   text-indent: -9999px;

  719.   overflow: hidden;

  720.   -webkit-border-radius: 15px;

  721.   -moz-border-radius: 15px;

  722.   border-radius: 15px;

  723.   background: #ccc;

  724.   background: rgba(0,0,0, .2);

  725.   display: inline-block;

  726.   _display: block;

  727.   *display: block;

  728.   -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);

  729.   -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);

  730.   box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);

  731.   width: 6px;

  732.   height: 6px;

  733.   }

  734. 

  735. .centered-btns_here a,

  736. .transparent-btns_here a,

  737. .large-btns_here a {

  738.   background: #222;

  739.   background: rgba(0,0,0, .8);

  740.   }

  741.