main.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545
  1. /* ==========================================================================
  2. Author's custom styles
  3. ========================================================================== */
  4. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  5. -webkit-transition: all 0.2s ease;
  6. -moz-transition: all 0.2s ease;
  7. -ms-transition: all 0.2s ease;
  8. -o-transition: all 0.2s ease;
  9. transition: all 0.2s ease;
  10. }
  11. body {
  12. font-family: 'Open Sans', sans-serif;
  13. }
  14. .navbar .nav {
  15. float:right;
  16. margin: 0;
  17. padding-top: 18px;
  18. }
  19. .navbar-inverse .brand, .navbar-inverse .nav > li > a {
  20. color: #484c51;
  21. font: 14px/24px 'Open Sans';
  22. font-weight: 200;
  23. }
  24. .navbar .nav li.currentNav {
  25. background: url(../img/navCurrentArrow.png) center 32px no-repeat;
  26. }
  27. .hero-unit {
  28. margin-bottom: 0;
  29. }
  30. .shaded {
  31. background: #f7f9f8;
  32. }
  33. .shaded img {
  34. margin: 8px 12px;
  35. }
  36. .articleCredits {
  37. padding-left: 12px;
  38. font: 12px/24px 'Open Sans';
  39. font-weight: 100;
  40. white-space: pre;
  41. }
  42. .fullwidth {
  43. padding: 30px;
  44. }
  45. body.contact .shaded img {
  46. margin: 0;
  47. }
  48. .map img {
  49. margin-top: 30px;
  50. float: left;
  51. }
  52. body.index .success, body.index .clients {
  53. margin-top: 0;
  54. }
  55. .success h2 {
  56. margin-top: 25px;
  57. }
  58. .testimonialAuthor {
  59. display: block;
  60. margin-bottom: 30px;
  61. font: 12px/24px 'Open Sans';
  62. color: #aa2b39;
  63. font-weight: 800;
  64. text-transform: uppercase;
  65. }
  66. .success hr, .events hr, .productnews hr {
  67. margin-top: 0;
  68. }
  69. .clients {
  70. background-color: #415a72;
  71. }
  72. .clients img {
  73. margin: 15px 21px;
  74. }
  75. .news {
  76. margin-bottom: 40px;
  77. }
  78. h2.homeSecTitles {
  79. color: #8d9caa;
  80. font-style: italic;
  81. font-family: 'Open Sans';
  82. font-weight: 800;
  83. text-transform: capitalize;
  84. margin-bottom: 0;
  85. }
  86. .success h3 {
  87. font-weight: 100;
  88. font-style: italic;
  89. font: 18px/30px 'Open Sans';
  90. color: #4f575b; margin: 25px 0;
  91. }
  92. .success img {
  93. margin: 30px 10px 10px 80px;
  94. }
  95. .about img {
  96. margin-bottom: 21px;
  97. }
  98. .carousel-inner {
  99. max-height: 387px;
  100. }
  101. .carousel-control {
  102. opacity: 1;
  103. background: none;
  104. border: none;
  105. border-radius: 0;
  106. }
  107. .carousel-caption h1 {
  108. text-transform:uppercase;
  109. margin-top: 20px;
  110. display:none;
  111. }
  112. .carousel-caption p {
  113. margin-top: 25px;
  114. font-weight: 100;
  115. font: 16px/24px 'Open Sans';
  116. color: #000;
  117. display: none;
  118. }
  119. .carousel-caption img {
  120. margin-top: 10px;
  121. }
  122. #myCarousel img {
  123. width: 100%;
  124. height: auto;
  125. }
  126. #myCarousel .carousel-control img {
  127. width: auto;
  128. }
  129. h1, h2, h3, h4, h5, h6 {
  130. font-weight: 100;
  131. font-family: 'Open Sans';
  132. font-weight: normal;
  133. }
  134. h2 {
  135. font: 18px/28px 'Open Sans';
  136. text-transform: uppercase;
  137. font-weight: 800;
  138. color: #373e4b;
  139. margin-bottom: 0;
  140. }
  141. h3 {
  142. font-size: 16px; line-height:26px;
  143. }
  144. p {
  145. font-size: 14px; line-height: 24px; color: #313131;
  146. }
  147. .lede {
  148. text-align: center;
  149. margin-bottom:20px;
  150. max-width: 80%;
  151. margin-left: 10%;
  152. }
  153. body.services .lede {
  154. max-width: 95%;
  155. margin-left: 2.5%;
  156. margin-top: 30px;
  157. }
  158. body.products .lede {
  159. margin-top: 30px;
  160. }
  161. .lede h3 {
  162. font-weight: 100;
  163. font: 24px/30px 'Open Sans';
  164. color: #aa2b39;
  165. }
  166. .lede h4 {
  167. font-weight: 100;
  168. font-style: italic;
  169. font: 20px/30px 'Open Sans';
  170. color: #373e4b;
  171. }
  172. body.services .lede h4 {
  173. font-size: 16px;
  174. line-height: 150%;
  175. }
  176. body.services .lede {
  177. margin-bottom: 30px;
  178. }
  179. body.about h1, body.services h1, body.contact h1 {
  180. font: 20px/30px 'Open Sans';
  181. font-style: italic;
  182. font-weight: 800;
  183. color: #4f575b;
  184. margin-top: 0;
  185. }
  186. .row-fluid {
  187. margin-top: 50px;
  188. }
  189. body.about h6 {
  190. margin: 0;
  191. font-weight: 100;
  192. font-style: italic;
  193. font-family: 'Open Sans';
  194. text-transform: uppercase;
  195. line-height: 80%;
  196. margin-bottom: 10px;
  197. color: #AA2B39;
  198. }
  199. body.services table {
  200. margin: 0;
  201. padding: 0;
  202. table-layout: fixed;
  203. }
  204. body.services table th, body.services table td {
  205. padding: 10px 0;
  206. text-align: left;
  207. }
  208. body.services table td {
  209. color: #373e4b;
  210. font-style: italic;
  211. font-weight: 100;
  212. font-family: 'Open Sans';
  213. width: 206px;
  214. }
  215. body.services table tr:last-child th, body.services table tr:last-child td {
  216. border-bottom: none;
  217. }
  218. body.services table tr:nth-child(even) {
  219. background: #eff3f1;
  220. }
  221. body.services table td:first-child {
  222. padding-left: 30px;
  223. }
  224. body.services table td.tableCenter {
  225. text-align: center;
  226. }
  227. .singleProduct ul {
  228. margin-left: 15px;
  229. }
  230. .singleProduct li {
  231. padding: 5px 0;
  232. }
  233. .btn-red {
  234. display:block;
  235. padding: 5px 0;
  236. background: #aa2b39;
  237. color: #FFF;
  238. font-style: italic;
  239. font-weight: 100;
  240. font-family: 'Open Sans';
  241. text-shadow: none;
  242. border: none;
  243. border-radius: 0;
  244. box-shadow: none;
  245. width: 100px;
  246. margin-left: 75px;
  247. }
  248. .btn-red:hover, .bth-red:focus {
  249. background-color: #9B1C2E;
  250. color: white;
  251. }
  252. body.contact .btn-red {
  253. margin-left: 0; margin-top: 5px;
  254. }
  255. #myCarousel .btn-red {
  256. margin-left: 12px; margin-top:-7px;
  257. }
  258. .map {
  259. border: 0; border-right: 1px solid #eee;
  260. }
  261. .map h2, .connect h2 {
  262. margin: 0;
  263. }
  264. .map img {
  265. padding-right: 30px;
  266. }
  267. .connect a {
  268. margin: 0 8px 0 0; display: block; float: left;
  269. }
  270. .connect a img:hover {
  271. margin-top: -5px;
  272. -webkit-transition: margin 0.2s ease-out;
  273. -moz-transition: margin 0.2s ease-out;
  274. -o-transition: margin 0.2s ease-out;
  275. transition: margin 0.2s ease-out;
  276. }
  277. footer {
  278. background: url(../images/footerBG.jpg) 50% 0 no-repeat;
  279. min-height: 340px;
  280. margin-top: 50px;
  281. position:relative;
  282. -webkit-background-size: cover; /*for webKit*/
  283. -moz-background-size: cover; /*Mozilla*/
  284. -o-background-size: cover; /*opera*/
  285. background-size: cover; /*generic*/
  286. }
  287. footer p, footer a {
  288. color: #FFF;
  289. font-weight: 100;
  290. font: 12px 'Open Sans';
  291. }
  292. footer a {
  293. display:block;
  294. float: left;
  295. margin: 0 0 6px 0;
  296. clear: left;
  297. }
  298. footer .row-fluid {
  299. margin-top: 30px;
  300. }
  301. .footerCol {
  302. width: 20%;
  303. float:left;
  304. }
  305. .footerCol h4 {
  306. color: #FFF;
  307. font-weight: 800;
  308. font: 14px/24px 'Open Sans';
  309. text-transform: uppercase;
  310. margin-bottom: 0;
  311. }
  312. footer .social a {
  313. clear: none;
  314. margin: 0 4px;
  315. }
  316. footer .social img:hover {
  317. margin-top: -5px;
  318. -webkit-transition: margin 0.2s ease-out;
  319. -moz-transition: margin 0.2s ease-out;
  320. -o-transition: margin 0.2s ease-out;
  321. transition: margin 0.2s ease-out;
  322. }
  323. body.contact footer, body.index footer {
  324. margin-top: 0;
  325. }
  326. .news img {
  327. max-width: 275px;
  328. height: auto;
  329. }
  330. .news h2, .news p, .events hr {
  331. max-width: 275px;
  332. }
  333. .productnews hr {
  334. max-width: 595px;
  335. }
  336. /* ==========================================================================
  337. Sphinx custom styles
  338. ========================================================================== */
  339. h1:hover > .headerlink,
  340. h2:hover > .headerlink,
  341. h3:hover > .headerlink,
  342. h4:hover > .headerlink,
  343. h5:hover > .headerlink,
  344. h6:hover > .headerlink,
  345. dt:hover > .headerlink { visibility: visible; }
  346. .sidebar .toctree-l1.current a {
  347. border-right: 5px solid #fcaf3e;
  348. }
  349. .line-block {
  350. display: block;
  351. margin-top: 1em;
  352. margin-bottom: 1em;
  353. }
  354. .line-block .line-block {
  355. margin-top: 0;
  356. margin-bottom: 0;
  357. margin-left: 1.5em;
  358. }
  359. div.header div.rel a {
  360. color: #fcaf3e;
  361. letter-spacing: .1em;
  362. text-transform: uppercase;
  363. }
  364. .descname {
  365. font-weight: bold;
  366. }
  367. .literal {
  368. background-color: #eeeeec;
  369. }
  370. blockquote {
  371. margin: 1em;
  372. }
  373. .footer, .footer a {
  374. color: #888a85;
  375. }
  376. div.admonition {
  377. font-size: 0.9em;
  378. margin: 1em 0 1em 0;
  379. padding: 0.5em 1em 0.5em 1em;
  380. border: 1px solid #ddd;
  381. }
  382. div.admonition p.admonition-title {
  383. font-weight: bold; color: #3465a4;
  384. }
  385. div.warning {
  386. border-color: #940000;
  387. }
  388. div.warning p.admonition-title {
  389. color: #940000;
  390. }
  391. div.viewcode-block:target {
  392. background-color: #f4debf;
  393. border-top: 1px solid #ac9;
  394. border-bottom: 1px solid #ac9;
  395. }
  396. /* ==========================================================================
  397. SaltStack custom styles
  398. ========================================================================== */
  399. .lit-docs {
  400. list-style-type: none;
  401. margin: 0;
  402. }
  403. .lit-item {
  404. padding-bottom: 2em;
  405. }
  406. .lit-annotation,
  407. .lit-content {
  408. display: inline-block;
  409. vertical-align: top;
  410. }
  411. .lit-annotation {
  412. width: 40.42553191489362%; /* span-5 */
  413. }
  414. .lit-content {
  415. width: 57.44680851063829%; /* span-7 */
  416. }
  417. /* Override a few Bootstrap-isms */
  418. .lit-annotation pre,
  419. .lit-content pre {
  420. word-break: normal;
  421. word-wrap: normal;
  422. white-space: pre;
  423. overflow-x: auto;
  424. }
  425. .lit-content pre {
  426. border: none;
  427. }
  428. .lit-container {
  429. position: relative;
  430. }
  431. .lit-background {
  432. position: absolute;
  433. top: -1px;
  434. bottom: 0;
  435. right: 1.1em;
  436. width: 57.44680851063829%; /* span-7 */
  437. z-index: -1;
  438. background-color: #f5f5f5;
  439. border: 1px solid #e5e5ee;
  440. border: 1px solid rgba(0, 0, 0, 0.15);
  441. -webkit-border-radius: 4px;
  442. -moz-border-radius: 4px;
  443. border-radius: 4px;
  444. }
  445. /* rST automatically puts the .container class on ``.. container`` directives
  446. * which conflicts with the bootstrap class of the same name. >.<
  447. */
  448. .scrollable.container {
  449. width: auto;
  450. }
  451. .scrollable {
  452. overflow-x:auto;
  453. position:relative;
  454. }
  455. /* Code blocks */
  456. pre {
  457. position: relative;
  458. border-top-width: 4px;
  459. padding-top: 18px; /* :before height */
  460. }
  461. .highlight-bash,
  462. .highlight-jinja,
  463. .highlight-python,
  464. .highlight-yaml {
  465. position: relative;
  466. }
  467. .highlight-bash:before,
  468. .highlight-jinja:before,
  469. .highlight-python:before,
  470. .highlight-yaml:before {
  471. z-index: 10;
  472. font-size: 9px;
  473. padding: 0.1em 0.8em;
  474. text-align: center;
  475. color: #999;
  476. display: block;
  477. position: absolute;
  478. border-radius: 0 3px 0 3px;
  479. border-top: none;
  480. border-right: none;
  481. background-color: #f1f1f1;
  482. top: 0;
  483. right: 0;
  484. height: 18px;
  485. }
  486. .highlight-bash pre {
  487. /* bit more subdued ... */
  488. border-color: #999;
  489. }
  490. .highlight-jinja pre {
  491. border-color: #e00a1b;
  492. }
  493. .highlight-python pre {
  494. border-color: #3377b0;
  495. }
  496. .highlight-yaml pre {
  497. border-color: #ccc;
  498. }
  499. .highlight-bash:before {
  500. content: 'BASH';
  501. background-color: #444;
  502. color: white;
  503. }
  504. .highlight-jinja:before {
  505. content: 'JINJA';
  506. background-color: #e00a1b;
  507. color: white;
  508. }
  509. .highlight-python:before {
  510. content: 'PYTHON';
  511. background-color: #3377b0;
  512. color: #ffe243;
  513. }
  514. .highlight-yaml:before {
  515. content: 'YAML';
  516. background-color: #ccc;
  517. color: black;
  518. }