API tools faq
paste
Guest User

Untitled

a guest
Jun 14th, 2013
43
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 43.52 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. * Skeleton V1.2
  3. * Copyright 2011, Dave Gamache
  4. * www.getskeleton.com
  5. * Free to use under the MIT license.
  6. * http://www.opensource.org/licenses/mit-license.php
  7. * 6/20/2012
  8. */
  9.  
  10. /* Table of Content
  11. ==================================================
  12.     #Site Styles
  13.     #Page Styles
  14.     #Media Queries
  15.     #Font-Face */
  16.  
  17. @import url(http://fonts.googleapis.com/css?family=Sintony:400,700|Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext);
  18.  @import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,200);
  19. /* #Site Styles
  20. ================================================== */
  21.  
  22. .aboutUs {
  23.     width: 100%;
  24.     height: auto;
  25.     background: #E3D367;
  26.     overflow: auto;
  27.     float: left;
  28.     margin-bottom: 10px;
  29.     margin-right: 10px;
  30.     min-height: 250px;
  31. }
  32. .aboutUs:3n {
  33.  width: 290px;
  34.  height: auto;
  35.  background: #E3D367;
  36.  overflow: auto;
  37.  float:left;
  38.  margin-bottom: 10px;
  39.  min-height:250px;
  40. }
  41. .aboutUs h1 {
  42.     margin: 10px;
  43. }
  44. .aboutUs p {
  45.     margin: .5em;
  46. }
  47. .info1 img {
  48.     width: 350px;
  49.     height: 450px;
  50.     -webkit-transition: all .5s ease-in-out;
  51.     -moz-transition: all .5s ease-in-out;
  52.     -o-transition: all .5s ease-in-out;
  53.     transition: all .5s ease-in-out;
  54. }
  55. .info3 img {
  56.     width: 325px;
  57.     height: 450px;
  58.     bottom: 55px;
  59.     position: relative;
  60.     -webkit-transition: all .5s ease-in-out;
  61.     -moz-transition: all .5s ease-in-out;
  62.     -o-transition: all .5s ease-in-out;
  63.     transition: all .5s ease-in-out;
  64. }
  65. .categoryList, .footerTitle {
  66.     font-size: 20px;
  67.     line-height: 30px;
  68.     text-indent: 10px;
  69. }
  70. #wrapper {
  71.     width: 100%;
  72.     height: 100px;
  73.     position: absolute;
  74.     left: 0;
  75. }
  76. #carousel div {
  77.     text-align: center;
  78.     width: 300px;
  79.     height: auto;
  80.     float: left;
  81.     position: relative;
  82. }
  83. #carousel div img {
  84.     border: none;
  85.     width: 210px;
  86.     height: 150px;
  87.     margin-top: 10px;
  88. }
  89. #carousel div span {
  90.     text-align: center;
  91.     color: #333;
  92.     font-family: Arial, Geneva, SunSans-Regular, sans-serif;
  93.     font-size: 14px;
  94.     font-weight: bold;
  95.     display: block;
  96. }
  97. /* #Page Styles
  98. ================================================== */
  99. a:link {
  100.     text-decoration: none;
  101. }
  102. a:visited {
  103.     text-decoration: none;
  104. }
  105. .nav a .item:hover {
  106.     text-decoration: none;
  107.     color: #4C8081;
  108. }
  109. .nav a .item:hover img {
  110.     margin-right: 10px;
  111. }
  112. a:hover {
  113.     text-decoration: none;
  114.     color: #FFF;
  115. }
  116. a:active {
  117.     text-decoration: none;
  118. }
  119.  
  120.  
  121. /* #Media Queries
  122. ================================================== */
  123.  
  124.     @media only screen and (min-width:960px) {
  125. .container {
  126.     background: #FFF;
  127.     padding: 25px;
  128. }
  129. .miniNav {
  130.     width: 320px;
  131.     height: 20px;
  132.     background: #903;
  133.     float: right;
  134.     margin-bottom: 50px;
  135. }
  136. .miniNav .miniItem {
  137.     width: 80px;
  138.     height: 20px;
  139.     background: #E3D367;
  140.     float: left;
  141.     text-align: center;
  142.     font:
  143.     font-size: 12px;
  144.     font-family: 'Titillium Web', sans-serif;
  145.     font-weight: 400;
  146. }
  147. #carousel div {
  148.     text-align: center;
  149.     width: 300px;
  150.     height: auto;
  151.     float: left;
  152.     position: relative;
  153. }
  154. #carousel div img {
  155.     border: none;
  156.     width: 210px;
  157.     height: 150px;
  158.     margin-top: 10px;
  159. }
  160. #carousel div span {
  161.     text-align: center;
  162.     color: #333;
  163.     font-family: 'Titillium Web', sans-serif;
  164.     font-weight: 400;
  165.     font-size: 14px;
  166.     font-weight: bold;
  167.     display: block;
  168. }
  169. .nav {
  170.     width: 960px;
  171.     height: 45px;
  172.     margin: auto;
  173.     clear: both;
  174. }
  175. .nav .item {
  176.     color: #4C8081;
  177.     width: 162px;
  178.     height: auto;
  179.     background: #E3D367;
  180.     float: left;
  181.     text-align: center;
  182.     font-size: 24px;
  183.     padding: 15px;
  184.     -webkit-transition: all .2s ease-in-out;
  185.     -moz-transition: all .2s ease-in-out;
  186.     -o-transition: all .2s ease-in-out;
  187.     transition: all .2s ease-in-out;
  188.     font-family: 'Titillium Web', sans-serif;
  189.     font-weight: 400;
  190. }
  191. .nav .item:hover {
  192.     color: #000;
  193.     width: 162px;
  194.     height: auto;
  195.     background: #E3D367;
  196.     float: left;
  197.     text-align: center;
  198.     font-size: 24px;
  199.     padding: 15px;
  200.     padding-bottom: 12px;
  201.     border-bottom: solid 3px #4C8081;
  202.     -webkit-transition: all .2s ease-in-out;
  203.     -moz-transition: all .2s ease-in-out;
  204.     -o-transition: all .2s ease-in-out;
  205.     transition: all .2s ease-in-out;
  206. }
  207. .nav .item img {
  208.     width: 25px;
  209.     height: 25px;
  210.     margin-right: 10px;
  211.     position: relative;
  212. }
  213. .slider {
  214.     width: 100%;
  215.     height: 375px;
  216.     background: #E3D367;
  217.     float: left;
  218.     margin: 65px 0 25px 0;
  219. }
  220. .logoPosition {
  221.     color: #578564;
  222.     width: 162px;
  223.     height: auto;
  224.     background: #E3D367;
  225.     float: left;
  226.     text-align: center;
  227.     font: Arial, Helvetica, sans-serif;
  228.     font-size: 20px;
  229.     padding: 15px;
  230.     height: 36px;
  231.     float: left;
  232. }
  233. .logoPosition img {
  234.     position: relative;
  235.     bottom: 55px;
  236. }
  237. .categories {
  238.     width: 320px;
  239.     height: 330px;
  240.     background: #E3D367;
  241.     float: left;
  242. }
  243. .categoryWrapper {
  244.     width: 310px;
  245.     height: 285px;
  246.     float: left;
  247.     margin: 5px;
  248. }
  249. .categoryList {
  250.     width: 100%;
  251.     height: 31px;
  252.     background-color: #FDF6DF;
  253.     float: left;
  254. }
  255. .captionSection {
  256.     width: 100%;
  257.     height: 31.9px;
  258.     background: #4C8081;
  259.     color: #FFF;
  260.     float: left;
  261.     font-size: 25px;
  262.     padding-top: .3em;
  263.     text-align: left;
  264.     font-family: 'Titillium Web', sans-serif;
  265.     font-weight: 200;
  266. }
  267. .captionSection p {
  268.     margin-left: 10px;
  269. }
  270. .categoryList img {
  271.     width: 15px;
  272.     height: 15px;
  273.     -webkit-transition: all .2s ease-in-out;
  274.     -moz-transition: all .2s ease-in-out;
  275.     -o-transition: all .2s ease-in-out;
  276.     transition: all .2s ease-in-out;
  277. }
  278. .categoryList:hover {
  279.     background-color: #4C8081;
  280.     color: #fcf8c3;
  281. }
  282. .categoryList:hover img {
  283.     margin-right: 5px;
  284.     -webkit-transition: all .2s ease-in-out;
  285.     -moz-transition: all .2s ease-in-out;
  286.     -o-transition: all .2s ease-in-out;
  287.     transition: all .2s ease-in-out;
  288. }
  289. .information {
  290.     width: 615px;
  291.     height: 330px;
  292.     background: #E3D367;
  293.     float: left;
  294.     margin-left: 25px;
  295.     margin-bottom: 25px;
  296. }
  297. .info1 {
  298.     width: 296px;
  299.     height: 320px;
  300.     background-color: #FDF6DF;
  301.     overflow: hidden;
  302.     float: left;
  303.     margin: 5px 5px 5px 5px;
  304.     font-family: 'Titillium Web', sans-serif;
  305.     font-weight: 200;
  306. }
  307. .info2 {
  308.     overflow: hidden;
  309.     width: 304px;
  310.     height: 160px;
  311.     background-color: #FDF6DF;
  312.     float: left;
  313.     margin-bottom: 5px;
  314.     margin-top: 5px;
  315.     font-family: 'Titillium Web', sans-serif;
  316.     font-weight: 200;
  317. }
  318. .info3 {
  319.     overflow: hidden;
  320.     width: 304px;
  321.     height: 155px;
  322.     background-color: #FDF6DF;
  323.     float: left;
  324.     font-family: 'Titillium Web', sans-serif;
  325.     font-weight: 200;
  326. }
  327. .info1 p {
  328.     position: absolute;
  329.     color: #FFF;
  330.     font-size: 20px;
  331.     z-index: 1;
  332.     margin-top: 290px;
  333.     background: #4C8081;
  334.     padding: 5px;
  335.     width: 286px;
  336.     text-align: center;
  337. }
  338. .info2 p {
  339.     position: absolute;
  340.     color: #FFF;
  341.     font-size: 20px;
  342.     z-index: 1;
  343.     margin-top: 130px;
  344.     background: #4C8081;
  345.     padding: 5px;
  346.     width: 294px;
  347.     text-align: center;
  348. }
  349. .info2 img {
  350.     width: 325px;
  351.     height: 175px;
  352.     -webkit-transition: all .5s ease-in-out;
  353.     -moz-transition: all .5s ease-in-out;
  354.     -o-transition: all .5s ease-in-out;
  355.     transition: all .5s ease-in-out;
  356. }
  357. .info1 img:hover, .info2 img:hover, .info3 img:hover {
  358.     -webkit-transition: all .5s ease-in-out;
  359.     -moz-transition: all .5s ease-in-out;
  360.     -o-transition: all .5s ease-in-out;
  361.     transition: all .5s ease-in-out;
  362.     -webkit-transform: scale(1.1);
  363.     -moz-transform: scale(1.1);
  364.     -o-transform: scale(1.1);
  365.     transform: scale(1.1);
  366. }
  367. .info3 p {
  368.     position: absolute;
  369.     color: #FFF;
  370.     font-size: 20px;
  371.     z-index: 1;
  372.     margin-top: 125px;
  373.     background: #4C8081;
  374.     padding: 5px;
  375.     width: 294px;
  376.     text-align: center;
  377. }
  378. .tips {
  379.     width: 100px;
  380.     height: 100px;
  381.     background: #E3D367;
  382.     float: left;
  383. }
  384. .tipsInformation {
  385.     width: 850px;
  386.     height: auto;
  387.     min-height: 100px;
  388.     background: #E3D367;
  389.     float: left;
  390.     margin-left: 10px;
  391.     margin-bottom: 10px;
  392. }
  393. .tipsInformation p {
  394.     margin: .5em;
  395. }
  396. .featured {
  397.     width: 960px;
  398.     height: 225px;
  399.     background: #E3D367;
  400.     float: left;
  401.     margin-bottom: 25px;
  402. }
  403. .featured h1 {
  404.     font-size: 20px;
  405.     line-height: 25px;
  406.     text-indent: 10px;
  407.     font-weight: bolder;
  408.     background-color: #FDF6DF;
  409.     width: 325px;
  410.     margin: 5px 0 0 5px;
  411. }
  412. span {
  413.    
  414. }
  415. span p {
  416.     color: #4C8081;
  417.     font-family: 'Titillium Web', sans-serif;
  418.     font-weight: 400;
  419.     font-size:20px;
  420. }
  421. span .price {
  422.     text-align: center;
  423.     font-size: 16px;
  424. }
  425. .footer {
  426.     width: 960px;
  427.     height: 200px;
  428.     background: #E3D367;
  429.     float: left;
  430. }
  431. .footerWrapper {
  432.     background-color: #FDF6DF;
  433.     width: 325px;
  434.     height: 190px;
  435.     float: left;
  436.     margin: 5px 5px 5px 5px;
  437. }
  438. .footerTitle {
  439.     width: 240px;
  440.     height: 30px;
  441.     background-color: #FDF6DF;
  442.     float: left;
  443.     margin: 5px 5px 5px 10px;
  444. }
  445. .footerListWrapper {
  446.     width: 310px;
  447.     height: 155px;
  448.     /*background-color: #099;*/
  449.     float: left;
  450.     margin-left: 5px;
  451. }
  452. .footerList {
  453.     width: 145px;
  454.     height: 20px;
  455.     background-color: #FDF6DF;
  456.     float: left;
  457.     margin: 0px 5px 5px 5px;
  458. }
  459. .social {
  460.     width: 310px;
  461.     height: 190px;
  462.     float: left;
  463.     margin: 5px 5px 0 0;
  464.     background-color: #FBF6DE;
  465. }
  466. .social h1 {
  467.     font-size: 20px;
  468.     width: 100%;
  469.     height: 25px;
  470.     text-align: center;
  471. }
  472. .social p {
  473.     font-size: 15px;
  474.     width: 100%;
  475.     height: 25px;
  476.     text-align: center;
  477. }
  478. .socialIcon {
  479.     width: 70px;
  480.     height: 70px;
  481.     background-color: #666;
  482.     float: left;
  483.     margin: 15px 16px;
  484. }
  485. .socialIcon img {
  486.     width: 70px;
  487.     height: 70px;
  488.     background-color: #666;
  489.     float: left;
  490. }
  491. .contact {
  492.     width: 305px;
  493.     height: 190px;
  494.     float: left;
  495.     margin: 5px 5px 0 0;
  496.     background-color: #FBF6DE;
  497. }
  498. .contact h1 {
  499.     font-size: 20px;
  500.     width: 100%;
  501.     height: 25px;
  502.     text-align: center;
  503. }
  504. .contact p {
  505.     font-size: 15px;
  506.     width: 100%;
  507.     height: auto;
  508.     padding: .5em;
  509.     line-height: 33px;
  510. }
  511. .contact img {
  512.     position: relative;
  513.     bottom: -5px;
  514.     padding-right: 10px;
  515. }
  516. .aboutSection {
  517.     width: 490px;
  518.     height: 420px;
  519.     background-color: #E0CD5D;
  520.     float: left;
  521.     margin-bottom: 10px;
  522. }
  523. .formSection {
  524.     width: 460px;
  525.     height: 300px;
  526.     background-color: #E0CD5D;
  527.     float: left;
  528.     margin-left: 10px;
  529. }
  530. .formSectionItem {
  531.     width: 450px;
  532.     height: 142px;
  533.     background-color: #FDF6DF;
  534.     float: left;
  535.     margin: 5px 0 0 5px;
  536. }
  537. .aboutSection h1 {
  538.     font-size: 20px;
  539.     line-height: 25px;
  540.     text-indent: 10px;
  541.     font-weight: bolder;
  542.     background-color: #FDF6DF;
  543.     width: 130px;
  544.     margin: 5px 0 0 5px;
  545. }
  546. .birdContainer {
  547.     width: 100%;
  548.     height: auto;
  549.     background: #E3D367;
  550.     float: left;
  551.     margin: 65px 0 25px 0;
  552. }
  553. .birdPicture {
  554.     width: 375px;
  555.     height: auto;
  556.     float:left;
  557.     margin: 0px 0 0 10px;
  558. }
  559. .birdPicture img {
  560.     width: 375px;
  561.     height: 380px;
  562. }
  563. .birdInformation {
  564.     float:left;
  565.     width:555px;
  566.     height:380px;
  567.     background:#FFF;
  568.     margin-left:10px;
  569.     margin-bottom:10px;
  570.  
  571. }
  572. .birdInformation p {
  573.     font-size:30px;
  574.     color:#4C8081;
  575.     margin:0px;
  576.     font-family: 'Titillium Web', sans-serif;
  577.     font-weight: 200;
  578.     padding:10px;
  579. }
  580. .birdBreed {
  581.     width:100%;
  582.     height:45px;
  583.     float:left;
  584.     border-bottom:1px dotted #c5c8cc;
  585. }
  586.  
  587. .birdPrice {
  588. width: 275px;
  589.     height:110px;
  590.     float:left;
  591.     margin-top:10px;
  592.     margin-left:10px;
  593. }
  594. .birdPrice p {
  595. line-height: 90px;
  596. width: 100%;
  597. text-align: center;
  598. font-size: 30px;
  599. font-weight:400;
  600. color:#4C8081;
  601. }
  602. .birdPersonality {
  603.     width:250px;
  604.     height:110px;
  605.     background:#F93;
  606.     float:left;
  607.     margin-top:10px;
  608.     margin-left:10px;
  609. }
  610.  
  611. .birdDescription {
  612. width: 535px;
  613.     height:110px;
  614.     color:#4C8081;
  615.     float:left;
  616.     margin-top:10px;
  617.     margin-left:10px;
  618.     border-top:1px dotted #c5c8cc;
  619.     border-bottom:1px dotted #c5c8cc;
  620. }
  621. .birdDescription p {
  622.     font-size:13px;
  623.     font-weight:400;
  624. }
  625. .birdBuy {
  626.     background-color:#4C8081;
  627.     float:left;
  628.     margin-left:10px;
  629.     margin-top:10px;
  630. width: 150px;
  631. text-align: center;
  632.     -webkit-transition: all .2s ease-in-out;
  633.     -moz-transition: all .2s ease-in-out;
  634.     -o-transition: all .2s ease-in-out;
  635.     transition: all .2s ease-in-out;
  636. }
  637. .birdBuy:hover {
  638.     background-color: #5793C4;
  639.     float:left;
  640.     margin-left:10px;
  641.     margin-top:10px;
  642. width: 150px;
  643. text-align: center;
  644.     -webkit-transition: all .2s ease-in-out;
  645.     -moz-transition: all .2s ease-in-out;
  646.     -o-transition: all .2s ease-in-out;
  647.     transition: all .2s ease-in-out;
  648. }
  649. .birdBuy p{
  650.     padding:27px;
  651.     color:#FFF;
  652.     }
  653. .birdTags {
  654.     float:left;
  655.     margin-left:10px;
  656.     margin-top:10px;
  657. width: 375px;
  658. height:75px;
  659. text-align: center;
  660.     border-left:1px dotted #c5c8cc;
  661. }
  662. .birdTags p{
  663.     font-size:15px;
  664. }
  665.  
  666.  
  667.  
  668.  
  669. .dealsContainer{
  670. width: 285px;
  671. height: auto;
  672. background-color: #FDF6DF;
  673. float: left;
  674. margin: 25px 0 25px 25px;
  675.     }
  676. .dealsImage{
  677.     width: 285px;
  678.     background:#933;
  679.     height:150px;
  680.     border-bottom:solid 2px #4C8081;
  681.     overflow:hidden;
  682.     }
  683.     .dealsImage img{
  684.     width: 285px;
  685.     background:#933;
  686.     height:150px;
  687.          -webkit-transition: all .5s ease-in-out;
  688.  -moz-transition: all .5s ease-in-out;
  689.  -o-transition: all .5s ease-in-out;
  690.  transition: all .5s ease-in-out;
  691.     }
  692.     .dealsImage:hover img{
  693.     width: 285px;
  694.     background:#933;
  695.     height:150px;
  696.     border-bottom:solid 2px #4C8081;
  697.      -webkit-transition: all .5s ease-in-out;
  698.  -moz-transition: all .5s ease-in-out;
  699.  -o-transition: all .5s ease-in-out;
  700.  transition: all .5s ease-in-out;
  701.  -webkit-transform: scale(1.1);
  702.  -moz-transform: scale(1.1);
  703.  -o-transform: scale(1.1);
  704.  transform: scale(1.1);
  705.     }
  706.  
  707. .dealsText h1 {
  708.     font-family: 'Titillium Web', sans-serif;
  709.     font-size: 30px;
  710.     margin:.2em;
  711.     border-bottom: 1px dotted #4C8081 ;
  712.     }
  713. .dealsText p {
  714.     font-size: 25px;
  715.     width:180px;
  716.     text-align:center;
  717.     border-right: 1px dotted #4C8081;
  718.     margin:.5em .5em .5em .5em;
  719.     color: #4C8081;
  720.             float:left;
  721.             height: 50px;
  722. line-height: 50px;
  723.     }
  724.     .dealsTextBuy {
  725.             font-family: 'Titillium Web', sans-serif;
  726.         padding:1em;
  727.         background:#4C8081;
  728.         color:#FFF;
  729.             margin:.5em .5em .5em .5em;
  730.         width:auto;
  731.         font-size: 16px;
  732.         float:left;
  733.         -moz-border-radius: 3px;
  734.         -webkit-border-radius: 3px;
  735.         border-radius: 3px;
  736.         cursor: pointer;
  737.         margin-right: 10px;
  738.         margin-top: 12px;
  739.             -webkit-transition: all .2s ease-in-out;
  740.     -moz-transition: all .2s ease-in-out;
  741.     -o-transition: all .2s ease-in-out;
  742.     transition: all .2s ease-in-out;
  743.     }
  744.         .dealsTextBuy:hover {
  745.         background:#72C8CF;
  746.         color:#FFF;
  747.     -webkit-transition: all .2s ease-in-out;
  748.     -moz-transition: all .2s ease-in-out;
  749.     -o-transition: all .2s ease-in-out;
  750.     transition: all .2s ease-in-out;
  751.     }
  752.     }
  753.    
  754. /* @media only screen and (max-width: 959px)
  755. ==================================================
  756.     ###
  757.     ###
  758.     ###
  759.     ###
  760.     ###
  761.      */
  762.    
  763.    
  764. @media only screen and (min-width: 768px) and (max-width: 959px) {
  765. .container {
  766.  background: #FFF;
  767. padding: 25px;
  768. }
  769. .miniNav {
  770.     width: 320px;
  771.     height: 20px;
  772.     background: #903;
  773.     float: right;
  774.     margin-bottom: 50px;
  775. }
  776. .miniNav .miniItem {
  777.     width: 80px;
  778.     height: 22px;
  779. background: #F3F1BA;
  780.     float: left;
  781.     text-align: center;
  782.     color:#F00;
  783.     font-size: 14px;
  784.     font-family: 'Titillium Web',sans-serif;
  785.     font-weight: 400;
  786. }
  787. .nav {
  788.  width: 768px;
  789.  height: 45px;
  790.  background: #903;
  791.  margin: auto;
  792.  clear: both;
  793. }
  794. .nav .item {
  795.  width: 16.09%;
  796.  height: auto;
  797.  background:#E3D367;
  798.  float: left;
  799.  text-align: center;
  800.  font: Arial, Helvetica, sans-serif;
  801.  font-size: 20px;
  802.  padding: 15px;
  803. }
  804. .nav .item:hover {
  805.  background: #4C8081;
  806. }
  807. .nav .item img {
  808.  width: 25px;
  809.  height: 25px;
  810.  margin-right: 10px;
  811.  position: relative;
  812. }
  813. .logoPosition {
  814. color: #578564;
  815. width: 123.5px;
  816. height: auto;
  817.  background:#E3D367;
  818. float: left;
  819. text-align: center;
  820. font: Arial, Helvetica, sans-serif;
  821. font-size: 20px;
  822. padding: 15px;
  823. height: 28px;
  824. float:left;
  825. margin-bottom:65px;
  826. }
  827. .logoPosition img {
  828. position: relative;
  829. bottom:45px
  830. }
  831. .slider {
  832.  width: 100%;
  833.  height: 300px;
  834.  background:#E3D367;
  835.  float: left;
  836.  margin-bottom: 10px;
  837. }
  838. .categories {
  839.  width: 283px;
  840.  height: 330px;
  841.  background:#E3D367;
  842.  float: left;
  843. }
  844. .categoryWrapper {
  845.  width: 273px;
  846.  height: 285px;
  847.  float: left;
  848.  margin: 5px;
  849. }
  850. .categoryList {
  851.  width: 273px;
  852.  height: 31px;
  853.  background-color: #FDF6DF;
  854.  float: left;
  855. }
  856. .categoryList img {
  857.  width: 15px;
  858.  height: 15px;
  859.  -webkit-transition: all .2s ease-in-out;
  860.  -moz-transition: all .2s ease-in-out;
  861.  -o-transition: all .2s ease-in-out;
  862.  transition: all .2s ease-in-out;
  863. }
  864. .categoryList:hover {
  865.  background-color: #4C8081;
  866.  color: #fcf8c3;
  867. }
  868. .categoryList:hover img {
  869.  margin-right: 5px;
  870.  -webkit-transition: all .2s ease-in-out;
  871.  -moz-transition: all .2s ease-in-out;
  872.  -o-transition: all .2s ease-in-out;
  873.  transition: all .2s ease-in-out;
  874. }
  875. .captionSection {
  876.  width: 100%;
  877.  height: 25px;
  878.  background: #4C8081;
  879.  color: #FFF;
  880.  float: left;
  881.  font-size: 20px;
  882.  padding-top: .3em;
  883. }
  884. .information {
  885.  width: 475px;
  886.  height: 330px;
  887.  background:#E3D367;
  888.  float: left;
  889.  margin-left: 10px;
  890.  margin-bottom: 10px;
  891. }
  892. .info1 {
  893.  width: 230px;
  894.  height: 320px;
  895.  background-color: #FDF6DF;
  896.  overflow: hidden;
  897.  float: left;
  898.  margin: 5px 5px 5px 5px;
  899. font-family: 'Titillium Web', sans-serif;
  900. font-weight:200;
  901. }
  902. .info2 {
  903.  overflow: hidden;
  904.  width: 230px;
  905.  height: 165px;
  906.  background-color: #FDF6DF;
  907.  float: left;
  908.  margin-bottom: 5px;
  909.  margin-top: 5px;
  910. font-family: 'Titillium Web', sans-serif;
  911. font-weight:200;
  912. }
  913. .info3 {
  914.  overflow: hidden;
  915.  width: 230px;
  916.  height: 150px;
  917.  background-color: #FDF6DF;
  918.  float: left;
  919.  font-family: 'Titillium Web', sans-serif;
  920. font-weight:200;
  921. }
  922. .info1 p {
  923.  position: absolute;
  924.  color: #FFF;
  925.  font-size: 20px;
  926.  z-index: 1;
  927.  margin-top: 290px;
  928.  background: #4C8081;
  929.  padding: 5px;
  930.  width: 220px;
  931.  text-align: center;
  932. }
  933. .info2 p {
  934.  position: absolute;
  935.  color: #FFF;
  936.  font-size: 20px;
  937.  z-index: 1;
  938.  margin-top: 135px;
  939.  background: #4C8081;
  940. padding: 5px;
  941. width: 220px;
  942. text-align: center;
  943. }
  944. .info2 img {
  945.  width: 325px;
  946.  height: 175px;
  947.  -webkit-transition: all .5s ease-in-out;
  948.  -moz-transition: all .5s ease-in-out;
  949.  -o-transition: all .5s ease-in-out;
  950.  transition: all .5s ease-in-out;
  951. }
  952. .info1 img:hover, .info2 img:hover, .info3 img:hover {
  953.  -webkit-transition: all .5s ease-in-out;
  954.  -moz-transition: all .5s ease-in-out;
  955.  -o-transition: all .5s ease-in-out;
  956.  transition: all .5s ease-in-out;
  957.  -webkit-transform: scale(1.1);
  958.  -moz-transform: scale(1.1);
  959.  -o-transform: scale(1.1);
  960.  transform: scale(1.1);
  961. }
  962. .info3 p {
  963.  position: absolute;
  964.  color: #FFF;
  965.  font-size: 20px;
  966.  z-index: 1;
  967.  margin-top: 120px;
  968.  background: #4C8081;
  969. padding: 5px;
  970. width: 220px;
  971. text-align: center;
  972. }
  973. .captionSection {
  974.  width: 100%;
  975.  height: 31.9px;
  976.  background: #4C8081;
  977.  color: #FFF;
  978.  float: left;
  979.  font-size: 25px;
  980.  padding-top: .3em;
  981.  text-align:left;
  982. font-family: 'Titillium Web', sans-serif;
  983. font-weight:200;
  984. }
  985. .captionSection p {
  986.  margin-left:10px;
  987. }
  988.  .featured {
  989.  width: 768px;
  990. height: 200px;
  991.  background:#E3D367;
  992.  float: left;
  993.  margin-bottom: 10px;
  994. }
  995. .featured h1 {
  996. font-size: 20px;
  997. line-height: 25px;
  998. text-indent: 10px;
  999. font-weight: bolder;
  1000. background-color: #FDF6DF;
  1001. width: 280px;
  1002. margin: 5px 0 0 5px;
  1003. }
  1004. .footer {
  1005.  width: 768px;
  1006.  height: 200px;
  1007.  background:#E3D367;
  1008.  float: left;
  1009. }
  1010. .footerWrapper {
  1011. background-color: #FDF6DF;
  1012. width: 443px;
  1013.  height: 190px;
  1014.  float: left;
  1015.  margin: 5px 5px 5px 5px;
  1016. }
  1017. .footerTitle {
  1018.  width: 240px;
  1019.  height: 30px;
  1020.  background-color: #FDF6DF;
  1021.  float: left;
  1022.  margin: 5px 5px 5px 10px;
  1023. }
  1024. .footerListWrapper {
  1025.  width: 310px;
  1026.  height: 155px;
  1027.     /*background-color: #099;*/
  1028.     float: left;
  1029.  margin-left: 5px;
  1030. }
  1031. .footerList {
  1032.  width: 145px;
  1033.  height: 20px;
  1034.  background-color: #FDF6DF;
  1035.  float: left;
  1036.  margin: 0px 5px 5px 5px;
  1037. }
  1038. .social {
  1039.  width: 310px;
  1040.  height: 190px;
  1041.  float: left;
  1042.  margin: 5px 5px 0 0;
  1043.  background-color:#FBF6DE;
  1044. }
  1045. .social h1 {
  1046.  font-size:20px;
  1047.  width:100%;
  1048.  height:25px;
  1049.  text-align:center;
  1050. }
  1051. .social p {
  1052.  font-size:15px;
  1053.  width:100%;
  1054.  height:25px;
  1055.  text-align:center;
  1056. }
  1057. .socialIcon {
  1058.  width:93px;
  1059.  height:93px;
  1060.  background-color: #666;
  1061.  float:left;
  1062.  margin:5px 5px;
  1063. }
  1064. .contact {
  1065.  width: 305px;
  1066.  height: 190px;
  1067.  float: left;
  1068.  margin: 5px 5px 0 0;
  1069.  background-color:#FBF6DE;
  1070.  visibility:hidden;
  1071.  display:none;
  1072. }
  1073.  .contact h1 {
  1074.  font-size:20px;
  1075.  width:100%;
  1076.  height:25px;
  1077.  text-align:center;
  1078. }
  1079. .contact p {
  1080.  font-size:15px;
  1081.  width:100%;
  1082.  height:auto;
  1083.  padding:.5em;
  1084.  line-height: 33px;
  1085. }
  1086. .contact img {
  1087.  position:relative;
  1088.  bottom:-5px;
  1089.  padding-right:10px;
  1090. }
  1091.  .aboutSection {
  1092.  width:100%;
  1093.  height:420px;
  1094.  background-color:#E0CD5D;
  1095.  float:left;
  1096.  margin-bottom:10px;
  1097. }
  1098. .formSection {
  1099.  width:460px;
  1100.  height:300px;
  1101.  background-color:#E0CD5D;
  1102.  float:left;
  1103.  margin-bottom:10px;
  1104. }
  1105. .formSectionItem {
  1106.  width:758px;
  1107.  height:142px;
  1108.  background-color:#FDF6DF;
  1109.  float:left;
  1110.  margin:5px 0 0 5px;
  1111. }
  1112. .aboutSection h1 {
  1113. font-size: 20px;
  1114. line-height: 25px;
  1115. text-indent: 10px;
  1116. font-weight: bolder;
  1117. background-color: #FDF6DF;
  1118. width: 130px;
  1119. margin: 5px 0 0 5px;
  1120. }
  1121. .birdContainer {
  1122.     width: 100%;
  1123.     height: auto;
  1124.     background: #E3D367;
  1125.     float: left;
  1126.     margin: 65px 0 25px 0;
  1127. }
  1128. .birdPicture {
  1129.     width: 250px;
  1130.     height: auto;
  1131.     float:left;
  1132.     margin: 0px 0 0 10px;
  1133. }
  1134. .birdPicture img {
  1135.     width: 250px;
  1136.     height: 250px;
  1137. }
  1138. .birdInformation {
  1139.     float:left;
  1140.     width:490px;
  1141.     height:auto;
  1142.     background:#FFF;
  1143.     margin-left:10px;
  1144.     margin-bottom:10px;
  1145.  
  1146. }
  1147. .birdInformation p {
  1148.     font-size:30px;
  1149.     color:#4C8081;
  1150.     margin:0px;
  1151.     font-family: 'Titillium Web', sans-serif;
  1152.     font-weight: 200;
  1153.     padding:10px;
  1154. }
  1155. .birdBreed {
  1156.     width:100%;
  1157.     height:45px;
  1158.     float:left;
  1159.     border-bottom:1px dotted #c5c8cc;
  1160. }
  1161.  
  1162. .birdPrice {
  1163. width: 210px;
  1164.     height:110px;
  1165.     float:left;
  1166.     margin-top:10px;
  1167.     margin-left:10px;
  1168. }
  1169. .birdPrice p {
  1170. line-height: 90px;
  1171. width: 100%;
  1172. text-align: center;
  1173. font-size: 30px;
  1174. font-weight:400;
  1175. color:#4C8081;
  1176. }
  1177. .birdPersonality {
  1178.     width:250px;
  1179.     height:110px;
  1180.     background:#F93;
  1181.     float:left;
  1182.     margin-top:10px;
  1183.     margin-left:10px;
  1184. }
  1185.  
  1186. .birdDescription {
  1187. width: 470px;
  1188. height: auto;
  1189.     color:#4C8081;
  1190.     float:left;
  1191.     margin-top:10px;
  1192.     margin-left:10px;
  1193.     border-top:1px dotted #c5c8cc;
  1194.     border-bottom:1px dotted #c5c8cc;
  1195. }
  1196. .birdDescription p {
  1197.     font-size:13px;
  1198.     font-weight:400;
  1199. }
  1200. .birdBuy {
  1201.     background-color:#4C8081;
  1202.     float:left;
  1203.     margin-left:10px;
  1204.     margin-top:10px;
  1205. width: 150px;
  1206. text-align: center;
  1207.     -webkit-transition: all .2s ease-in-out;
  1208.     -moz-transition: all .2s ease-in-out;
  1209.     -o-transition: all .2s ease-in-out;
  1210.     transition: all .2s ease-in-out;
  1211. }
  1212. .birdBuy:hover {
  1213.     background-color: #5793C4;
  1214.     float:left;
  1215.     margin-left:10px;
  1216.     margin-top:10px;
  1217. width: 150px;
  1218. text-align: center;
  1219.     -webkit-transition: all .2s ease-in-out;
  1220.     -moz-transition: all .2s ease-in-out;
  1221.     -o-transition: all .2s ease-in-out;
  1222.     transition: all .2s ease-in-out;
  1223. }
  1224. .birdBuy p{
  1225.     padding:27px;
  1226.     color:#FFF;
  1227.     }
  1228. .birdTags {
  1229.     float:left;
  1230.     margin-left:10px;
  1231.     margin-top:10px;
  1232. width: 300px;
  1233. height:75px;
  1234. text-align: center;
  1235.     border-left:1px dotted #c5c8cc;
  1236.     margin-bottom:10px;
  1237. }
  1238. .birdTags p{
  1239.     font-size:15px;
  1240. }
  1241. }
  1242.  @media only screen and (min-width: 480px) and (max-width: 767px) {
  1243. .container {
  1244.     background: #FFF;
  1245.     padding: 25px;
  1246. }
  1247. .miniNav {
  1248.     width: 240px;
  1249.     height: 20px;
  1250.     background: #903;
  1251.     float: right;
  1252.     margin-bottom: 50px;
  1253. }
  1254. .miniNav .miniItem {
  1255.     width: 60px;
  1256.     height: 20px;
  1257.     background: #E3D367;
  1258.     float: left;
  1259.     text-align: center;
  1260.     font: Arial, Helvetica, sans-serif;
  1261.     font-size: 12px;
  1262. }
  1263. .nav {
  1264.     width: 480px;
  1265.     height: 45px;
  1266.     margin: auto;
  1267.     clear: both;
  1268. }
  1269. .nav .item {
  1270.     width: 51px;
  1271.     height: auto;
  1272.     background: #E3D367;
  1273.     float: left;
  1274.     text-align: center;
  1275.     font: Arial, Helvetica, sans-serif;
  1276.     font-size: 15px;
  1277.     padding: 15px;
  1278. }
  1279. .nav .item:hover {
  1280.     background: #4C8081;
  1281. }
  1282. .nav .item img {
  1283.     width: 25px;
  1284.     height: 25px;
  1285.     margin-right: 10px;
  1286.     position: relative;
  1287.     visibility: hidden;
  1288.     display: none;
  1289. }
  1290. .logoPosition {
  1291.     color: #578564;
  1292.     width: 123.5px;
  1293.     height: auto;
  1294.     background: #E3D367;
  1295.     float: left;
  1296.     text-align: center;
  1297.     font: Arial, Helvetica, sans-serif;
  1298.     font-size: 20px;
  1299.     padding: 15px;
  1300.     height: 21px;
  1301.     float: left;
  1302.     margin-bottom: 65px;
  1303. }
  1304. .logoPosition img {
  1305.     position: relative;
  1306.     bottom: 45px;
  1307.     width: 100px;
  1308.     height: 125px;
  1309. }
  1310. .slider {
  1311.     width: 100%;
  1312.     height: 200px;
  1313.     background: #E3D367;
  1314.     float: left;
  1315.     margin-bottom: 10px;
  1316. }
  1317. .categories {
  1318.     width: 480px;
  1319.     height: auto;
  1320.     background: #E3D367;
  1321.     float: left;
  1322. }
  1323. .categoryWrapper {
  1324.     width: 480px;
  1325.     height: 285px;
  1326.     float: left;
  1327.     margin: 5px;
  1328. }
  1329. .categoryList {
  1330.     width: 470px;
  1331.     height: 30px;
  1332.     background-color: #FDF6DF;
  1333.     float: left;
  1334.     margin-bottom: 1.9px;
  1335. }
  1336. .categoryList img {
  1337.     width: 15px;
  1338.     height: 15px;
  1339.     -webkit-transition: all .2s ease-in-out;
  1340.     -moz-transition: all .2s ease-in-out;
  1341.     -o-transition: all .2s ease-in-out;
  1342.     transition: all .2s ease-in-out;
  1343. }
  1344. .categoryList:hover {
  1345.     background-color: #4C8081;
  1346.     color: #fcf8c3;
  1347. }
  1348. .categoryList:hover img {
  1349.     margin-right: 5px;
  1350.     -webkit-transition: all .2s ease-in-out;
  1351.     -moz-transition: all .2s ease-in-out;
  1352.     -o-transition: all .2s ease-in-out;
  1353.     transition: all .2s ease-in-out;
  1354. }
  1355. .captionSection {
  1356.     width: 100%;
  1357.     height: 25px;
  1358.     background: #4C8081;
  1359.     color: #FFF;
  1360.     float: left;
  1361.     font-size: 20px;
  1362.     padding-top: .3em;
  1363. }
  1364. .information {
  1365.     width: 480px;
  1366.     height: 295px;
  1367.     background: #E3D367;
  1368.     float: left;
  1369.     margin-top: 10px;
  1370.     margin-bottom: 10px;
  1371. }
  1372. .info1 {
  1373.     width: 235px;
  1374.     height: 285px;
  1375.     background-color: #FDF6DF;
  1376.     overflow: hidden;
  1377.     float: left;
  1378.     margin: 5px 5px 5px 5px;
  1379.     font-family: 'Titillium Web', sans-serif;
  1380.     font-weight: 200;
  1381. }
  1382. .info2 {
  1383.     overflow: hidden;
  1384.     width: 230px;
  1385.     height: 140px;
  1386.     background-color: #FDF6DF;
  1387.     float: left;
  1388.     margin-bottom: 5px;
  1389.     margin-top: 5px;
  1390.     font-family: 'Titillium Web', sans-serif;
  1391.     font-weight: 200;
  1392. }
  1393. .info3 {
  1394.     overflow: hidden;
  1395.     width: 230px;
  1396.     height: 140px;
  1397.     background-color: #FDF6DF;
  1398.     float: left;
  1399.     font-family: 'Titillium Web', sans-serif;
  1400.     font-weight: 200;
  1401. }
  1402. .info1 p {
  1403.     position: absolute;
  1404.     color: #FFF;
  1405.     font-size: 20px;
  1406.     z-index: 1;
  1407.     margin-top: 255px;
  1408.     background: #4C8081;
  1409.     padding: 5px;
  1410.     width: 225px;
  1411.     text-align: center;
  1412. }
  1413. .info2 p {
  1414.     position: absolute;
  1415.     color: #FFF;
  1416.     font-size: 20px;
  1417.     z-index: 1;
  1418.     margin-top: 110px;
  1419.     background: #4C8081;
  1420.     padding: 5px;
  1421.     width: 220px;
  1422.     text-align: center;
  1423. }
  1424. .info2 img {
  1425.     width: 325px;
  1426.     height: 175px;
  1427.     -webkit-transition: all .5s ease-in-out;
  1428.     -moz-transition: all .5s ease-in-out;
  1429.     -o-transition: all .5s ease-in-out;
  1430.     transition: all .5s ease-in-out;
  1431. }
  1432. .info1 img:hover, .info2 img:hover, .info3 img:hover {
  1433.     -webkit-transition: all .5s ease-in-out;
  1434.     -moz-transition: all .5s ease-in-out;
  1435.     -o-transition: all .5s ease-in-out;
  1436.     transition: all .5s ease-in-out;
  1437.     -webkit-transform: scale(1.1);
  1438.     -moz-transform: scale(1.1);
  1439.     -o-transform: scale(1.1);
  1440.     transform: scale(1.1);
  1441. }
  1442. .info3 p {
  1443.     position: absolute;
  1444.     color: #FFF;
  1445.     font-size: 20px;
  1446.     z-index: 1;
  1447.     margin-top: 110px;
  1448.     background: #4C8081;
  1449.     padding: 5px;
  1450.     width: 220px;
  1451.     text-align: center;
  1452. }
  1453. .featured {
  1454.     width: 480px;
  1455.     height: 150px;
  1456.     background: #E3D367;
  1457.     float: left;
  1458.     margin-bottom: 10px;
  1459. }
  1460. .featured h1 {
  1461.     font-size: 20px;
  1462.     line-height: 25px;
  1463.     text-indent: 10px;
  1464.     font-weight: bolder;
  1465.     background-color: #FDF6DF;
  1466.     width: 280px;
  1467.     margin: 5px 0 0 5px;
  1468. }
  1469. #carousel div img {
  1470.     border: none;
  1471.     width: 100px;
  1472.     height: 100px;
  1473.     margin-top: 10px;
  1474. }
  1475. .captionSection {
  1476.     width: 100%;
  1477.     height: 31.9px;
  1478.     background: #4C8081;
  1479.     color: #FFF;
  1480.     float: left;
  1481.     font-size: 25px;
  1482.     padding-top: .3em;
  1483.     text-align: left;
  1484.     font-family: 'Titillium Web', sans-serif;
  1485.     font-weight: 200;
  1486. }
  1487. .captionSection p {
  1488.     margin-left: 10px;
  1489. }
  1490. .footer {
  1491.     width: 480px;
  1492.     height: 200px;
  1493.     background: #E3D367;
  1494.     float: left;
  1495. }
  1496. .footerWrapper {
  1497.     background-color: #FDF6DF;
  1498.     width: 470px;
  1499.     height: 190px;
  1500.     float: left;
  1501.     margin: 5px 5px 5px 5px;
  1502. }
  1503. .footerTitle {
  1504.     width: 240px;
  1505.     height: 30px;
  1506.     background-color: #FDF6DF;
  1507.     float: left;
  1508.     margin: 5px 5px 5px 10px;
  1509. }
  1510. .footerListWrapper {
  1511.     width: 370px;
  1512.     height: 155px;
  1513.     /*background-color: #099;*/
  1514.     float: left;
  1515.     margin-left: 5px;
  1516. }
  1517. .footerList {
  1518.     width: 175px;
  1519.     height: 20px;
  1520.     background-color: #FDF6DF;
  1521.     float: left;
  1522.     margin: 0px 5px 5px 5px;
  1523. }
  1524. .social {
  1525.     width: 310px;
  1526.     height: 190px;
  1527.     float: left;
  1528.     margin: 5px 5px 0 0;
  1529.     background-color: #FBF6DE;
  1530.     visibility: hidden;
  1531.     display: none;
  1532. }
  1533. .social h1 {
  1534.     font-size: 20px;
  1535.     width: 100%;
  1536.     height: 25px;
  1537.     text-align: center;
  1538. }
  1539. .social p {
  1540.     font-size: 15px;
  1541.     width: 100%;
  1542.     height: 25px;
  1543.     text-align: center;
  1544. }
  1545. .socialIcon {
  1546.     width: 93px;
  1547.     height: 93px;
  1548.     background-color: #666;
  1549.     float: left;
  1550.     margin: 5px 5px;
  1551. }
  1552. .contact {
  1553.     width: 305px;
  1554.     height: 190px;
  1555.     float: left;
  1556.     margin: 5px 5px 0 0;
  1557.     background-color: #FBF6DE;
  1558.     visibility: hidden;
  1559.     display: none;
  1560.  
  1561. }
  1562. .contact h1 {
  1563.     font-size: 20px;
  1564.     width: 100%;
  1565.     height: 25px;
  1566.     text-align: center;
  1567. }
  1568. .contact p {
  1569.     font-size: 15px;
  1570.     width: 100%;
  1571.     height: auto;
  1572.     padding: .5em;
  1573.     line-height: 33px;
  1574. }
  1575. .contact img {
  1576.     position: relative;
  1577.     bottom: -5px;
  1578.     padding-right: 10px;
  1579. }
  1580. .aboutSection {
  1581.     width: 100%;
  1582.     height: 420px;
  1583.     background-color: #E0CD5D;
  1584.     float: left;
  1585.     margin-bottom: 10px;
  1586. }
  1587. .formSection {
  1588.     width: 460px;
  1589.     height: 300px;
  1590.     background-color: #E0CD5D;
  1591.     float: left;
  1592.     margin-bottom: 10px;
  1593. }
  1594. .formSectionItem {
  1595.     width: 758px;
  1596.     height: 142px;
  1597.     background-color: #FDF6DF;
  1598.     float: left;
  1599.     margin: 5px 0 0 5px;
  1600. }
  1601. .aboutSection h1 {
  1602.     font-size: 20px;
  1603.     line-height: 25px;
  1604.     text-indent: 10px;
  1605.     font-weight: bolder;
  1606.     background-color: #FDF6DF;
  1607.     width: 130px;
  1608.     margin: 5px 0 0 5px;
  1609. }
  1610. .birdContainer {
  1611.     width: 100%;
  1612.     height: auto;
  1613.     background: #E3D367;
  1614.     float: left;
  1615.     margin: 65px 0 25px 0;
  1616. }
  1617. .birdPicture {
  1618. width: 460px;
  1619. height: auto;
  1620. text-align: center;
  1621.     float:left;
  1622.     margin: 0px 0 0 10px;
  1623.  
  1624. }
  1625. .birdPicture img {
  1626.     width: 250px;
  1627.     height: 250px;
  1628.     padding:10px;
  1629.     background:#4C8081;
  1630. }
  1631. .birdInformation {
  1632.     float:left;
  1633.     width:460px;
  1634.     height:auto;
  1635.     background:#FFF;
  1636.     margin-left:10px;
  1637.     margin-bottom:10px;
  1638.  
  1639. }
  1640. .birdInformation p {
  1641.     font-size:30px;
  1642.     color:#4C8081;
  1643.     margin:0px;
  1644.     font-family: 'Titillium Web', sans-serif;
  1645.     font-weight: 200;
  1646.     padding:10px;
  1647. }
  1648. .birdBreed {
  1649.     width:100%;
  1650.     height:45px;
  1651.     float:left;
  1652.     border-bottom:1px dotted #c5c8cc;
  1653. }
  1654.  
  1655. .birdPrice {
  1656. width: 175px;
  1657.     height:110px;
  1658.     float:left;
  1659.     margin-top:10px;
  1660.     margin-left:10px;
  1661. }
  1662. .birdPrice p {
  1663. line-height: 90px;
  1664. width: 100%;
  1665. text-align: center;
  1666. font-size: 30px;
  1667. font-weight:400;
  1668. color:#4C8081;
  1669. }
  1670. .birdPersonality {
  1671.     width:250px;
  1672.     height:110px;
  1673.     background:#F93;
  1674.     float:left;
  1675.     margin-top:10px;
  1676.     margin-left:10px;
  1677. }
  1678.  
  1679. .birdDescription {
  1680. width: 435px;
  1681. height: auto;
  1682.     color:#4C8081;
  1683.     float:left;
  1684.     margin-top:10px;
  1685.     margin-left:10px;
  1686.     border-top:1px dotted #c5c8cc;
  1687.     border-bottom:1px dotted #c5c8cc;
  1688. }
  1689. .birdDescription p {
  1690.     font-size:13px;
  1691.     font-weight:400;
  1692. }
  1693. .birdBuy {
  1694.     background-color:#4C8081;
  1695.     float:left;
  1696.     margin-left:10px;
  1697.     margin-top:10px;
  1698. width: 150px;
  1699. text-align: center;
  1700.     -webkit-transition: all .2s ease-in-out;
  1701.     -moz-transition: all .2s ease-in-out;
  1702.     -o-transition: all .2s ease-in-out;
  1703.     transition: all .2s ease-in-out;
  1704. }
  1705. .birdBuy:hover {
  1706.     background-color: #5793C4;
  1707.     float:left;
  1708.     margin-left:10px;
  1709.     margin-top:10px;
  1710. width: 150px;
  1711. text-align: center;
  1712.     -webkit-transition: all .2s ease-in-out;
  1713.     -moz-transition: all .2s ease-in-out;
  1714.     -o-transition: all .2s ease-in-out;
  1715.     transition: all .2s ease-in-out;
  1716. }
  1717. .birdBuy p{
  1718.     padding:27px;
  1719.     color:#FFF;
  1720.     }
  1721. .birdTags {
  1722.     float:left;
  1723.     margin-left:10px;
  1724.     margin-top:10px;
  1725. width: 285px;
  1726. height:75px;
  1727. text-align: center;
  1728.     border-left:1px dotted #c5c8cc;
  1729.     margin-bottom:10px;
  1730. }
  1731. .birdTags p{
  1732.     font-size:15px;
  1733. }
  1734. }
  1735.        
  1736.             /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  1737.     @media only screen and (max-width: 479px) {
  1738. .container {
  1739.     padding: 0px;
  1740.     margin: auto;
  1741.     width: 325px;
  1742. }
  1743. .miniNav {
  1744.     width: 240px;
  1745.     height: 20px;
  1746.     background: #903;
  1747.     float: right;
  1748.     margin-bottom: 50px;
  1749. }
  1750. .miniNav .miniItem {
  1751.     width: 60px;
  1752.     height: 20px;
  1753.     background: #E3D367;
  1754.     float: left;
  1755.     text-align: center;
  1756.     font: Arial, Helvetica, sans-serif;
  1757.     font-size: 12px;
  1758. }
  1759. .nav {
  1760.     width: 320px;
  1761.     height: 45px;
  1762.     margin: auto;
  1763.     clear: both;
  1764. }
  1765. .nav .item {
  1766.     width: 46px;
  1767.     height: auto;
  1768.     background: #E3D367;
  1769.     float: left;
  1770.     text-align: center;
  1771.     font: Arial, Helvetica, sans-serif;
  1772.     font-size: 14px;
  1773.     padding: 7px;
  1774. }
  1775. .nav .item:hover {
  1776.     background: #4C8081;
  1777. }
  1778. .nav .item img {
  1779.     width: 25px;
  1780.     height: 25px;
  1781.     margin-right: 10px;
  1782.     position: relative;
  1783.     visibility: hidden;
  1784.     display: none;
  1785. }
  1786. .logoPosition {
  1787.     color: #578564;
  1788.     width: 50px;
  1789.     background: #E3D367;
  1790.     float: left;
  1791.     text-align: center;
  1792.     font: Arial, Helvetica, sans-serif;
  1793.     font-size: 20px;
  1794.     padding: 15px;
  1795.     height: 5px;
  1796.     float: left;
  1797.     margin-bottom: 65px;
  1798. }
  1799. .logoPosition img {
  1800.     position: relative;
  1801.     bottom: 25px;
  1802.     width: 50px;
  1803.     height: 65px;
  1804. }
  1805. .slider {
  1806.     width: 100%;
  1807.     height: 150px;
  1808.     background: #E3D367;
  1809.     float: left;
  1810.     margin-bottom: 10px;
  1811. }
  1812. .categories {
  1813.     width: 325px;
  1814.     height: auto;
  1815.     background: #E3D367;
  1816.     float: left;
  1817. }
  1818. .categoryWrapper {
  1819.     width: 320px;
  1820.     height: 285px;
  1821.     float: left;
  1822.     margin: 5px;
  1823. }
  1824. .categoryList {
  1825.     width: 315px;
  1826.     height: 30px;
  1827.     background-color: #FDF6DF;
  1828.     float: left;
  1829.     margin-bottom: 1.9px;
  1830. }
  1831. .categoryList img {
  1832.     width: 15px;
  1833.     height: 15px;
  1834.     -webkit-transition: all .2s ease-in-out;
  1835.     -moz-transition: all .2s ease-in-out;
  1836.     -o-transition: all .2s ease-in-out;
  1837.     transition: all .2s ease-in-out;
  1838. }
  1839. .categoryList:hover {
  1840.     background-color: #4C8081;
  1841.     color: #fcf8c3;
  1842. }
  1843. .categoryList:hover img {
  1844.     margin-right: 5px;
  1845.     -webkit-transition: all .2s ease-in-out;
  1846.     -moz-transition: all .2s ease-in-out;
  1847.     -o-transition: all .2s ease-in-out;
  1848.     transition: all .2s ease-in-out;
  1849. }
  1850. .captionSection {
  1851.     width: 100%;
  1852.     height: 25px;
  1853.     background: #4C8081;
  1854.     color: #FFF;
  1855.     float: left;
  1856.     font-size: 20px;
  1857.     padding-top: .3em;
  1858. }
  1859. .information {
  1860.     width: 325px;
  1861.     height: auto;
  1862.     background: #E3D367;
  1863.     float: left;
  1864.     margin-top: 10px;
  1865.     margin-bottom: 10px;
  1866. }
  1867. .info1 {
  1868.     width: 315px;
  1869.     height: 285px;
  1870.     background-color: #FDF6DF;
  1871.     overflow: hidden;
  1872.     float: left;
  1873.     margin-left: 5px;
  1874.     font-family: 'Titillium Web', sans-serif;
  1875.     font-weight: 200;
  1876. }
  1877. .info2 {
  1878.     overflow: hidden;
  1879.     width: 315px;
  1880.     height: 140px;
  1881.     background-color: #FDF6DF;
  1882.     float: left;
  1883.     margin-top: 5px;
  1884.     margin-left: 5px;
  1885.     font-family: 'Titillium Web', sans-serif;
  1886.     font-weight: 200;
  1887. }
  1888. .info3 {
  1889.     overflow: hidden;
  1890.     width: 315px;
  1891.     height: 140px;
  1892.     background-color: #FDF6DF;
  1893.     float: left;
  1894.     margin-top: 5px;
  1895.     margin-left: 5px;
  1896.     margin-bottom: 5px;
  1897.     font-family: 'Titillium Web', sans-serif;
  1898.     font-weight: 200;
  1899. }
  1900. .info1 p {
  1901.     position: absolute;
  1902.     color: #FFF;
  1903.     font-size: 20px;
  1904.     z-index: 1;
  1905.     margin-top: 255px;
  1906.     background: #4C8081;
  1907.     padding: 5px;
  1908.     width: 305px;
  1909.     text-align: center;
  1910. }
  1911. .info2 p {
  1912.     position: absolute;
  1913.     color: #FFF;
  1914.     font-size: 20px;
  1915.     z-index: 1;
  1916.     margin-top: 110px;
  1917.     background: #4C8081;
  1918.     padding: 5px;
  1919.     width: 305px;
  1920.     text-align: center;
  1921. }
  1922. .info2 img {
  1923.     width: 325px;
  1924.     height: 175px;
  1925.     -webkit-transition: all .5s ease-in-out;
  1926.     -moz-transition: all .5s ease-in-out;
  1927.     -o-transition: all .5s ease-in-out;
  1928.     transition: all .5s ease-in-out;
  1929. }
  1930. .info1 img:hover, .info2 img:hover, .info3 img:hover {
  1931.     -webkit-transition: all .5s ease-in-out;
  1932.     -moz-transition: all .5s ease-in-out;
  1933.     -o-transition: all .5s ease-in-out;
  1934.     transition: all .5s ease-in-out;
  1935.     -webkit-transform: scale(1.1);
  1936.     -moz-transform: scale(1.1);
  1937.     -o-transform: scale(1.1);
  1938.     transform: scale(1.1);
  1939. }
  1940. .info3 p {
  1941.     position: absolute;
  1942.     color: #FFF;
  1943.     font-size: 20px;
  1944.     z-index: 1;
  1945.     margin-top: 110px;
  1946.     background: #4C8081;
  1947.     padding: 5px;
  1948.     width: 305px;
  1949.     text-align: center;
  1950. }
  1951. .captionSection {
  1952.     width: 100%;
  1953.     height: 31.9px;
  1954.     background: #4C8081;
  1955.     color: #FFF;
  1956.     float: left;
  1957.     font-size: 25px;
  1958.     padding-top: .3em;
  1959.     text-align: left;
  1960.     font-family: 'Titillium Web', sans-serif;
  1961.     font-weight: 200;
  1962. }
  1963. .captionSection p {
  1964.     margin-left: 10px;
  1965. }
  1966. .featured {
  1967.     width: 325px;
  1968.     height: 150px;
  1969.     background: #E3D367;
  1970.     float: left;
  1971.     margin-bottom: 10px;
  1972. }
  1973. .featured h1 {
  1974.     font-size: 20px;
  1975.     line-height: 25px;
  1976.     text-indent: 10px;
  1977.     font-weight: bolder;
  1978.     background-color: #FDF6DF;
  1979.     width: 280px;
  1980.     margin: 5px 0 0 5px;
  1981. }
  1982. #carousel div img {
  1983.     border: none;
  1984.     width: 75px;
  1985.     height: 75px;
  1986.     margin-top: 10px;
  1987. }
  1988. .footer {
  1989.     width: 325px;
  1990.     height: 200px;
  1991.     background: #E3D367;
  1992.     float: left;
  1993. }
  1994. .footerWrapper {
  1995.     background-color: #FDF6DF;
  1996.     width: 315px;
  1997.     height: 190px;
  1998.     float: left;
  1999.     margin: 5px 5px 5px 5px;
  2000. }
  2001. .footerTitle {
  2002.     width: 240px;
  2003.     height: 30px;
  2004.     background-color: #FDF6DF;
  2005.     float: left;
  2006.     margin: 5px 5px 5px 10px;
  2007. }
  2008. .footerListWrapper {
  2009.     width: 310px;
  2010.     height: 155px;
  2011.     /*background-color: #099;*/
  2012.     float: left;
  2013.     margin-left: 5px;
  2014. }
  2015. .footerList {
  2016.     width: 65px;
  2017.     height: 20px;
  2018.     background-color: #FDF6DF;
  2019.     float: left;
  2020.     margin: 0px 5px 5px 5px;
  2021. }
  2022. .social {
  2023.     width: 310px;
  2024.     height: 190px;
  2025.     float: left;
  2026.     margin: 5px 5px 0 0;
  2027.     background-color: #FBF6DE;
  2028.     visibility: hidden;
  2029.     display: none;
  2030. }
  2031. .social h1 {
  2032.     font-size: 20px;
  2033.     width: 100%;
  2034.     height: 25px;
  2035.     text-align: center;
  2036. }
  2037. .social p {
  2038.     font-size: 15px;
  2039.     width: 100%;
  2040.     height: 25px;
  2041.     text-align: center;
  2042. }
  2043. .socialIcon {
  2044.     width: 93px;
  2045.     height: 93px;
  2046.     background-color: #666;
  2047.     float: left;
  2048.     margin: 5px 5px;
  2049. }
  2050. .contact {
  2051.     width: 305px;
  2052.     height: 190px;
  2053.     float: left;
  2054.     margin: 5px 5px 0 0;
  2055.     background-color: #FBF6DE;
  2056.     visibility: hidden;
  2057.     display: none;
  2058. }
  2059. .contact h1 {
  2060.     font-size: 20px;
  2061.     width: 100%;
  2062.     height: 25px;
  2063.     text-align: center;
  2064. }
  2065. .contact p {
  2066.     font-size: 15px;
  2067.     width: 100%;
  2068.     height: auto;
  2069.     padding: .5em;
  2070.     line-height: 33px;
  2071. }
  2072. .contact img {
  2073.     position: relative;
  2074.     bottom: -5px;
  2075.     padding-right: 10px;
  2076. }
  2077. .aboutSection {
  2078.     width: 100%;
  2079.     height: 420px;
  2080.     background-color: #E0CD5D;
  2081.     float: left;
  2082.     margin-bottom: 10px;
  2083. }
  2084. .formSection {
  2085.     width: 460px;
  2086.     height: 300px;
  2087.     background-color: #E0CD5D;
  2088.     float: left;
  2089.     margin-bottom: 10px;
  2090. }
  2091. .formSectionItem {
  2092.     width: 758px;
  2093.     height: 142px;
  2094.     background-color: #FDF6DF;
  2095.     float: left;
  2096.     margin: 5px 0 0 5px;
  2097. }
  2098. .aboutSection h1 {
  2099.     font-size: 20px;
  2100.     line-height: 25px;
  2101.     text-indent: 10px;
  2102.     font-weight: bolder;
  2103.     background-color: #FDF6DF;
  2104.     width: 130px;
  2105.     margin: 5px 0 0 5px;
  2106. }
  2107. .birdContainer {
  2108.     width: 100%;
  2109.     height: auto;
  2110.     background: #E3D367;
  2111.     float: left;
  2112.     margin: 65px 0 25px 0;
  2113. }
  2114. .birdPicture {
  2115. width: 100%;
  2116. height: auto;
  2117. text-align: center;
  2118.     float:left;
  2119.  
  2120. }
  2121. .birdPicture img {
  2122.     width: 250px;
  2123.     height: 250px;
  2124.     padding:10px;
  2125.     background:#4C8081;
  2126. }
  2127. .birdInformation {
  2128.     float:left;
  2129.     width:305px;
  2130.     height:auto;
  2131.     background:#FFF;
  2132.     margin-left:10px;
  2133.     margin-bottom:10px;
  2134.  
  2135. }
  2136. .birdInformation p {
  2137.     font-size:30px;
  2138.     color:#4C8081;
  2139.     margin:0px;
  2140.     font-family: 'Titillium Web', sans-serif;
  2141.     font-weight: 200;
  2142.     padding:10px;
  2143. }
  2144. .birdBreed {
  2145.     width:100%;
  2146.     height:45px;
  2147.     float:left;
  2148.     border-bottom:1px dotted #c5c8cc;
  2149. }
  2150.  
  2151. .birdPrice {
  2152. width: 300px;
  2153.     height:110px;
  2154.     float:left;
  2155.     margin-top:10px;
  2156.     margin-left:10px;
  2157. }
  2158. .birdPrice p {
  2159. line-height: 90px;
  2160. width: 100%;
  2161. text-align: center;
  2162. font-size: 30px;
  2163. font-weight:400;
  2164. color:#4C8081;
  2165. }
  2166. .birdPersonality {
  2167.     width:300px;
  2168.     height:110px;
  2169.     text-align:center;
  2170.     float:left;
  2171.     margin-top:10px;
  2172.     margin-left:10px;
  2173. }
  2174.  
  2175. .birdDescription {
  2176. width: 285px;
  2177. height: auto;
  2178.     color:#4C8081;
  2179.     float:left;
  2180.     margin-top:10px;
  2181.     margin-left:10px;
  2182.     border-top:1px dotted #c5c8cc;
  2183.     border-bottom:1px dotted #c5c8cc;
  2184. }
  2185. .birdDescription p {
  2186.     font-size:13px;
  2187.     font-weight:400;
  2188. }
  2189. .birdBuy {
  2190.     background-color:#4C8081;
  2191.     float:left;
  2192.     margin-left:10px;
  2193.     margin-top:10px;
  2194. width: 100px;
  2195. text-align: center;
  2196.     -webkit-transition: all .2s ease-in-out;
  2197.     -moz-transition: all .2s ease-in-out;
  2198.     -o-transition: all .2s ease-in-out;
  2199.     transition: all .2s ease-in-out;
  2200. }
  2201. .birdBuy:hover {
  2202.     background-color: #5793C4;
  2203.     float:left;
  2204.     margin-left:10px;
  2205.     margin-top:10px;
  2206. width: 100px;
  2207. text-align: center;
  2208.     -webkit-transition: all .2s ease-in-out;
  2209.     -moz-transition: all .2s ease-in-out;
  2210.     -o-transition: all .2s ease-in-out;
  2211.     transition: all .2s ease-in-out;
  2212. }
  2213. .birdBuy p{
  2214.     padding:27px;
  2215.     color:#FFF;
  2216.     }
  2217. .birdTags {
  2218.     float:left;
  2219.     margin-left:10px;
  2220.     margin-top:10px;
  2221. width: 180px;
  2222. height:75px;
  2223. text-align: center;
  2224.     border-left:1px dotted #c5c8cc;
  2225.     margin-bottom:10px;
  2226. }
  2227. .birdTags p{
  2228.     font-size:15px;
  2229. }
  2230.  
  2231. }
  2232. .slider img {
  2233.     width: 100%;
  2234.     height: 100%;
  2235. }
  2236.  
  2237.  
  2238. .theme-default .nivoSlider {
  2239.     position:relative;
  2240.     background:#fff url(loading.gif) no-repeat 50% 50%;
  2241.     margin-bottom:10px;
  2242.     -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
  2243.     -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
  2244.     box-shadow: 0px 1px 5px 0px #4a4a4a;
  2245. }
  2246. .theme-default .nivoSlider img {
  2247.     position:absolute;
  2248.     top:0px;
  2249.     left:0px;
  2250.     display:none;
  2251. }
  2252. .theme-default .nivoSlider a {
  2253.     border:0;
  2254.     display:block;
  2255. }
  2256.  
  2257. .theme-default .nivo-controlNav {
  2258.     text-align: center;
  2259.     padding: 20px 0;
  2260. }
  2261. .theme-default .nivo-controlNav a {
  2262.     display:inline-block;
  2263.     width:22px;
  2264.     height:22px;
  2265.     background:url(bullets.png) no-repeat;
  2266.     text-indent:-9999px;
  2267.     border:0;
  2268.     margin: 0 2px;
  2269. }
  2270. .theme-default .nivo-controlNav a.active {
  2271.     background-position:0 -22px;
  2272. }
  2273.  
  2274. .theme-default .nivo-directionNav a {
  2275.     display:block;
  2276.     width:30px;
  2277.     height:30px;
  2278.     background:url(arrows.png) no-repeat;
  2279.     text-indent:-9999px;
  2280.     border:0;
  2281.     opacity: 0;
  2282.     -webkit-transition: all 200ms ease-in-out;
  2283.     -moz-transition: all 200ms ease-in-out;
  2284.     -o-transition: all 200ms ease-in-out;
  2285.     transition: all 200ms ease-in-out;
  2286. }
  2287. .theme-default:hover .nivo-directionNav a { opacity: 1; }
  2288. .theme-default a.nivo-nextNav {
  2289.     background-position:-30px 0;
  2290.     right:15px;
  2291. }
  2292. .theme-default a.nivo-prevNav {
  2293.     left:15px;
  2294. }
  2295.  
  2296. .theme-default .nivo-caption {
  2297.     font-family: Helvetica, Arial, sans-serif;
  2298. }
  2299. .theme-default .nivo-caption a {
  2300.     color:#fff;
  2301.     border-bottom:1px dotted #fff;
  2302. }
  2303. .theme-default .nivo-caption a:hover {
  2304.     color:#fff;
  2305. }
  2306.  
  2307. .theme-default .nivo-controlNav.nivo-thumbs-enabled {
  2308.     width: 100%;
  2309. }
  2310. .theme-default .nivo-controlNav.nivo-thumbs-enabled a {
  2311.     width: auto;
  2312.     height: auto;
  2313.     background: none;
  2314.     margin-bottom: 5px;
  2315. }
  2316. .theme-default .nivo-controlNav.nivo-thumbs-enabled img {
  2317.     display: block;
  2318.     width: 120px;
  2319.     height: auto;
  2320. }
  2321. /*
  2322.  * jQuery Nivo Slider v3.2
  2323.  * http://nivo.dev7studios.com
  2324.  *
  2325.  * Copyright 2012, Dev7studios
  2326.  * Free to use and abuse under the MIT license.
  2327.  * http://www.opensource.org/licenses/mit-license.php
  2328.  */
  2329.  
  2330. /* The Nivo Slider styles */
  2331. .nivoSlider {
  2332.     position:relative;
  2333.     width:100%;
  2334.     height:auto;
  2335.     overflow: hidden;
  2336. }
  2337. .nivoSlider img {
  2338.     position:absolute;
  2339.     top:0px;
  2340.     left:0px;
  2341.     max-width: none;
  2342. }
  2343. .nivo-main-image {
  2344.     display: block !important;
  2345.     position: relative !important;
  2346.     width: 100% !important;
  2347. }
  2348.  
  2349. /* If an image is wrapped in a link */
  2350. .nivoSlider a.nivo-imageLink {
  2351.     position:absolute;
  2352.     top:0px;
  2353.     left:0px;
  2354.     width:100%;
  2355.     height:100%;
  2356.     border:0;
  2357.     padding:0;
  2358.     margin:0;
  2359.     z-index:6;
  2360.     display:none;
  2361.     background:white;
  2362.     filter:alpha(opacity=0);
  2363.     opacity:0;
  2364. }
  2365. /* The slices and boxes in the Slider */
  2366. .nivo-slice {
  2367.     display:block;
  2368.     position:absolute;
  2369.     z-index:5;
  2370.     height:100%;
  2371.     top:0;
  2372. }
  2373. .nivo-box {
  2374.     display:block;
  2375.     position:absolute;
  2376.     z-index:5;
  2377.     overflow:hidden;
  2378. }
  2379. .nivo-box img { display:block; }
  2380.  
  2381. /* Caption styles */
  2382. .nivo-caption {
  2383.     position:absolute;
  2384.     left:0px;
  2385.     bottom:0px;
  2386.     background:#000;
  2387.     color:#fff;
  2388.     width:100%;
  2389.     z-index:8;
  2390.     padding: 5px 10px;
  2391.     opacity: 0.8;
  2392.     overflow: hidden;
  2393.     display: none;
  2394.     -moz-opacity: 0.8;
  2395.     filter:alpha(opacity=8);
  2396.     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  2397.     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  2398.     box-sizing: border-box;         /* Opera/IE 8+ */
  2399. }
  2400. .nivo-caption p {
  2401.     padding:5px;
  2402.     margin:0;
  2403. }
  2404. .nivo-caption a {
  2405.     display:inline !important;
  2406. }
  2407. .nivo-html-caption {
  2408.     display:none;
  2409. }
  2410. /* Direction nav styles (e.g. Next & Prev) */
  2411. .nivo-directionNav a {
  2412.     position:absolute;
  2413.     top:45%;
  2414.     z-index:9;
  2415.     cursor:pointer;
  2416. }
  2417. .nivo-prevNav {
  2418.     left:0px;
  2419. }
  2420. .nivo-nextNav {
  2421.     right:0px;
  2422. }
  2423. /* Control nav styles (e.g. 1,2,3...) */
  2424. .nivo-controlNav {
  2425.     text-align:center;
  2426.     padding: 15px 0;
  2427. }
  2428. .nivo-controlNav a {
  2429.     cursor:pointer;
  2430. }
  2431. .nivo-controlNav a.active {
  2432.     font-weight:bold;
  2433. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!