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.

741 lines
21KB

  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. /* Global properties ======================================================== */
  5. body {
  6. background:#F4F4F4;
  7. font-family: 'Raleway', sans-serif;
  8. font-weight: 200;
  9. font-size:100%;
  10. line-height:1.125em;
  11. color:#BABABA;
  12. }
  13. html { min-width:1000px; }
  14. html, body { height:100%;background-color:#1E1F1F; }
  15. /* Global Structure ============================================================= */
  16. .container {
  17. margin: 0 auto;
  18. position: relative;
  19. width: 1000px;
  20. font-size:.8125em;
  21. }
  22. /* Header */
  23. header{
  24. height:72px;
  25. overflow:hidden;
  26. background:url(../images/header-bg_black.gif) 0 0 repeat-x;
  27. }
  28. /*Gallery*/
  29. #gallery {
  30. height:496px;
  31. overflow:hidden;
  32. background:url(../images/gallerry-bg_black.jpg) 0 0 repeat-x;
  33. }
  34. #gallery_plugins {
  35. height:296px;
  36. overflow:hidden;
  37. background:url(../images/gallerry-bg_black.jpg) 0 0 repeat-x;
  38. }
  39. /* Content */
  40. .content {
  41. float: left;
  42. width: 572px;
  43. }
  44. /* Sidebar */
  45. aside{
  46. float: left;
  47. width: 302px;
  48. margin:60px 52px 0 0;
  49. }
  50. .homeAside{
  51. float: left;
  52. width: 302px;
  53. margin:0px 52px 0 0;
  54. }
  55. /* Footer */
  56. footer{
  57. padding:18px 0 18px 0;
  58. border-top: 5px solid #1A1A1A;
  59. }
  60. /* Left & Right alignment */
  61. .fleft { float:left;font-size:100%;vertical-align:text-bottom;}
  62. .fright { float:right;}
  63. .clear { clear:both;}
  64. .col-1, .col-2, .col-3 { float:left;}
  65. .alignright { text-align:right;}
  66. .aligncenter { text-align:center;}
  67. .wrapper {
  68. width:100%;
  69. overflow:hidden;
  70. }
  71. /* The inside class provides consistent padding. To be used often! */
  72. .inside{ padding: 32px 37px 50px 37px; }
  73. .imagebox{ padding:50px 0px 0px 0px;}
  74. /*----- form defaults -----*/
  75. input, select, textarea {
  76. font-family: 'Raleway', sans-serif;
  77. font-size:1em;
  78. vertical-align:middle;
  79. font-weight:normal;
  80. }
  81. /*----- other -----*/
  82. figure {
  83. margin-bottom:5px;
  84. }
  85. img {padding:0px;}
  86. legend {
  87. padding-top:0;
  88. padding-left:6px;
  89. float:right; }
  90. .img-indent {
  91. margin:0 20px 0 0;
  92. float:left;
  93. }
  94. .img-box {
  95. width:100%;
  96. overflow:hidden;
  97. padding-bottom:15px;
  98. }
  99. .img-box figure {
  100. float:left;
  101. margin:0 20px 0 0;
  102. padding:0;
  103. }
  104. .extra-wrap {
  105. overflow:hidden;
  106. }
  107. p {margin-bottom:18px;}
  108. .p1 { margin-bottom:9px;}
  109. .p2 { margin-bottom:18px;}
  110. .p3 { margin-bottom:27px;}
  111. pmain{
  112. margin-bottom:18px;
  113. font-size:120%;
  114. }
  115. /*----- txt, links, lines, titles -----*/
  116. a {
  117. color:#5D8BAA;
  118. outline:none;
  119. text-decoration:none;
  120. }
  121. a:hover{
  122. text-decoration:none;
  123. color:#8a8a8a;
  124. }
  125. h1 {
  126. font-size:34px;
  127. line-height:1.2em;
  128. color:#fff;
  129. font-weight:normal;
  130. /* background:url(../images/logo.png) no-repeat 0 0;*/
  131. padding:6px 0 8px 0px;
  132. position:absolute;
  133. left:39px;
  134. top:6px;
  135. }
  136. h1 a {
  137. color:#fff;
  138. text-decoration:none;
  139. }
  140. h2.pointer a{
  141. font-family: 'Raleway', sans-serif;
  142. font-size:30px;
  143. line-height:1.2em;
  144. font-weight:200;
  145. color: #5D8BAA;
  146. margin-bottom:22px;
  147. }
  148. h2.pointer a:hover{
  149. color:#8a8a8a;
  150. }
  151. h2 {
  152. font-family: 'Raleway', sans-serif;
  153. font-size:30px;
  154. line-height:1.2em;
  155. font-weight:200;
  156. color:#F1F2F2;
  157. margin-bottom:22px;
  158. }
  159. h2 a {
  160. color:#F1F2F2;
  161. text-decoration:none;
  162. font-size:24px;
  163. }
  164. h2 span {
  165. color:#8a8a8a;
  166. }
  167. h3 {
  168. font-family: 'Raleway', sans-serif;
  169. font-weight: 300;
  170. font-size:120%;
  171. margin-bottom:6px;
  172. color:#E1E2E2;
  173. }
  174. h3 a {
  175. text-decoration:none;
  176. color:#FFFFFF; }
  177. h3 a:hover {
  178. color:#8a8a8a;
  179. }
  180. #loopedSlider a {
  181. color:#ff0000;
  182. outline:none;
  183. text-decoration:none;
  184. }
  185. #loopedSlider a:hover{
  186. color:#212222;
  187. text-decoration:none;
  188. }
  189. /*==================boxes====================*/
  190. .main-box {
  191. border-top:5px solid #040404;
  192. background:#040404;
  193. width:100%;
  194. /* min-height:80%; */
  195. }
  196. .contacts {
  197. padding-bottom:20px;
  198. }
  199. .contacts li {
  200. width:100%;
  201. overflow:hidden;
  202. }
  203. .contacts li strong {
  204. float:left;
  205. width:95px;
  206. }
  207. .list1 {
  208. margin-left:12px;
  209. padding-bottom:18px;
  210. }
  211. .list1 li {
  212. background:url(../images/arrow1.gif) no-repeat 0 6px;
  213. padding:0 0 0 12px;
  214. }
  215. /*===== header =====*/
  216. header nav {
  217. float:right;
  218. }
  219. header nav ul li {
  220. float:left;
  221. }
  222. header nav ul li a {
  223. font-family:'Raleway', sans-serif;
  224. font-weight: 300;
  225. font-size:22px;
  226. color:#fff;
  227. height:67px;
  228. line-height:67px;
  229. text-decoration:none;
  230. width:101px;
  231. text-align:center;
  232. float:left;
  233. background:#0B1C27;
  234. background-image: gradient(top, #091720, #0B1C27); /* FF3.6 */
  235. background-image: -moz-linear-gradient(top, #091720, #0B1C27); /* FF3.6 */
  236. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #091720),color-stop(1, #0B1C27)); /* Saf4+, Chrome */
  237. filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#091720', EndColorStr='#0B1C27'); /* IE6,IE7 */
  238. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#091720', EndColorStr='#0B1C27')"; /* IE8 */
  239. }
  240. header nav ul li a.current, header nav ul li a:hover {
  241. padding-bottom:5px;
  242. }
  243. header nav ul li:nth-of-type(2) a {
  244. background:#102634;
  245. background-image: -moz-linear-gradient(top, #102634, #132D3E); /* FF3.6 */
  246. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #102634),color-stop(1, #132D3E)); /* Saf4+, Chrome */
  247. filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#102634', EndColorStr='#132D3E'); /* IE6,IE7 */
  248. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#102634', EndColorStr='#132D3E')"; /* IE8 */
  249. }
  250. header nav ul li:nth-of-type(3) a {
  251. background:#343233;
  252. background-image: -moz-linear-gradient(top, #343233, #464344); /* FF3.6 */
  253. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #343233),color-stop(1, #464344)); /* Saf4+, Chrome */
  254. filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#343233', EndColorStr='#464344'); /* IE6,IE7 */
  255. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#343233', EndColorStr='#464344')"; /* IE8 */
  256. }
  257. header nav ul li:nth-of-type(4) a {
  258. background:#4F4842;
  259. background-image: -moz-linear-gradient(top, #4F4842, #605750); /* FF3.6 */
  260. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4F4842),color-stop(1, #605750)); /* Saf4+, Chrome */
  261. filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4F4842', EndColorStr='#605750'); /* IE6,IE7 */
  262. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4F4842', EndColorStr='#605750')"; /* IE8 */
  263. }
  264. header nav ul li:nth-of-type(5) a {
  265. background:#746C55;
  266. background-image: -moz-linear-gradient(top, #746C55, #7E755C); /* FF3.6 */
  267. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #746C55),color-stop(1, #7E755C)); /* Saf4+, Chrome */
  268. filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#746C55', EndColorStr='#7E755C'); /* IE6,IE7 */
  269. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#746C55', EndColorStr='#7E755C')"; /* IE8 */
  270. }
  271. header nav ul li:nth-of-type(6) a {
  272. background:#90866A;
  273. background-image: -moz-linear-gradient(top, #90866A, #A89D7B); /* FF3.6 */
  274. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #90866A),color-stop(1, #A89D7B)); /* Saf4+, Chrome */
  275. filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#90866A', EndColorStr='#A89D7B'); /* IE6,IE7 */
  276. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#90866A', EndColorStr='#A89D7B')"; /* IE8 */
  277. }
  278. /*===== gallery =====*/
  279. .roundabout-holder {
  280. width:850px;
  281. height:496px;
  282. margin:0 auto;
  283. }
  284. .roundabout-moveable-item {
  285. width: 646px;
  286. height: 416px;
  287. cursor: pointer;
  288. border:3px solid #ccc;
  289. border:3px solid rgba(0, 0, 0, 0.08);
  290. border-radius:4px;
  291. -moz-border-radius:4px;
  292. -webkit-border-radius:4px;
  293. }
  294. .roundabout-moveable-item img{
  295. width:100%;
  296. }
  297. .roundabout-in-focus {
  298. border:3px solid rgba(0, 0, 0, 0.2);
  299. }
  300. /*===== content =====*/
  301. .content {
  302. }
  303. .content img, aside img {
  304. border:1px solid #3B3B3B;
  305. padding:2px;
  306. border-radius:4px;
  307. -moz-border-radius:4px;
  308. -webkit-border-radius:4px;
  309. }
  310. .content img:hover {
  311. border-color:#bbb;
  312. }
  313. /*--- news list styles ---*/
  314. .news li {
  315. overflow:hidden;
  316. position:relative;
  317. padding:0 0 10px 84px;
  318. }
  319. .news li:last-child {
  320. padding-bottom:0;
  321. }
  322. .news li figure {
  323. font-family: 'Raleway', sans-serif;
  324. font-weight: 300;
  325. width:65px;
  326. height:65px;
  327. background:url(../images/date-none.gif) no-repeat 0 0;
  328. position:absolute;
  329. left:0;
  330. top:0;
  331. text-align:center;
  332. color:#818181;
  333. text-transform:uppercase;
  334. }
  335. .news li figure strong {
  336. display:inline;
  337. font-size:17px;
  338. line-height:2.0em;
  339. margin-bottom:-7px;
  340. padding-top:4px;
  341. }
  342. .news li figure p {
  343. display:inline;
  344. font-size:17px;
  345. line-height:0.1em;
  346. color:#f9f9f9;
  347. float:right;
  348. margin-right:3px;
  349. }
  350. .team-list li {
  351. width:100%;
  352. overflow:hidden;
  353. padding-bottom:43px;
  354. }
  355. .team-list li:last-child {
  356. padding-bottom:0;
  357. }
  358. .team-list li figure {
  359. float:left;
  360. margin:0 20px 0 0;
  361. padding:0;
  362. }
  363. /*--- loopedSlider styles ---*/
  364. /*
  365. * Required
  366. */
  367. #loopedSlider .wrap { width:295px; height:295px; overflow:hidden; position:relative;}
  368. #loopedSlider .slides { position:absolute; top:0; left:0; }
  369. #loopedSlider .slides div { position:absolute; top:0; width:295px; display:none; }
  370. /*
  371. * Optional
  372. */
  373. #loopedSlider { width:295px; position:relative; clear:both; }
  374. #loopedSlider .nav-controls {
  375. width:100%;
  376. overflow:hidden;
  377. padding-top:10px;
  378. }
  379. #loopedSlider li {
  380. display:inline;
  381. }
  382. #loopedSlider li a.previous {
  383. float:left;
  384. }
  385. #loopedSlider li a.next {
  386. float:right;
  387. }
  388. /*--- images styles ---*/
  389. /*#imagens { width:295px; height:170px; overflow:hidden; position:relative;}*/
  390. /*===== footer =====*/
  391. footer {
  392. color:#fff;
  393. background-color:#1E1F1F;
  394. }
  395. footer .fleft {
  396. padding-left:40px;
  397. }
  398. footer .fright {
  399. padding-right:0px;
  400. }
  401. footer a{color:#A3B6B6;}
  402. footer a:hover{color:#ffffff;}
  403. /*----- forms -----*/
  404. #contacts-form {
  405. clear:right;
  406. width:100%;
  407. overflow:hidden;
  408. }
  409. #contacts-form fieldset {
  410. border:none;
  411. float:left;
  412. }
  413. #contacts-form .field {
  414. clear:both;
  415. }
  416. #contacts-form label {
  417. float:left;
  418. width:110px;
  419. line-height:18px;
  420. padding-bottom:6px;
  421. font-weight:bold;
  422. }
  423. #contacts-form input {
  424. width:205px;
  425. padding:1px 0 1px 3px;
  426. background:none;
  427. border:1px solid #e5e5e5;
  428. color:#616161;
  429. float:left
  430. }
  431. #contacts-form input:invalid {
  432. border-color:red;
  433. }
  434. #contacts-form textarea {
  435. width:450px;
  436. height:215px;
  437. padding:1px 0 1px 3px;
  438. background:none;
  439. border:1px solid #e5e5e5;
  440. color:#616161;
  441. margin-bottom:12px;
  442. overflow:auto;
  443. float:left;
  444. }
  445. #contacts-form div:last-child {
  446. padding-left:110px;
  447. }
  448. /*==================lightbox========================*/
  449. #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
  450. #lightbox img{ width: auto; height: auto;}
  451. #lightbox a img{ border: none; }
  452. #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
  453. #imageContainer{ padding: 10px; }
  454. #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
  455. #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
  456. #imageContainer>#hoverNav{ left: 0;}
  457. #hoverNav a{ outline: none;}
  458. #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(../images/nolabel.gif); /* Trick IE into showing hover */ display: block; }
  459. #prevLink { left: 0; float: left;}
  460. #nextLink { right: 0; float: right;}
  461. #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
  462. #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
  463. #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
  464. #imageData{ padding:0 10px; color: #666; }
  465. #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
  466. #imageData #caption{ font-weight: bold; }
  467. #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
  468. #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
  469. #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
  470. a.hidden{ display:none;}
  471. /*==================menuslider========================*/
  472. .button {
  473. position:absolute;
  474. }
  475. .button img {
  476. margin-bottom:10px;
  477. }
  478. .menu_button {
  479. height: 16px;
  480. width: 92px;
  481. margin: auto;
  482. }
  483. .menu_class {
  484. }
  485. .the_menu {
  486. display:none;
  487. width:300px;
  488. }
  489. .the_menu li {
  490. background-color: #040404;
  491. }
  492. .the_menu li a {
  493. font-family:'Raleway', sans-serif;
  494. font-weight: 200;
  495. color:#5D9BAA;
  496. text-decoration:none;
  497. padding:0px 10px 0px 5px;
  498. display:block;
  499. font-size:100%;
  500. }
  501. .the_menu li a:hover {
  502. padding:0px 10px 0px 5px;
  503. color: #8a8a8a;
  504. }
  505. .formleftside{
  506. position:relative;
  507. left:10px;
  508. bottom:5px;
  509. }
  510. .rslides {
  511. position: relative;
  512. list-style: none;
  513. overflow: hidden;
  514. width: 100%;
  515. padding: 0;
  516. margin: 0;
  517. }
  518. .rslides li {
  519. -webkit-backface-visibility: hidden;
  520. position: absolute;
  521. display: none;
  522. width: 100%;
  523. left: 0;
  524. top: 0;
  525. }
  526. .rslides li:first-child {
  527. position: relative;
  528. display: block;
  529. float: left;
  530. }
  531. .rslides img {
  532. display: block;
  533. height: auto;
  534. float: left;
  535. width: 100%;
  536. border: 0;
  537. }
  538. .centered-btns_nav {
  539. z-index: 10;
  540. position: absolute;
  541. -webkit-tap-highlight-color: rgba(0,0,0,0);
  542. top: 50%;
  543. left: 0;
  544. opacity: 0.7;
  545. text-indent: -9999px;
  546. overflow: hidden;
  547. text-decoration: none;
  548. height: 61px;
  549. width: 38px;
  550. background: transparent url(../images/themes.gif) no-repeat left top;
  551. margin-top: -45px;
  552. }
  553. .centered-btns_nav:active {
  554. opacity: 1.0;
  555. }
  556. .centered-btns_nav.next {
  557. left: auto;
  558. background-position: right top;
  559. right: 0;
  560. }
  561. .transparent-btns_nav {
  562. z-index: 3;
  563. position: absolute;
  564. -webkit-tap-highlight-color: rgba(0,0,0,0);
  565. top: 0;
  566. left: 0;
  567. display: block;
  568. background: #fff; /* Fix for IE6-9 */
  569. opacity: 0;
  570. filter: alpha(opacity=1);
  571. width: 48%;
  572. text-indent: -9999px;
  573. overflow: hidden;
  574. height: 91%;
  575. }
  576. .transparent-btns_nav.next {
  577. left: auto;
  578. right: 0;
  579. }
  580. .large-btns_nav {
  581. z-index: 10;
  582. position: absolute;
  583. -webkit-tap-highlight-color: rgba(0,0,0,0);
  584. opacity: 0.6;
  585. text-indent: -9999px;
  586. overflow: hidden;
  587. top: 0;
  588. bottom: 0;
  589. left: 0;
  590. background: #000 url(../images/themes.gif) no-repeat left 50%;
  591. width: 38px;
  592. }
  593. .large-btns_nav:active {
  594. opacity: 1.0;
  595. }
  596. .large-btns_nav.next {
  597. left: auto;
  598. background-position: right 50%;
  599. right: 0;
  600. }
  601. .centered-btns_nav:focus,
  602. .transparent-btns_nav:focus,
  603. .large-btns_nav:focus {
  604. outline: none;
  605. }
  606. .centered-btns_tabs,
  607. .transparent-btns_tabs,
  608. .large-btns_tabs {
  609. margin-top: 10px;
  610. text-align: right;
  611. }
  612. .centered-btns_tabs li,
  613. .transparent-btns_tabs li,
  614. .large-btns_tabs li {
  615. display: inline;
  616. float: none;
  617. _float: left;
  618. *float: left;
  619. margin-right: 5px;
  620. }
  621. .centered-btns_tabs a,
  622. .transparent-btns_tabs a,
  623. .large-btns_tabs a {
  624. text-indent: -9999px;
  625. overflow: hidden;
  626. -webkit-border-radius: 15px;
  627. -moz-border-radius: 15px;
  628. border-radius: 15px;
  629. background: #ccc;
  630. background: rgba(0,0,0, .2);
  631. display: inline-block;
  632. _display: block;
  633. *display: block;
  634. -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  635. -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  636. box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  637. width: 6px;
  638. height: 6px;
  639. }
  640. .centered-btns_here a,
  641. .transparent-btns_here a,
  642. .large-btns_here a {
  643. background: #222;
  644. background: rgba(0,0,0, .8);
  645. }