home *** CD-ROM | disk | FTP | other *** search
/ Neil's C++ Stuff / 2016-02-neilstuff-weebly.iso / files / theme / main_style.css < prev    next >
Cascading Style Sheet File  |  2016-02-05  |  16KB  |  780 lines
  1. /* Variables
  2. ------------------------------------------------------------------
  3. {
  4.   Color: [
  5.      {
  6.       value: 'lilac',
  7.       sample: '#bd5353',
  8.       MainColor: '#bd5353',
  9.       NormalColor: '#bd5353',
  10.       HoverColor: '#e67f7f',
  11.       NavColor: '#903f3f',
  12.       SubNavColor: '#723131',
  13.       LandingBg: '#f7f2eb'
  14.     },
  15.     {
  16.       value: 'pink',
  17.       sample: '#e465ad',
  18.       MainColor: '#e465ad',
  19.       NormalColor: '#e465ad',
  20.       HoverColor: '#ff8ece',
  21.       NavColor: '#d73e95',
  22.       SubNavColor: '#b91673',
  23.       LandingBg: '#fcf2f3'
  24.     },
  25.     {
  26.       value: 'orange',
  27.       sample: '#e78238',
  28.       MainColor: '#e78238',
  29.       NormalColor: '#e78238',
  30.       HoverColor: '#ffa05a',
  31.       NavColor: '#d4691a',
  32.       SubNavColor: '#c95601',
  33.       LandingBg: '#fdf6f1'
  34.     },
  35.     {
  36.       value: 'blue',
  37.       sample: '#376a8a',
  38.       MainColor: '#376a8a',
  39.       NormalColor: '#3c769b',
  40.       HoverColor: '#4e9ccd',
  41.       NavColor: '#24597a',
  42.       SubNavColor: '#124666',
  43.       LandingBg: '#f1f4f3'
  44.     },
  45.     {
  46.       value: 'gold',
  47.       sample: '#ebb058',
  48.       MainColor: '#ebb058',
  49.       NormalColor: '#d29234',
  50.       HoverColor: '#ebb058',
  51.       NavColor: '#d29234',
  52.       SubNavColor: '#b8730e',
  53.       LandingBg: '#fcf5eb'
  54.     },
  55.     {
  56.       value: 'green',
  57.       sample: '#518c53',
  58.       MainColor: '#518c53',
  59.       NormalColor: '#5a9e5d',
  60.       HoverColor: '#7ac37e',
  61.       NavColor: '#3e713f',
  62.       SubNavColor: '#2d562e',
  63.       LandingBg: '#f1f6ea'
  64.     },
  65.     {
  66.       value: 'purple',
  67.       sample: '#856f9c',
  68.       MainColor: '#856f9c',
  69.       NormalColor: '#856f9c',
  70.       HoverColor: '#b093ce',
  71.       NavColor: '#664b82',
  72.       SubNavColor: '#4f3769',
  73.       LandingBg: '#f6f1f5'
  74.     },
  75.     {
  76.       value: 'turquoise',
  77.       sample: '#53bdbc',
  78.       MainColor: '#53bdbc',
  79.       NormalColor: '#53bdbc',
  80.       HoverColor: '#6ad8d7',
  81.       NavColor: '#2a8382',
  82.       SubNavColor: '#175d5c',
  83.       LandingBg: '#f2f4f0'
  84.     }
  85.   ]
  86. }
  87. ------------------------------------------------------------------
  88. */
  89.  
  90.  
  91. /* General Styling and Structure
  92. --------------------------------------------------------------------------------*/
  93.  
  94. h3 {
  95.     font-size: 1.3em;
  96.     margin: 0 0 10px 0;
  97. }
  98.  
  99. a {
  100.     text-decoration: none;
  101.     color: $NormalColor;
  102. }
  103.  
  104. a:hover {
  105.     color: $HoverColor;
  106. }
  107.  
  108. a img {
  109.     border: 0;
  110. }
  111.  
  112. body {
  113.     padding: 0;
  114.     font-family: Arial, Helvetica, sans-serif;
  115.     font-size: 13px;
  116.     color: #878787;
  117.     margin: 0;
  118.     background: #f6f0e7 url(container-bg-$Color.png) center top repeat-y;
  119. }
  120.  
  121. h2 {
  122.     font-size: 1.4em;
  123.     margin: 0;
  124.     padding: .3em 0;
  125.     line-height: 1.3;
  126.     font-family: "Lato", Arial, Helvetica, sans-serif;
  127.     font-weight: 700;
  128.     color: $MainColor;
  129.     text-transform: uppercase;
  130. }
  131.  
  132. p {
  133.     font-size: 1em;
  134.     line-height: 1.5;
  135.     margin: 0;
  136.     padding: .5em 0;
  137. }
  138.  
  139. blockquote {
  140.     font-style:italic;
  141.     border-left:4px solid $normalColor;
  142.     margin:10px 0 10px 0;
  143.     padding-left:20px;
  144.     line-height:1.5;
  145.     color:#888;
  146. }
  147.  
  148. #content p {
  149.     color: #878787;
  150. }
  151.  
  152. #container {
  153.     margin: 0 auto;
  154.     width: 956px;
  155.     padding: 0 20px 0 26px;
  156. }
  157.  
  158. #sidebar {
  159.     float: left;
  160.     width: 222px;
  161.     padding: 22px 9px 0 10px;
  162. }
  163.  
  164. #main-wrap {
  165.     float: right;
  166.     width: 710px;
  167. }
  168.  
  169. #header {
  170.     clear: both;
  171.     padding: 0 0 0 0;
  172. }
  173.  
  174. .wsite-logo,
  175. .wsite-logo a {
  176.     color: #ffffff;
  177.     display: inline-block;
  178.     text-decoration: none;
  179.     text-transform: uppercase;
  180.     font-size: 36px;
  181.     color: #ffffff;
  182.     font-family: "Lato", Arial, Helvetica, sans-serif;
  183.     font-weight: 700;
  184.     -webkit-text-stroke-width: 0.3px;
  185.     padding-left: 7px;
  186. }
  187.  
  188. #header-right a {
  189.     color: #bd5353;
  190. }
  191.  
  192. #header-right a:hover {
  193.     color: #e67f7f;
  194. }
  195.  
  196. /* Header Right Area
  197. --------------------------------------------------------------------------------*/
  198.  
  199. #header-right {
  200.     height: 90px;
  201. }
  202.  
  203. #header-right,
  204. #header-right table {
  205.     float: right;
  206.     border-collapse: collapse;
  207.     border-spacing: 0;
  208. }
  209.  
  210. #header-right td {
  211.     padding: 0;
  212.     vertical-align: middle;
  213.     text-align: right;
  214. }
  215.  
  216. /* TOP RIGHT: Phone Number
  217. --------------------------------------------------------------------------------*/
  218.  
  219. #header-right .phone-number .wsite-text {
  220.     color: #878787;
  221.     font-size: 12px;
  222.     font-weight: normal;
  223.     font-family: Arial, Helvetica, sans-serif;
  224.     margin: 20px 0 0 15px;
  225. }
  226.  
  227. /* TOP RIGHT: Content Area
  228. --------------------------------------------------------------------------------*/
  229.  
  230. #header-right .wsite-social {
  231.     vertical-align: middle;
  232.     margin: 0 0 0 10px;
  233. }
  234.  
  235.  
  236. .wsite-social-item {
  237.     width: 23px;
  238.     height: 23px;
  239.     margin: 0 0 0 3px;
  240.     background-image:url(social-dark.png);
  241. }
  242.  
  243. #footer .wsite-social-item {
  244.     background-image:url(social-lightgold.png);
  245. }
  246.  
  247. .wsite-social-facebook {background-position:0 0;}
  248.     .wsite-social-facebook:hover {background-position:0 -23px;}
  249.     .wsite-social-facebook:active {background-position:0 -46px;}
  250. .wsite-social-pinterest {background-position:-23px 0;}
  251.     .wsite-social-pinterest:hover {background-position:-23px -23px;}
  252.     .wsite-social-pinterest:active {background-position:-23px -46px;}
  253. .wsite-social-twitter {background-position:-46px 0;}
  254.     .wsite-social-twitter:hover {background-position:-46px -23px;}
  255.     .wsite-social-twitter:active {background-position:-46px -46px;}
  256. .wsite-social-linkedin {background-position:-69px 0;}
  257.     .wsite-social-linkedin:hover {background-position:-69px -23px;}
  258.     .wsite-social-linkedin:active {background-position:-69px -46px;}
  259. .wsite-social-mail {background-position:-92px 0;}
  260.     .wsite-social-mail:hover {background-position:-92px -23px;}
  261.     .wsite-social-mail:active {background-position:-92px -46px;}
  262. .wsite-social-rss {background-position:-115px 0;}
  263.     .wsite-social-rss:hover {background-position:-115px -23px;}
  264.     .wsite-social-rss:active {background-position:-115px -46px;}
  265. .wsite-social-flickr {background-position:-138px 0;}
  266.     .wsite-social-flickr:hover {background-position:-138px -23px;}
  267.     .wsite-social-flickr:active {background-position:-138px -46px;}
  268. .wsite-social-plus {background-position:-161px 0;}
  269.     .wsite-social-plus:hover {background-position:-161px -23px;}
  270.     .wsite-social-plus:active {background-position:-161px -46px;}
  271. .wsite-social-vimeo {background-position:-184px 0;}
  272.     .wsite-social-vimeo:hover {background-position:-184px -23px;}
  273.     .wsite-social-vimeo:active {background-position:-184px -46px;}
  274. .wsite-social-yahoo {background-position:-207px 0;}
  275.     .wsite-social-yahoo:hover {background-position:-207px -23px;}
  276.     .wsite-social-yahoo:active {background-position:-207px -46px;}
  277. .wsite-social-youtube {background-position:-230px 0;}
  278.     .wsite-social-youtube:hover {background-position:-230px -23px;}
  279.     .wsite-social-youtube:active {background-position:-230px -46px;}
  280.  
  281. /* TOP RIGHT: Search Box
  282. --------------------------------------------------------------------------------*/
  283.  
  284. #header-right .search {
  285. }
  286.  
  287. #header-right .wsite-search {
  288.     padding: 0 0 0 15px;
  289.     vertical-align: middle;
  290. }
  291.  
  292. #header-right .wsite-search-input {
  293.     width: 140px;
  294.     height: 24px;
  295.     border: none;
  296.     padding: 11px 7px 9px 10px;
  297.     color: #878787;
  298.     font-size: 12px;
  299.     font-family: Arial, Helvetica, sans-serif;
  300.     background: url(input-bg.png) no-repeat;
  301. }
  302.  
  303. #header-right .wsite-search-button {
  304.     width: 23px;
  305.     height: 32px;
  306.     border: none;
  307.     margin: 0;
  308.     padding: 0;
  309.     background: url(submit-bg.png) no-repeat;
  310. }
  311.  
  312. /* side-nav
  313. --------------------------------------------------------------------------------*/
  314.  
  315. #avmenu {
  316.     clear: left;
  317.     margin: 70px 0 0;
  318.     padding: 0;
  319. }
  320.  
  321. #avmenu ul {
  322.     list-style: none;
  323.     margin: 0;
  324.     padding: 0;
  325. }
  326.  
  327. #avmenu li {
  328.     list-style: none;
  329. }
  330.  
  331. #avmenu li a {
  332.     font-weight: 400;
  333.     text-decoration: none;
  334.     color: #fff;
  335.     font-family: "Lato", Arial, Helvetica, sans-serif;
  336.     font-size: 15px;
  337.     display: block;
  338.     line-height: 1;
  339.     margin: 0;
  340.     padding: 10px 5px 10px 14px;
  341.     border-bottom: 1px solid $NavColor;
  342. }
  343.  
  344. #avmenu ul > li:last-child a,
  345. #avmenu ul > span:last-child li a {
  346.     border-bottom: none;
  347. }
  348.  
  349. #avmenu li#active a,
  350. #avmenu a:hover {
  351.     color: #fff;
  352.     background: $NavColor;
  353. }
  354.  
  355. /* Navigation Drop-Down Menu Customization
  356. --------------------------------------------------------------------------------*/
  357.  
  358. #wsite-menus .wsite-menu {
  359.     border-top: 1px solid $NavColor;
  360.     position: relative;
  361.     top: -1px;
  362. }
  363.  
  364. #wsite-menus .wsite-menu li a {
  365.     padding: 8px;
  366.     background: $NavColor;
  367.     border: none;
  368.     border-bottom: 1px solid $MainColor;
  369.     text-decoration: none;
  370.     font-family: Arial, Helvetica, sans-serif;
  371.     color: #fff;
  372. }
  373.  
  374. #wsite-menus .wsite-menu li a:hover {
  375.     color: #fff;
  376.     background: $SubNavColor;
  377. }
  378.  
  379. /* main
  380. --------------------------------------------------------------------------------*/
  381.  
  382. #main {
  383.     margin: 0 7px 0 13px;
  384. }
  385.  
  386. #content {
  387.     margin: 0;
  388.     padding: 20px 0;
  389.     min-height: 400px;
  390.     overflow-x: visible !important;
  391.     overflow-x: hidden;
  392. }
  393.  
  394. #banner {
  395. }
  396.  
  397. .tall-header-page .wsite-header {
  398.     width: 710px;
  399.     height: 324px;
  400.     background: url(banner-tall.jpg) no-repeat;
  401. }
  402.  
  403. /* PAGE TYPE: banner-tall
  404. --------------------------------------------------------------------------------*/
  405.  
  406. .short-header-page .wsite-header {
  407.     width: 710px;
  408.     height: 184px;
  409.     background: url(banner-short.jpg) no-repeat;
  410. }
  411.  
  412. /* TOP RIGHT: banner-landing
  413. --------------------------------------------------------------------------------*/
  414.  
  415. .landing-page #banner {
  416.     background: $LandingBg;
  417. }
  418.  
  419. #bannerleft {
  420.     clear: left;
  421.     float: left;
  422.     width: 375px;
  423. }
  424.  
  425. .landing-page .wsite-header {
  426.     width: 416px;
  427.     height: 375px;
  428.     background: url(banner-landing.jpg) no-repeat;
  429. }
  430.  
  431. .landing-banner-outer {
  432.     display: table;
  433.     #position: relative;
  434.     overflow: hidden;
  435. }
  436.  
  437. .landing-banner-mid {
  438.     #position: absolute;
  439.     #top: 50%;
  440.     display: table-cell;
  441.     vertical-align: middle;
  442. }
  443.  
  444. .landing-banner-inner {
  445.     #position: relative;
  446.     #top: -50%;
  447. }
  448.  
  449. #bannerright {
  450.     float: right;
  451.     width: 245px;
  452.     height: 375px;
  453.     margin: 0 22px;
  454. }
  455.  
  456. #bannerright h2 {
  457.     color: $MainColor;
  458.     font-size: 26px;
  459.     font-weight: normal;
  460.     -webkit-text-stroke-width: 0.2px;
  461.     padding: 0px;
  462.     line-height: 26px;
  463. }
  464.  
  465. #bannerright p {
  466.     color: #414141;
  467.     padding: 20px 0px;
  468.     line-height: 140%;
  469.     margin: 0;
  470. }
  471.  
  472. #bannerright .wsite-button {
  473.     margin: 0;
  474. }
  475.  
  476. /* TOP RIGHT: banner-short
  477. --------------------------------------------------------------------------------*/
  478.  
  479. .very-tall-header-page .wsite-header {
  480.     width: 760px;
  481.     height: 225px;
  482.     background: url(banner-tall.jpg) no-repeat;
  483. }
  484.  
  485. /* PAGE TYPE: nobanner
  486. --------------------------------------------------------------------------------*/
  487.  
  488. .no-header-page #banner {
  489.     height: auto;
  490.     padding: 0;
  491.     display: none;
  492. }
  493.  
  494. .no-header-page #content {
  495.     border-top: 5px solid #ebe3d7;
  496.     padding-top: 12px;
  497. }
  498.  
  499. /* PAGE TYPE: banner-splash
  500. --------------------------------------------------------------------------------*/
  501.  
  502. .splash-page {
  503.     margin: 0 auto;
  504.     padding: 0;
  505.     background: #f4f4f4 url(splash-bodybg.jpg) top center repeat-y;
  506. }
  507.  
  508. .splash-page #header {
  509.     width: 570px;
  510. }
  511.  
  512. .splash-page #header-right {
  513.     float: right;
  514.     padding-right: 8px;
  515. }
  516.  
  517. .splash-page #banner {
  518.     width: 560px;
  519.     height: 115px;
  520.     border: none;
  521.     padding: 5px 0 0 0;
  522. }
  523.  
  524. .splash-page .wsite-header {
  525.     width: 560px;
  526.     height: 115px;
  527.     border: none;
  528.     background: url(banner-splash.jpg) no-repeat;
  529. }
  530.  
  531. .splash-page #wrap {
  532.     width: 560px;
  533.     padding: 0 10px 0 10px;
  534. }
  535.  
  536. .splash-page #content {
  537.     width: 538px;
  538. }
  539.  
  540. .splash-page #footer {
  541.     width: 560px;
  542. }
  543.  
  544. /* Footer
  545. --------------------------------------------------------------------------------*/
  546.  
  547. #footer {
  548.     clear: both;
  549.     padding: 45px 7px 50px 0;
  550.     color: #878787;
  551.     font-size: 12px;
  552.     font-family: Arial, Helvetica, sans-serif;
  553.     border-top: 5px solid #ebe3d7;
  554.     text-align: right;
  555. }
  556.  
  557. #footer p {
  558.     color: #878787;
  559.     font-size: 12px;
  560. }
  561.  
  562. #footer blockquote {font-size:11px; color:#999;}
  563.  
  564. #footer a {
  565.     color: #a59b8c;
  566. }
  567.  
  568. #footer a:hover {
  569.     color: #cab99f;
  570. }
  571.  
  572. #footer span {
  573.     vertical-align: middle;
  574. }
  575.  
  576. #footer h2 {
  577.     font-size: 15px;
  578.     margin: 0 0 2px;
  579.     padding: .3em 0;
  580.     line-height: 1.5;
  581.     font-family: "Lato", Arial, Helvetica, sans-serif;
  582.     font-weight: 700;
  583.     color: $MainColor;
  584.     border-bottom:1px solid #EBE3D7;
  585. }
  586.  
  587. .wsite-footer {  /* make sure enough space between element footer and attribution */
  588.     margin-bottom: 15px;
  589. }
  590.  
  591. /* Form Customization
  592. --------------------------------------------------------------------------------*/
  593.  
  594. .wsite-form-label {
  595.     display: inline-block;
  596.     color: #878787;
  597.     font-family: Arial, Helvetica, sans-serif;
  598.     font-size: 1em;
  599.     padding: 12px 0 5px 0;
  600. }
  601.  
  602. .form-radio-container {
  603.     color: #878787;
  604.     font-size: 1em;
  605.     font-family: Arial, Helvetica, sans-serif;
  606. }
  607.  
  608. .wsite-form-input, .wsite-search-element-input {
  609.     font-family: Arial, Helvetica, sans-serif;
  610.     font-size: 1em;
  611.     color: #878787;
  612.     background: #fff;
  613.     border: 1px solid #ddd8d1;
  614.     padding: 8px 4px 5px !important;
  615.     line-height: 1;
  616.     background: url#fff (field.png);
  617.     -webkit-border-radius: 3px;
  618.     -moz-border-radius: 3px;
  619.     border-radius: 3px;
  620. }
  621.  
  622. .form-select {
  623.     color: #878787;
  624.     border: 1px solid #ddd8d1;
  625.     font-size: 1em;
  626.     font-family: Arial, Helvetica, sans-serif;
  627.     padding: 3px 4px;
  628.     height: 27px;
  629.     line-height: 27px;
  630.     background: #fff;
  631.     -webkit-border-radius: 3px;
  632.     -moz-border-radius: 3px;
  633.     border-radius: 3px;
  634. }
  635.  
  636.  
  637. /* Footer Form Customization
  638. --------------------------------------------------------------------------------*/
  639.  
  640. .wsite-form-container {
  641.     margin-top:0px !important;
  642.     text-align:left;
  643. }
  644.  
  645. .wsite-footer .wsite-form-label {
  646.     font-size: 1em;
  647.     padding: 5px 0 2px 0;
  648. }
  649.  
  650. .wsite-footer .form-radio-container {
  651.     font-size:1em;
  652. }
  653.  
  654. .wsite-footer .wsite-form-input {
  655.     font-size: 1em;
  656.     width: 100% !important;
  657.  
  658. }
  659.  
  660. .wsite-footer .form-select {
  661.     width: 100%;
  662. }
  663.  
  664. /* Buttons
  665. --------------------------------------------------------------------------------*/
  666.  
  667. /*
  668.   Buttons are styled with background image sprites. There are 4 unique image files:
  669.    - small & normal-colored  (button_small_grey.png)
  670.    - large & normal-colored  (button_large_grey.png)
  671.    - small & highlight-colored  (button_small_orange.png)
  672.    - large & highlight-colored  (button_large_orange.png)
  673.  
  674.   Each of these 4 types of buttons must define a :hover state (when user's mouse is over)
  675.   as well as an :active state (when the user presses down).
  676.  
  677.   Look at the CSS (especially the inner .wsite-button-inner wrapper), as well as the
  678.   image files to understand how the liquid-width nature of these buttons work.
  679.  */
  680.  
  681. /* small */
  682.  
  683. .wsite-button {
  684.     color: #fff !important;
  685.     font-family: Arial, Helvetica, sans-serif;
  686.     height: 34px;
  687.     display: inline-block;
  688.     font-size: 12px;
  689.     border: none;
  690.     font-weight: bold;
  691.     font-size: 13px;
  692.     text-decoration: none;
  693.     padding: 0 15px 0 0;
  694.     background: url(button.png) no-repeat 100% -105px;
  695.     text-shadow:0 -1px 0 rgba(0,0,0,0.9);
  696. }
  697.  
  698. .wsite-button:hover {
  699.     background-position: 100% -140px;
  700. }
  701.  
  702. .wsite-button:active {
  703.     background-position: 100% -175px;
  704. }
  705.  
  706. .wsite-button-inner {
  707.     height: 34px;
  708.     line-height: 34px;
  709.     display: block;
  710.     font-size: 14px;
  711.     font-weight: bold;
  712.     border: none;
  713.     text-decoration: none;
  714.     padding: 0 10px 0 25px;
  715.     background: url(button.png) no-repeat 0 0;
  716. }
  717.  
  718. .wsite-button:hover .wsite-button-inner {
  719.     background-position: 0 -35px;
  720. }
  721.  
  722. .wsite-button:active .wsite-button-inner {
  723.     background-position: 0 -70px;
  724. }
  725.  
  726. /* large */
  727.  
  728. .wsite-button-large {
  729.     height: 41px;
  730.     background: url(button_large.png) no-repeat 100% -126px;
  731.     padding: 0 15px 0 0;
  732. }
  733.  
  734. .wsite-button-large:hover {
  735.     background-position: 100% -168px;
  736. }
  737.  
  738. .wsite-button-large:active {
  739.     background-position: 100% -210px;
  740. }
  741.  
  742. .wsite-button-large .wsite-button-inner {
  743.     height: 41px;
  744.     line-height: 41px;
  745.     padding: 0 10px 0 25px;
  746.     background: url(button_large.png) no-repeat 0 0;
  747. }
  748.  
  749. .wsite-button-large:hover .wsite-button-inner {
  750.     background-position: 0 -42px;
  751. }
  752.  
  753. .wsite-button-large:active .wsite-button-inner {
  754.     background-position: 0 -84px;
  755. }
  756.  
  757. /* highlight */
  758.  
  759. /*
  760. Making the highlighted versions of the buttons is easy because we just need
  761. to switch out the background images. This works because the different button
  762. states (normal, :hover, :active) have their sprite coordinates in the same places.
  763. */
  764.  
  765. .wsite-button-large.wsite-button-highlight {
  766.     background-image: url(button_large_highlight_$Color.png);
  767. }
  768.  
  769. .wsite-button-large.wsite-button-highlight .wsite-button-inner {
  770.     background-image: url(button_large_highlight_$Color.png);
  771. }
  772.  
  773. .wsite-button-highlight {
  774.     background-image: url(button_highlight_$Color.png);
  775. }
  776.  
  777. .wsite-button-highlight .wsite-button-inner {
  778.     background-image: url(button_highlight_$Color.png);
  779. }
  780.