API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 28th, 2012
21
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.45 KB | None | 0 0
raw download clone embed print report
  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. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!