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.
7 Commits
1 Branch
7.5MB
Tree: fe7593cd4c
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'fe7593cd4c'
${ noResults }
Website/css-white/style.css

778 lines
21KB
Raw Blame History 

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

  2. article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }

  3. mark, rp, rt, ruby, summary, time{ display: inline }

  4. 

  5. /* Global properties ======================================================== */

  6. body { 

  7.         background:#F4F4F4; 

  8.         font-family: 'Raleway', sans-serif;

  9. 		font-weight: 200;

  10.         font-size:120%; 

  11.         line-height:1.125em;

  12.         color: #272727/*#7A7A7A*/;

  13. }

  14. html { min-width:1000px;}

  15. html, body { height:100%;background-color:#1E1F1F;}

  16. 

  17. 

  18. 

  19. /* Global Structure ============================================================= */

  20. .container {

  21.         margin: 0 auto;

  22.         position: relative;

  23.         width: 1000px;

  24.         font-size:.8125em;

  25. }

  26. 

  27.         /* Header */

  28.         header{

  29.                 height:72px;

  30.                 overflow:hidden;

  31.                 background:url(../images/header-bg_white.gif) 0 0 repeat-x;

  32.         }

  33.         

  34.         /*Gallery*/

  35.         #gallery {

  36.                 height:496px;

  37.                 overflow:hidden;

  38.                 background:url(../images/gallerry-bg.jpg) 0 0 repeat-x;

  39.         }

  40.         #gallery_plugins {

  41.                 height:296px;

  42.                 overflow:hidden;

  43.                 background:url(../images/gallerry-bg.jpg) 0 0 repeat-x;

  44.         }

  45. 		.individual_plugin_container{

  46. 				position:absolute;

  47. 				left:0;

  48. 				top:60px;

  49. 		}

  50. 		.text_download{

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

  52. 				z-index:100;

  53. 				position:absolute;

  54. 				color:#cfcdcd;

  55. 				font-size:100%;

  56. 				left:45px;

  57. 				top:215px;		

  58. 		}

  59. 		.text_download a{

  60. 			

  61. 				color:#cfcdcd;

  62. 		}

  63. 		.text_download a:hover{

  64. 				color:#9eb2c5;

  65. 				

  66. 		}

  67. 		.linuxLogo{

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

  69. 		}

  70. 		.windowsLogo{

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

  72. 		}

  73.         /* Content */

  74.         .content {

  75.                 float: left;

  76.                 width: 572px;

  77.         }

  78.         .content_463 {

  79.                 float: left;

  80.                 width: 443px;

  81. 				padding-right:20px;

  82.         }

  83. 		.content_463 img {

  84.                 margin-bottom:15px;

  85.         }

  86. 		

  87. 		.padlef50{

  88. 		

  89. 		padding: 0 0 0 20px;

  90. 		}

  91. 		

  92.         /* Sidebar */

  93.         aside{

  94.                 float: left;

  95.                 width: 302px;

  96.                 margin:60px 52px 0 0;

  97.         }

  98.          .homeAside{

  99.                 float: left;

  100.                 width: 302px;

  101.                 margin:0px 52px 0 0;

  102.         }               

  103.         /* Footer */

  104.         footer{

  105.                 padding:18px 0 18px 0;

  106.                 border-top: 5px solid #D6D6D6;

  107.         }

  108. 

  109. 

  110. 

  111. 

  112. /* Left & Right alignment */

  113. 

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

  115. .fright { float:right;}

  116. .clear { clear:both;}

  117. 

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

  119. 

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

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

  122. 

  123. .wrapper { 

  124.         width:100%;

  125.         overflow:hidden;

  126. }

  127. 

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

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

  130. 

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

  132. 

  133. /*----- form defaults -----*/

  134. input, select, textarea { 

  135.         font-family: 'Raleway', sans-serif;

  136.         font-size:1em;

  137.         vertical-align:middle;

  138.         font-weight:normal;

  139. }

  140. 

  141. /*----- other -----*/

  142. figure { 

  143.   

  144.         margin-bottom:5px;

  145. 	

  146. }

  147. 

  148. img {padding:0px;}

  149. 

  150. legend {

  151.   padding-top:0;

  152.   padding-left:6px;

  153.   float:right; }

  154. 

  155. .img-indent { 

  156.         margin:0 20px 0 0; 

  157.         float:left;

  158. }

  159. .img-box { 

  160.         width:100%; 

  161.         overflow:hidden; 

  162.         padding-bottom:15px;

  163. }

  164.         .img-box figure { 

  165.                 float:left; 

  166.                 margin:0 20px 0 0;

  167.                 padding:0;

  168.         }

  169. 

  170. .extra-wrap { 

  171.         overflow:hidden;

  172. }

  173. 

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

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

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

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

  178. 

  179. pmain{

  180.        margin-bottom:18px;

  181.        font-size:120%;

  182.        

  183. }

  184. 

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

  186. a {

  187.         color:#2D5B7A; 

  188.         outline:none;

  189. 	text-decoration:none;

  190. }

  191. a:hover{

  192.         text-decoration:none;

  193. 	color:#8a8a8a; 

  194. }

  195. 

  196. h1 {

  197.         font-size:34px;

  198.         line-height:1.2em;

  199.         color:#fff;

  200.         font-weight:normal;

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

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

  203.         position:absolute;

  204.         left: 0px;

  205.         top:6px;

  206. 

  207. }

  208.         h1 a {

  209.                 color:#fff;

  210.                 text-decoration:none;

  211.         }

  212. h2.pointer a{

  213. 		font-family: 'Raleway', sans-serif;

  214.         font-size:30px;

  215.         line-height:1.2em;

  216.         font-weight:200;

  217.         color:#2D5B7A;

  218.         margin-bottom:22px;

  219. }

  220. h2.pointer a:hover{

  221. 		color:#8a8a8a; 

  222. }

  223. h2 {

  224. 		font-family: 'Raleway', sans-serif;

  225.         font-size:30px;

  226.         line-height:1.2em;

  227.         font-weight:200;

  228.         color:#212222;

  229.         margin-bottom:22px;

  230. }

  231.         h2 a {

  232.                 color:#212222;

  233.                 text-decoration:none;

  234.                 font-size:24px;

  235.         }

  236.         h2 span {

  237.                 color:#8a8a8a;

  238.         }

  239. h3 {

  240. 		font-family: 'Raleway', sans-serif;

  241. 		font-weight: 300;

  242.         font-size:120%;

  243.         margin-bottom:6px;

  244. 	    color:#212222;

  245. }

  246.         h3 a {

  247. 	        text-decoration:none; 

  248. 	        color:#212222; }

  249.         h3 a:hover {

  250.                 color:#8a8a8a;

  251.         }

  252.         

  253. #loopedSlider a {

  254.         color:#ff0000; 

  255.         outline:none;

  256. 	text-decoration:none;

  257. }

  258. #loopedSlider a:hover{

  259.         color:#212222;

  260.         text-decoration:none;

  261. }

  262. 

  263. /*==================boxes====================*/

  264. .main-box {

  265.         border-top:5px solid #f9f9f9;

  266.         background:#f9f9f9;

  267.         width:100%;

  268. /*         min-height:80%; */

  269. }

  270. 

  271. 

  272. .contacts {

  273.         padding-bottom:20px;

  274. }

  275.         .contacts li {

  276.                 width:100%;

  277.                 overflow:hidden;

  278.         }

  279.                 .contacts li strong {

  280.                         float:left;

  281.                         width:95px;

  282.                 }

  283. 

  284. 

  285. .list1 {

  286.         margin-left:12px;

  287.         padding-bottom:18px;

  288. }

  289. .list1 li {

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

  291.         padding:0 0 0 12px;

  292. }

  293. 

  294. 

  295. 

  296. /*===== header =====*/

  297. header nav {

  298.         float:right;

  299. }

  300.                 header nav ul li {

  301.                         float:left;

  302.                 }

  303.                         header nav ul li a {

  304. 								font-family:'Raleway', sans-serif;

  305. 								font-weight: 300;

  306.                                 font-size:22px;

  307.                                 color:#ddd;

  308.                                 height:67px;

  309.                                 line-height:67px;

  310.                                 text-decoration:none;

  311.                                 width:101px;

  312.                                 text-align:center;

  313.                                 float:left;

  314.                                 background:#0B1C27;

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

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

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

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

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

  320.                 }

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

  322.                         padding-bottom:5px;

  323.                 }

  324.                 

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

  326.                         background:#102634;

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

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

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

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

  331.                 }

  332. 

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

  334.                         background:#343233;

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

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

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

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

  339.                 }

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

  341.                         background:#4F4842;

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

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

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

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

  346.                 }

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

  348.                         background:#746C55;

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

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

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

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

  353.                 }

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

  355.                         background:#90866A;

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

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

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

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

  360.                 }

  361. 

  362. 

  363. 

  364. 

  365. /*===== gallery =====*/

  366. .roundabout-holder  { 

  367.         width:850px;

  368.         height:496px;

  369.         margin:0 auto;

  370. }

  371. .roundabout-moveable-item {

  372.    width: 646px;

  373.    height: 416px;

  374.    cursor: pointer;

  375.          border:3px solid #ccc;

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

  377.    border-radius:4px;

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

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

  380. }

  381.         .roundabout-moveable-item img{

  382.                 width:100%;

  383.         }

  384. .roundabout-in-focus {

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

  386. }

  387. 

  388. 

  389. /*===== content =====*/

  390. .content {

  391.         

  392. }

  393.         .content img, aside img {

  394.                 border:1px solid #EBEBEB;

  395. 				padding:2px;

  396.                 border-radius:4px;

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

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

  399.         }

  400.         .content img:hover {

  401.                 border-color:#bbb;

  402.         }

  403.         

  404. 

  405. /*--- news list styles ---*/

  406.         .news li {

  407.                 overflow:hidden;

  408.                 position:relative;

  409.                 padding:0 0 10px 84px;

  410.         }

  411.         .news li:last-child {

  412.                 padding-bottom:0;

  413.         }

  414.         

  415.                 .news li figure {

  416. 						font-family: 'Raleway', sans-serif;

  417. 						font-weight: 300;

  418.                         width:65px;

  419.                         height:65px;

  420.                         background:url(../images/date-none.gif) no-repeat 0 0;

  421.                         position:absolute;

  422.                         left:0;

  423.                         top:0;

  424.                         text-align:center;

  425.                         color:#818181;

  426.                         text-transform:uppercase;

  427.                 }

  428.                         .news li figure strong {

  429.                                 display:inline;

  430.                                 font-size:17px;

  431.                                 line-height:2.0em;

  432.                                 margin-bottom:-7px;

  433.                                 padding-top:4px;

  434.                         }

  435.                         .news li figure p {

  436.                                 display:inline;

  437.                                 font-size:17px;

  438.                                 line-height:0.1em;

  439. 								color:#272727;

  440. 								float:right;

  441. 								margin-right:3px;								

  442.                         }

  443. 

  444. .team-list li {

  445.         width:100%;

  446.         overflow:hidden;

  447.         padding-bottom:43px;

  448. }

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

  450.         padding-bottom:0;

  451. }

  452.         .team-list li figure {

  453.                 float:left;

  454.                 margin:0 20px 0 0;

  455.                 padding:0;

  456.         }

  457. 

  458. 

  459. /*--- loopedSlider styles ---*/

  460. /*

  461.  * Required 

  462. */

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

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

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

  466. /*

  467.  * Optional

  468. */

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

  470. #loopedSlider .nav-controls {

  471.         width:100%;

  472.         overflow:hidden;

  473.         padding-top:10px;

  474. }

  475. #loopedSlider li {

  476.         display:inline;

  477. }

  478. #loopedSlider li a.previous {

  479.         float:left;

  480. }

  481. #loopedSlider li a.next {

  482.         float:right;

  483. }

  484. 

  485. /*--- images styles ---*/

  486. 

  487. 

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

  489. 

  490. 

  491. /*===== footer =====*/

  492. footer {

  493.         color:#fff;

  494. 	background-color:#1E1F1F;

  495. }

  496.         footer .fleft {

  497.                 padding-left:40px;

  498.         }

  499.         footer .fright {

  500.                 padding-right:0px;

  501.         }

  502. footer a{color:#A3B6B6;}

  503. 

  504. footer a:hover{color:#ffffff;}

  505. 

  506. /*----- forms -----*/

  507. #contacts-form { 

  508.         clear:right;

  509.         width:100%;

  510.         overflow:hidden;

  511. }

  512.         #contacts-form fieldset { 

  513.                 border:none;

  514.                 float:left;

  515.         }

  516.                 #contacts-form .field { 

  517.                         clear:both;

  518.                 }

  519.                         #contacts-form label { 

  520.                                 float:left;

  521.                                 width:110px;

  522.                                 line-height:18px;

  523.                                 padding-bottom:6px;

  524.                                 font-weight:bold;

  525.                         }

  526.                         #contacts-form input {

  527.                                 width:205px;

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

  529.                                 background:none;

  530.                                 border:1px solid #e5e5e5;

  531.                                 color:#616161;

  532.                                 float:left

  533.                         }

  534.                         #contacts-form input:invalid {

  535.                                 border-color:red;

  536.                         }

  537.                         #contacts-form textarea { 

  538.                                 width:450px;

  539.                                 height:215px;

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

  541.                                 background:none;

  542.                                 border:1px solid #e5e5e5;

  543.                                 color:#616161;

  544.                                 margin-bottom:12px;

  545.                                 overflow:auto;

  546.                                 float:left;

  547.                         }

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

  549.                                 padding-left:110px;

  550.                         }

  551. 

  552. /*==================lightbox========================*/

  553. 

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

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

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

  557. 

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

  559. #imageContainer{ padding: 10px; }

  560. 

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

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

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

  564. #hoverNav a{ outline: none;}

  565. 

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

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

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

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

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

  571. 

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

  573. 

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

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

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

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

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

  579. 

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

  581. a.hidden{ display:none;}

  582. 

  583. /*==================menuslider========================*/

  584. 

  585. .button {

  586. position:absolute;

  587. }

  588. .button img {

  589. margin-bottom:10px;

  590. }

  591. 

  592. .menu_button {

  593. height: 16px;

  594. width: 92px;

  595. margin: auto;

  596. }

  597. 

  598. .menu_class {

  599. }

  600. .the_menu {

  601. display:none;

  602. width:300px;

  603. }

  604. .the_menu li {

  605. background-color: #ffffff;

  606. }

  607. .the_menu li a {

  608. font-family:'Raleway', sans-serif;

  609. font-weight: 200; 

  610. color:#2D5B7A;

  611. text-decoration:none;

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

  613. display:block;

  614. font-size:100%;        

  615. }

  616. .the_menu li a:hover {

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

  618. color: #8a8a8a;

  619. }

  620. .formleftside{ 

  621. position:relative;

  622. left:10px;

  623. bottom:5px;

  624. }

  625. .rslides {

  626.   position: relative;

  627.   list-style: none;

  628.   overflow: hidden;

  629.   width: 100%;

  630.   padding: 0;

  631.   margin: 0;

  632.   }

  633. 

  634. .rslides li {

  635.   -webkit-backface-visibility: hidden;

  636.   position: absolute;

  637.   display: none;

  638.   width: 100%;

  639.   left: 0;

  640.   top: 0;

  641.   }

  642. 

  643. .rslides li:first-child {

  644.   position: relative;

  645.   display: block;

  646.   float: left;

  647.   }

  648. 

  649. .rslides img {

  650.   display: block;

  651.   height: auto;

  652.   float: left;

  653.   width: 100%;

  654.   border: 0;

  655.   }

  656.   

  657.   .centered-btns_nav {

  658.   z-index: 10;

  659.   position: absolute;

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

  661.   top: 50%;

  662.   left: 0;

  663.   opacity: 0.7;

  664.   text-indent: -9999px;

  665.   overflow: hidden;

  666.   text-decoration: none;

  667.   height: 61px;

  668.   width: 38px;

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

  670.   margin-top: -45px;

  671.   }

  672. 

  673. .centered-btns_nav:active {

  674.   opacity: 1.0;

  675.   }

  676. 

  677. .centered-btns_nav.next {

  678.   left: auto;

  679.   background-position: right top;

  680.   right: 0;

  681.   }

  682. 

  683. .transparent-btns_nav {

  684.   z-index: 3;

  685.   position: absolute;

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

  687.   top: 0;

  688.   left: 0;

  689.   display: block;

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

  691.   opacity: 0;

  692.   filter: alpha(opacity=1);

  693.   width: 48%;

  694.   text-indent: -9999px;

  695.   overflow: hidden;

  696.   height: 91%;

  697.   }

  698. 

  699. .transparent-btns_nav.next {

  700.   left: auto;

  701.   right: 0;

  702.   }

  703. 

  704. .large-btns_nav {

  705.   z-index: 10;

  706.   position: absolute;

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

  708.   opacity: 0.6;

  709.   text-indent: -9999px;

  710.   overflow: hidden;

  711.   top: 0;

  712.   bottom: 0;

  713.   left: 0;

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

  715.   width: 38px;

  716.   }

  717. 

  718. .large-btns_nav:active {

  719.   opacity: 1.0;

  720.   }

  721. 

  722. .large-btns_nav.next {

  723.   left: auto;

  724.   background-position: right 50%;

  725.   right: 0;

  726.   }

  727. 

  728. .centered-btns_nav:focus,

  729. .transparent-btns_nav:focus,

  730. .large-btns_nav:focus {

  731.   outline: none;

  732.   }

  733. 

  734. .centered-btns_tabs,

  735. .transparent-btns_tabs,

  736. .large-btns_tabs {

  737.   margin-top: 10px;

  738.   text-align: right;

  739.   }

  740. 

  741. .centered-btns_tabs li,

  742. .transparent-btns_tabs li,

  743. .large-btns_tabs li {

  744.   display: inline;

  745.   float: none;

  746.   _float: left;

  747.   *float: left;

  748.   margin-right: 5px;

  749.   }

  750. 

  751. .centered-btns_tabs a,

  752. .transparent-btns_tabs a,

  753. .large-btns_tabs a {

  754.   text-indent: -9999px;

  755.   overflow: hidden;

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

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

  758.   border-radius: 15px;

  759.   background: #ccc;

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

  761.   display: inline-block;

  762.   _display: block;

  763.   *display: block;

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

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

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

  767.   width: 6px;

  768.   height: 6px;

  769.   }

  770. 

  771. .centered-btns_here a,

  772. .transparent-btns_here a,

  773. .large-btns_here a {

  774.   background: #222;

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

  776.   }

  777.