Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Nov 28th, 2012  |  syntax: None  |  size: 10.45 KB  |  views: 4  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. @charset "utf-8";
  2.  
  3.         body {
  4.                 background-color: #b2c5bf;
  5.                 font-size: 140%;
  6.         }
  7.  
  8.         a {
  9.                 text-decoration: none;
  10.                 color: #1082ba;
  11.         }
  12.  
  13.         #container {
  14.                 background-color: #FFFFFF;
  15.                 height: 100%;
  16.                 width: 80%;
  17.                 position: relative;
  18.                 margin-left: auto;
  19.                 margin-right: auto;
  20.                 overflow: hidden;
  21.                 padding: 0 1.5%;
  22.         } /* container is 80% of browser window */
  23.  
  24.  
  25.         /* SEPERATE BANNER FOR INDEX PAGE!!!!! */
  26.         #homebannerwrapper {
  27.                 position: relative;
  28.                 margin-left: auto;
  29.                 margin-right: auto;
  30.                 width: 100%;
  31.                 background-color: #ea7764;
  32.         }
  33.  
  34.         #homebannerwrapper h1 {
  35.                 font-family: 'Helvetica Neue', sans-serif;
  36.                 font-size: 600%; /* 96px */
  37.                 font-weight: 200;
  38.                 color: #FFFFFF;
  39.                 text-transform: uppercase;
  40.                 float: left;
  41.                 margin-top: 2%;
  42.                 width: 80%;
  43.                 margin-bottom: 0;
  44.         }
  45.        
  46.         #homebanner {
  47.                
  48.                 width: 100%;
  49.                 line-height: 0;
  50.         }
  51.  
  52.        
  53.  
  54.         #indexnavigation {
  55.                 width: 100%;
  56.                 position: relative;
  57.                 margin: 0 auto 7%;
  58.                 z-index: 1;
  59.        
  60.         }
  61.        
  62.        
  63.        
  64.  
  65.  
  66.  
  67.         #banner {
  68.                 position: relative;
  69.                 margin-left: auto;
  70.                 margin-right: auto;
  71.                 width: 100%;
  72.                 height: 100%;
  73.                 line-height: 0;
  74.                 overflow: hidden;
  75.                 background-color: #ea7764;
  76.                 margin-bottom: 5%;
  77.                
  78.                
  79.         } /* banner and navigation are 97% of container */
  80.  
  81.         #logo {
  82.                 max-width: 100%;
  83.                 float: right;
  84.                 margin-right: 2%;
  85.                 margin-top: 1%;
  86.                 width: 9%;
  87.                 margin-bottom: 1%;
  88.                
  89.         }
  90.  
  91.  
  92.  
  93.  
  94.         #navigation {
  95.                 width: 90%;
  96.                 position: absolute;
  97.                 bottom: -30px;
  98.                 z-index: 0;
  99.                 left: 0.5%;
  100.         }
  101.  
  102.         li.navilinks {
  103.                 float: left;
  104.                 margin: 0;
  105.                 display: block;
  106.                 padding: 2px 8px;
  107.                 text-decoration: none;
  108.                 font-weight: 300;
  109.                 color: #000000;
  110.                 background-color: #ea7764;
  111.                 font-family: 'Open Sans', sans-serif;
  112.                 font-size: 100%;
  113.                 margin-top: 8px;
  114.                 margin-left: 5px;
  115.          }
  116.  
  117.         /* seperate for index because it needs 100% */
  118.         ul#indexnavi {
  119.                 width: 100%;
  120.                
  121.                 float: left;
  122.                 margin: 0 0 0 0;
  123.                 padding: 0;
  124.                 list-style: none;
  125.                 background-color: #ea7764;
  126.                
  127.                
  128.          }
  129.  
  130.         ul#navi {
  131.                 width: 100%;
  132.                
  133.                 float: left;
  134.                 margin: 0 0 3em 0;
  135.                 padding: 0;
  136.                 list-style: none;
  137.                 background-color: #ea7764;
  138.                
  139.                
  140.          }
  141.  
  142.         a.navilinkstyle:link,a.navilinkstyle:visited {
  143.                 font-weight: 300;
  144.                 color:#000000;
  145.                 text-align:center;
  146.                 padding:4px;
  147.                 margin: 0;
  148.                 text-decoration:none;
  149.                 text-transform:uppercase;
  150.        
  151.         }
  152.  
  153.         a.navilinkstyle:hover,a.navilinkstyle:active {
  154.                 margin: 0;
  155.                 color:#FFFFFF;
  156.         }
  157.  
  158.         a.link {
  159.                 font-family: Helvetica, sans-serif;
  160.                 color: #1082ba;
  161.                 text-transform: none;
  162.         }
  163.  
  164.  
  165.  
  166.  
  167.  
  168.  
  169.         /*FOOTER!!!!!FOOTER!!!!!FOOTER!!!!!FOOTER!!!!!
  170.         FOOTER!!!!!FOOTER!!!!!FOOTER!!!!!FOOTER!!!!!*/
  171.        
  172.         #footer {
  173.                 position: relative;
  174.                 margin: 0 auto;
  175.                 background-color: #FFFFFF;
  176.                 width: 80%;
  177.                 margin-bottom: 1%;
  178.                 padding: 0 1.5% 1%;
  179.         }
  180.        
  181.         #footerwrapper {
  182.                 position: relative;
  183.                 width: 60%;
  184.                 margin-left: auto;
  185.                 margin-right: auto;
  186.                 margin-bottom: 0.25%;
  187.                 padding-bottom: 3%;
  188.                 padding-top: 10%;
  189.         }
  190.  
  191.         img#filmstrap {
  192.                 position: relative;
  193.                 margin: 0 auto;
  194.                 width: 100%;
  195.         }
  196.  
  197.         footer {
  198.                 font-size: 80%;
  199.                 text-align: center;
  200.         }
  201.  
  202.  
  203.  
  204.  
  205.  
  206.  
  207.  
  208.  
  209.  
  210.  
  211.         /*INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!!
  212. INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!!
  213. INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!! INDEX COMPONENTS!!!!!!!!!       */
  214.  
  215.         #rightimagewrapper {
  216.                 float: right;
  217.                 width: 25%;
  218.         }
  219.  
  220.         img.frontimages {
  221.                 width: 100%;
  222.                 clear: left;
  223.                 margin-bottom: 0.75%;
  224.         }
  225.  
  226.         #finerollingimage {
  227.                 float: left;
  228.                
  229.         }
  230.  
  231.  
  232.        
  233.         #indextextbox {
  234.                 width: 65%;
  235.                 float: left;
  236.         }
  237.        
  238.        
  239.         p.paragraph {
  240.                 font-family: 'Open Sans', sans-serif;
  241.                 font-weight: 400;
  242.                 float: left;
  243.                 margin-bottom: 50px;
  244.         }
  245.        
  246.         h2.fronttitle {
  247.                 font-family: 'Open Sans', sans-serif;
  248.                 font-size: 600%;
  249.                 font-weight: 8em;
  250.                 color: #1082ba;
  251.                 text-decoration: underline;
  252.                 float: left;
  253.                 margin-bottom: 10%;
  254.                 margin-top: 1%;;
  255.                
  256.         }
  257.        
  258.         h3.frontsubheads {
  259.                 font-family: 'Open Sans', sans-serif;
  260.                 text-transform: uppercase;
  261.                 font-weight: 900;
  262.                 float: left;
  263.                 margin: 0;
  264.         }
  265.                
  266.                
  267.                
  268.         p {
  269.                 font-family: 'Open Sans', sans-serif;
  270.                 font-weight: 300;
  271.                 font-size: 100%;
  272.                 line-height: 1.5;
  273.                 margin: 0;
  274.                 padding: 0;
  275.         }
  276.                
  277.         h1 { /* TITLES OF PAGES */
  278.                 float: left;
  279.                 font-family: 'Open Sans', sans-serif;
  280.                 font-size: 6em;
  281.                 font-weight: 300;
  282.                 color: #FFFFFF;
  283.                 text-transform: uppercase;
  284.                 margin-left: 1.5%;
  285.                 margin-bottom: 5%;
  286.                 width: 70%;
  287.         }
  288.  
  289.         h2 {
  290.                 font-family: 'Open Sans', sans-serif;
  291.                 font-size: 700%;
  292.                 font-weight: 100;
  293.                 color: #1082ba;
  294.                 text-decoration: underline;
  295.         }
  296.  
  297.         h3 {
  298.                 font-family: 'Open Sans', sans-serif;
  299.                 text-transform: uppercase;
  300.                 font-weight: 900;
  301.                 margin: 0;
  302.                 padding: 0;
  303.         }
  304.        
  305.         h4 {
  306.                 font-family: 'Open Sans', sans-serif;
  307.                 font-size: 400%;
  308.                 font-weight: 100;
  309.                 color: #1082ba;
  310.         }
  311.  
  312.        
  313.  
  314.        
  315.  
  316. /* PRODUCTIONS COMPONENTS!!!!!!!!!!! */
  317.  
  318.         div.productioncontainer {
  319.                 width: 65%;
  320.                 position: relative;
  321.                 margin: 0 auto 10%;
  322.         }
  323.        
  324.        
  325.         img.videos {
  326.                 width: 100%;
  327.         }
  328.        
  329.  
  330.  
  331.         h4.productiontitles {
  332.                 font-family: 'Helvetica Neue Light', 'Helvetica Neue', Arial, sans-serif;
  333.                 font-size: 200%;
  334.                 font-weight: 100;
  335.                 color: #1082ba;
  336.                 text-align: center;
  337.                 margin: 0;
  338.                 margin-bottom: 2%;
  339.         }
  340.  
  341.         p.productionsbody {
  342.                 font-family: "Helvetica Neue", sans-serif;
  343.                 font-weight: 200;
  344.                 position: relative;
  345.                 margin: 0;
  346.         }
  347.        
  348.         div.videoinfo a {
  349.                 text-decoration: none;
  350.         }
  351.        
  352.        
  353.        
  354.        
  355.        
  356.        
  357.        
  358.        
  359.        
  360.        
  361.        
  362.         /*PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES
  363.         PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES
  364.         PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES
  365.         PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES PRICES */
  366.        
  367.         div#weddingswrapper {
  368.                 float: left;
  369.                 margin-left: 1.5%;
  370.                 width: 45%;
  371.                 clear: both;
  372.                 margin-bottom: 5%;
  373.         }
  374.        
  375.         div#businessswrapper {
  376.                 float: right;
  377.                 margin-right: 1.5%;
  378.                 width: 45%;
  379.                 margin-bottom: 5%;
  380.         }
  381.        
  382.         div#otherwrapper {
  383.                 float: right;
  384.                 margin-right: 1.5%;
  385.                 width: 45%;
  386.         }
  387.        
  388.         div#musicwrapper {
  389.                 float: left;
  390.                 width: 45%;
  391.                 margin-left: 1.5%;
  392.         }
  393.        
  394.         div.pricewrapper {
  395.                 width: 100%;
  396.         }
  397.        
  398.         p.pricesinfo {
  399.                 font-family: "Helvetica Neue", sans-serif;
  400.                 font-weight: 200;
  401.                 margin: 0;
  402.                 float: left;
  403.         }
  404.        
  405.         h4.pricestitle {
  406.                 font-family: 'Helvetica Neue Light', 'Helvetica Neue', Arial, sans-serif;
  407.                 font-size: 250%;
  408.                 font-weight: 100;
  409.                 color: #1082ba;
  410.                 margin: 0;
  411.                 float: left;
  412.                 margin-bottom: 2%;
  413.                 margin-left: 1.5%;
  414.         }
  415.        
  416.         h3.prices {
  417.                 margin: 0;
  418.                 margin-left: 2.5%;
  419.                 float: left;
  420.                 clear: both;
  421.         }
  422.        
  423.        
  424.        
  425.        
  426.        
  427.        
  428.  
  429. /*  CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US
  430. CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US
  431. CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US
  432. CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US   CONTACT US    CONTACT US    CONTACT US    CONTACT US  */
  433.  
  434.  
  435.         #telephone {
  436.                 float: left;
  437.                 width: 46%;
  438.                 margin-bottom: 9%;
  439.  
  440.  
  441.         }
  442.        
  443.         #email {
  444.                 float: right;
  445.                 width: 46%;
  446.                 margin-bottom: 12%;
  447.                
  448.         }
  449.        
  450.         #networks {
  451.                 float: left;
  452.                 width: 46%;
  453.                 margin-bottom: 10%;
  454.  
  455.         }
  456.        
  457.         #post {
  458.                 float: right;
  459.                 width: 46%;
  460.                 margin-bottom: 10%;
  461.                
  462.         }
  463.        
  464.         h4.contacttitles {
  465.                 font-size: 250%;
  466.                 position: relative;
  467.                 top: 0px;
  468.                 margin: 0;
  469.                 margin-bottom: 5px;
  470.         }
  471.        
  472.         ul.contactinfo {
  473.                 margin: 0;
  474.                 position: relative;
  475.                 left: 5px;
  476.                 top: 10px;
  477.         }
  478.  
  479.         li.contactitems {
  480.                 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  481.                 font-size: 1em;
  482.                 font-weight: 200;
  483.         }
  484.        
  485.         /* need to replace with images */
  486.         img.contacticon {
  487.                 width: 30%;
  488.                 float: left;
  489.                
  490.         }
  491.        
  492.         li {
  493.                 font-family: 'Helvetica Neue Light', 'Helvetica Neue', Arial, sans-serif;
  494.                 font-size: 100%;
  495.                 text-decoration: none;
  496.                 display: block;
  497.                 margin-bottom: 5px;
  498.         }
  499.        
  500.        
  501.        
  502.        
  503.        
  504.        
  505.         /*ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US
  506. ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US
  507. ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US ABOUT US*/
  508.        
  509.         #abouttext {
  510.                 float: left;
  511.                 width: 50%;
  512.                
  513.         }
  514.        
  515.         #abouttext h2 {
  516.                 margin-top: 0;
  517.         }
  518.                
  519.         #aboutimagewrapper {
  520.                 float: right;
  521.                 width: 45%;
  522.                 margin-top: 5%;
  523.         }
  524.        
  525.         img.aboutimages {
  526.                 width: 100%;
  527.                 margin-bottom: 2%;
  528.         }
  529.        
  530.        
  531.        
  532.        
  533.        
  534.        
  535.         /* MEDI` QUERIES */
  536.  
  537. @media screen and (max-width: 480px) {
  538.  
  539.                 #container, #footer {
  540.                         width: 100%;
  541.         }
  542.  
  543.                 #homebannerwrapper h1 {
  544.                         font-size: 220%;
  545.         }
  546.                
  547.                 h1 {
  548.                         font-size: 220%;
  549.                 }
  550.        
  551.                
  552.                 li.navilinks {
  553.                 font-size: 65%;
  554.                 padding: 0.25% 0;
  555.                 margin: 0;
  556.         }
  557.  
  558.                 #finerollingimage {
  559.                 width: 97%;
  560.                 position: relative;
  561.                 margin-left: 1.5%;
  562.                
  563.         }
  564.  
  565.                 h2.fronttitle {
  566.                 font-size: 400%;
  567.         }
  568.        
  569.                 #navigation {
  570.                         bottom: -40px;
  571.                 }
  572.  
  573.         /*INDEXINDEXINDEX*/
  574.        
  575.                 div#rightimagewrapper {
  576.                         display: none;
  577.                 }
  578.        
  579.                 #indextextbox {
  580.                 width: 90%;
  581.         }
  582. }
  583.  
  584.  
  585.  
  586.  
  587.  
  588. @media screen and (min-width: 480px) and (max-width: 600px) {
  589.  
  590.                 #container, #footer {
  591.                         width: 100%;
  592.         }
  593.  
  594.                 #homebannerwrapper h1 {
  595.                         font-size: 2.75em;
  596.         }
  597.        
  598.                 h1 {
  599.                         font-size: 3.5em;
  600.                 }
  601.        
  602.                 h2.fronttitle {
  603.                 font-size: 450%;
  604.         }
  605.        
  606.                 li.navilinks {
  607.                 font-size: 75%;
  608.                 padding: 0.25% 0;
  609.                 margin: 1%;
  610.         }
  611.        
  612.                 #navigation {
  613.                         bottom: -40px;
  614.                 }
  615. }
  616.        
  617.  
  618. @media screen and (min-width: 600px) and (max-width: 780px) {
  619.  
  620.                 #container, #footer {
  621.                         width: 100%;
  622.         }
  623.  
  624.  
  625.                 #homebannerwrapper h1 {
  626.                         font-size: 3.5em;
  627.         }
  628.        
  629.                 h1 {
  630.                         font-size: 3.5em;
  631.                 }
  632.                
  633.        
  634. }
  635.  
  636.  
  637. @media screen and (min-width: 780px) and (max-width: 850px) {
  638.  
  639.                 #homebannerwrapper h1 {
  640.                         font-size: 4em;
  641.         }
  642.                 h1 {
  643.                         font-size: 4em;
  644.                 }
  645.                
  646.  
  647. }
  648.  
  649.  
  650. @media screen and (min-width: 850px) and (max-width: 1000px) {
  651.  
  652.                 #homebannerwrapper h1 {
  653.                         font-size: 5em;
  654.         }
  655.        
  656.                 h1 {
  657.                         font-size: 5em;
  658.                 }
  659.                
  660.        
  661. }
clone this paste RAW Paste Data