CSS 24
Html5styles.css Guest on 6th February 2021 10:06:28 AM
  1. /* Just some base styles not needed for example to function */
  2. *, html { font-family: Verdana, Arial, Helvetica, sans-serif;
  3. font-weight: normal;
  4.  /* will be replaced by Helvetica Neue 55 Roman */ }
  5.  
  6. h1, h2, h3, h4, h5, h6 {
  7. margin: 0px;
  8. padding: 0;
  9. font-weight: normal;
  10. font-family: Arial, Helvetica, sans-serif;
  11. letter-spacing: .04em;
  12. /* zeros out browser defualts and adds a little kerning-out  */  }
  13.  
  14. body, form, ul, li, p, h1, h2, h3, h4, h5
  15. {
  16.  margin: 0;
  17.  padding: 0;
  18. }
  19. body {
  20. background-color: #606061;
  21. width: 100%;
  22. }
  23.  
  24. img { border: none; }
  25.  
  26. p {
  27. margin: 0 0 0.5em 0;
  28. padding: 5px;
  29. color: #333;
  30. font-size: 13px;
  31. line-height: 120%;
  32.  
  33. }
  34.  
  35. html { font-size: 100%; height: 100%; /* IE hack */ }
  36. body { font-size: 0.75em; } /* Base font 12px */
  37. table { font-size: 100%; /* IE hack */ }
  38.  
  39. input, select, textarea, th, td { font-size:1em; }
  40.  
  41.  
  42. .clear {clear: both;}
  43.  
  44. h2, h3 {
  45. font-size: 15px;
  46. text-transform: uppercase;/* will be replaced by Helvetica Neue 77 Condensed Bold */}
  47.    
  48. nav ul.usernav a {
  49. font-family: Arial, Verdana,sans-serif;
  50. font-size: 14px;
  51. text-transform: uppercase;
  52.  
  53. /* will be replaced by Helvetica Neue 77 Condensed Bold */}
  54.    
  55. a, a:link, a:visited, a:hover, a:active {
  56. color: #3399FF;
  57. text-decoration: none;
  58. }
  59.  
  60. a:hover, a:active {
  61. text-decoration: underline;
  62. }  
  63.    
  64.  #intro p {
  65.  
  66.  text-transform: none;
  67.  /* will be replaced by Helvetica Neue 57 Condensed */}
  68.  
  69. /*******************************************************************************************************************************
  70. * LAYOUT #1 LAYOUT #1 LAYOUT #1 LAYOUT #1 LAYOUT #1 LAYOUT #1 LAYOUT #1 LAYOUT #1  LAYOUT #1 LAYOUT #1 LAYOUT #1 *
  71. *******************************************************************************************************************************/
  72.  
  73. /*      Default Layout: 992px.
  74.         Gutters: 24px.
  75.         Outer margins: 24px.
  76.         Leftover space for scrollbars @1024px: 32px.
  77. -------------------------------------------------------------------------------
  78. cols    1     2      3      4      5      6      7      8      9      10
  79. px      68    160    252    344    436    528    620    712    804    896    */
  80.  
  81. body {
  82. width: 100%;
  83. padding:0px;
  84. background-color: #fff;
  85. -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
  86. margin: 0 auto;
  87. color: #666;
  88. }
  89.  
  90. #wrapper, #threecol {
  91. width: 990px;
  92. margin: 0 auto;
  93. }
  94.  
  95.  
  96. /************************************************************************
  97. * HEADER LAYOUT #1 HEADER LAYOUT #1 HEADER LAYOUT #1 HEADER LAYOUT #1 *
  98. ***************************************************************************/
  99.  
  100. #headerupper{
  101. width: 100%;
  102. background-color: #fff;
  103. clear:both;
  104. position: relative;
  105. display: block;
  106. margin: 24px 0 0 0;
  107. }
  108.  
  109. #headerlower{
  110. width: 100%;
  111. background-color: #cc0000;
  112. clear:both;
  113. position: relative;
  114. display: block;
  115. margin: 0;
  116. }
  117.  
  118. .wrapper {
  119. width: 990px;
  120. margin: 0 auto;
  121. }
  122.  
  123. dl {
  124. margin: 0;
  125. padding: 0;
  126. }
  127.  
  128. /* UPPER header UPPER header UPPER header*/
  129. headerupper a.root{
  130. height: 60px;
  131. width: 100%;
  132. font-family: Georgia, Times, Arial, serif;
  133. font-size: 32px;
  134. color: #FFFFFF;
  135. padding: 10px;
  136. text-decoration: none;
  137. background-color: #fff;
  138. }
  139.  
  140. /*--headerupper a.root  {
  141. font-family: Georgia, Times, Arial, serif;
  142. font-size: 32px;
  143. color: #CC0000;
  144. padding: 0px;
  145. text-decoration: none;
  146. }-->
  147.  
  148. headerupper a.department {
  149. font-family: Georgia, Times, Arial, serif;
  150. font-size: 18px;
  151. color: #999;
  152. padding: 0px;
  153. font-style:italic;
  154. text-decoration: none;
  155. }--*/
  156.  
  157. #searchForm {
  158. position: relative;
  159. float: right;
  160. margin-top: 32px;  
  161. height: 30px;
  162. }
  163.  
  164. #q {
  165. margin-right: 5px;
  166. }
  167.  
  168. /* LOWER header LOWER header LOWER header*/
  169.  
  170. /* USER NAV 1 */
  171. nav {
  172. float: left;
  173. padding: 0px;
  174. font-size: 100%;
  175. width: 100%;
  176. background-color:#CC0000;
  177. }
  178.  
  179. nav ul.usernav {
  180. padding: 0px;
  181. line-height: 2.0em;
  182. margin: 0 auto;
  183. }
  184.  
  185. nav ul.usernav li {
  186. display: inline;
  187. list-style-type: none;
  188. padding-right: 0px;
  189. }
  190.  
  191. nav ul.usernav li.top {display:block; float:left;}
  192. nav ul.usernav li a {display:block; float:left; height:auto; border:none; text-decoration:none; padding:0; cursor:pointer;}
  193.  
  194. nav ul.usernav a:link.first {
  195. margin-left: 0px;
  196. }
  197.  
  198. nav ul.usernav a:hover {
  199. background-color:#FFF;
  200. color: #CC0000;
  201. }
  202.  
  203. nav ul.usernav a.current:link, nav a.current:visited,
  204. nav ul.usernav a.current:hover, nav a.current:active {
  205. color: #003F5F;
  206. text-decoration: none;
  207. }
  208.  
  209. nav ul.usernav a, nav ul.usernav a:visited, nav ul.usernav a:link {
  210. margin-right: 5px;
  211. padding: 5px 4px;
  212. text-decoration: none;
  213. font-family: 12px/1 Arial, Verdana,Arial,Helvetica,Verdana, sans-serif;
  214. color: #ffffff;
  215. height: auto;
  216. }
  217.  
  218. nav ul.usernav a:hover {
  219. background-color:#FFF;
  220. color: #CC0000;
  221. }
  222.  
  223. /* HOMEPAGE 1*/
  224. #introwrapper {
  225. display: block;
  226. width: 100%;
  227. margin: 20px 0px 20px 0px;
  228. }
  229.  
  230. .bannerhome {
  231. position: relative;
  232. }
  233.  
  234. span.bannerhome img {
  235. float: left;
  236. position: relative;
  237. width: 483px;
  238. }
  239.  
  240. #intro {
  241. float: right;
  242. width: 483px;
  243. min-height: 175px;
  244. background-color: #dfe7e9;
  245. padding:0px;
  246. }
  247.  
  248. #intro p {
  249. padding: 10px 20px 0px 20px;
  250. }
  251. #intro p.condensed {
  252.     font-size: 140%;}
  253.    
  254. .module4col img, .module4col img, .module4col img,  .module4col img {
  255. width: 100%;
  256. }
  257.  
  258. span.bannerinterior img {
  259. float: left;
  260. width: 100%;
  261. margin: 10px 0px 20px 0px;
  262. }
  263.  
  264. #bottom {
  265. margin-top: 20px;
  266. }
  267.  
  268. #modules {
  269. float: left;
  270. width: 75%;
  271. }
  272.  
  273. #modules ul
  274. {margin: 0px 0px 10px 5px;}
  275.  
  276. #modules ul li {
  277. padding: 5px 5px 5px 10px;
  278. background-image: url('images/redArrow_8x8.png');
  279. background-repeat: no-repeat;
  280. background-position: left 8px;}
  281.  
  282. .module4col h2, .module4col h2, .module4col h2, #leftcolumn h2 {
  283. color:#FFFFFF;
  284. padding: 15px 0px 0px 10px;
  285. height: 34px;
  286. background-color: #4e819c;
  287. }
  288.  
  289. .module4col {
  290. width: 230px;
  291. float: left;
  292. margin: 0px 0px 12px 24px;
  293. min-height: 200px;
  294. background-image: url('images/homepage/mod_bkg.jpg');
  295. background-position: 0 40px;
  296. background-repeat:repeat-x;
  297. min-height: 200px;
  298. }
  299.  
  300. .firstmodule, .clear3 {
  301.  margin-left: 0;
  302.  clear: left;
  303. }
  304.  
  305. .module4col .moreinfo {
  306. margin: -15px 0 0 0;
  307. padding: 0 0 0 5px;
  308. }
  309.  
  310. .module4col .moreinfo a {
  311. text-decoration: none;
  312. color: #3399ff;
  313. border: 0px;
  314. padding-right: 10px;
  315. background-image: url('images/redArrow_8x8.gif');
  316. background-repeat: no-repeat;
  317. background-position: 120px 5px;}
  318.  
  319. .module4col .moreinfo a:hover {
  320. text-decoration: underline;
  321. border: 0px;}
  322.  
  323. .module4col h3 {
  324. line-height: 18px;}
  325.  
  326. #sidebar4col {
  327. float: right;
  328. width: 23%;
  329. margin: 0px 0px 12px 0;
  330. min-height: 200px;
  331. }
  332.  
  333. #sidebar4col .box {
  334. background-color: #dfe7e9;
  335. padding: 10px;
  336. margin-top: 20px;
  337. }
  338.  
  339. #sidebar4col .box:first-child {
  340. margin-top: 0;
  341. }
  342.  
  343. #modulecontainerleft, #modulecontainerright {
  344. float: left;
  345. margin-top: 20px;}
  346. #leftcolumn {
  347. float: left;
  348. width: 710px;
  349. margin: 10px 0px 0px 0px;
  350. background-image: url('images/bkg_interior.jpg');
  351. background-position: 0 222px;
  352. background-repeat:repeat-x;}
  353.  
  354. #leftcolumn ul {
  355. margin-left: 20px;
  356. padding: 5px;
  357. }
  358.  
  359. #leftcolumn p {
  360. padding-left: 10px;
  361. padding-right: 10px;
  362. }
  363.  
  364. table {
  365. margin-bottom: 1.2em;
  366. line-height: 1.8em;
  367. border-collapse: collapse;
  368. border-left: 1px solid #ccc;
  369. border-top: 1px solid #ccc;
  370. margin: 10px;
  371. }
  372.  
  373. table th {  
  374. color: #fff;
  375. letter-spacing: 2px;
  376. text-transform: uppercase;
  377. text-align: left;
  378. padding: 6px;
  379. background: #4E819C;
  380. }
  381.  
  382. table thead tr th {
  383. text-transform: uppercase;
  384. background: #e2e2e2;
  385. color: #003F5F;
  386. }
  387.  
  388. table td, table th {
  389. border-right: 1px solid #ccc;
  390. border-bottom: 1px solid #ccc;
  391. padding: 5px;
  392. line-height: 1.2em;
  393. vertical-align: top;
  394. width: auto;
  395. }
  396.  
  397. table tr:nth-child(odd) {
  398. background-color: #EEE;
  399. }
  400.  
  401. #rightcolumnone {
  402. float: right;
  403. width: 344px;
  404. margin: 10px 0px 0px 0px;
  405. }
  406.  
  407. #rightcolumntwo {
  408. float: right;
  409. width: 344px;
  410. margin: 10px 0px 0px 0px;
  411. }
  412.  
  413. #threecol #leftnavigation {
  414. float: left;
  415. width: 20%;
  416. }
  417.  
  418. #threecol #leftcolumn {
  419. float: left;
  420. width: 40%;
  421. }
  422.  
  423. #threecol #rightcolumnone {
  424. float: right;
  425. width: 20%;
  426. margin: 10px 0px 0px 0px;
  427. }
  428.  
  429. #threecol #rightcolumntwo {
  430. float: right;
  431. width: 20%;;
  432. margin: 10px 0px 0px 0px;
  433. }
  434. /**********************************
  435. * Begin code for Right Col list *
  436. **********************************/
  437. #rightcolumnone {
  438. float: right;
  439. width: 255px;
  440. margin: 20px 0px 0px 0px;
  441. background-color: #dfe7e9;
  442. padding: 5px 5px 5px 0px;
  443. min-height: 364px;
  444. }
  445.  
  446. #rightcolumnone h2 {
  447. padding: 8px 0px 0px 10px;
  448. }
  449. #rightcolumnone h3 {
  450. padding: 8px 0px 0px 10px;
  451. }
  452. #rightcolumnone p {
  453. margin: 0px;
  454. padding: 5px 0px 0px 10px;
  455. }
  456.  
  457. /*--#rightcolumnone ul {
  458. list-style: none;
  459. margin: 0px 0px 0px 15px;
  460. }
  461. #rightcolumnone li {
  462. margin: 10px 0px 5px 0px;
  463. }--*/
  464.  
  465. #rightcolumnone a {
  466. font-weight: normal;
  467. text-decoration: none;
  468. color: #3399ff;
  469. border: 0px;
  470. }
  471.  
  472. #rightcolumnone a:hover {
  473. text-decoration: underline;
  474. }
  475.  
  476. #leftcolumn ul {
  477.     list-style-type: none;
  478. }
  479. #leftcolumn ul li {
  480. padding: 5px 5px 5px 10px;
  481. background-image: url('https://www.northeastern.edu/css/images/redArrow_8x8.png');
  482. background-repeat: no-repeat;
  483. background-position: left 8px;}
  484.  
  485. #rightcolumnone ul {
  486.     list-style-type: none;
  487.         margin: 0px 0px 0px 10px;}
  488. #rightcolumnone ul li {
  489. padding: 5px 5px 5px 10px;
  490. background-image: url('https://www.northeastern.edu/css/images/redArrow_8x8.png');
  491. background-repeat: no-repeat;
  492. background-position: left 8px;}
  493. /**********************************
  494. * Begin code for box lists *
  495. **********************************/
  496. .module4col ul, #sidebar4col ul {
  497. list-style: none;
  498. margin: 10px 0px 0px 0px;
  499. }
  500. /*--#rightcolumnliststyleA {
  501. float: right;
  502. width: 344px;
  503. padding-top: 0px;
  504. padding-bottom: 0px;
  505. margin: 10px 0px 0px 0px;
  506. padding-left: 10px;
  507. }
  508.  
  509. .module4col li, #sidebar4col li {
  510. padding: 5px 0px 5px 0px;
  511. background-repeat: no-repeat;
  512. background-position: 0 8px;
  513. }
  514.  
  515. .module4col a, #sidebar4col a {
  516. font-weight: normal;
  517. text-decoration: none;
  518. color: #3399ff;
  519. border: 0px;
  520. }
  521.  
  522. .module4col a:hover, #sidebar4col a:hover {
  523. text-decoration: underline;
  524. border: 0px;
  525. }
  526.  
  527. .module4col h3 {
  528. line-height: 18px;
  529. padding: 0 5px;
  530. }--*/
  531.  
  532. /************************
  533. * FOOTER *
  534. ************************/
  535. footer {
  536. clear:both;
  537. position: relative;
  538. display: block;
  539. width: 100%;
  540. background-color: #636363;
  541. color: #FFF;
  542. font-size: 11px;
  543. text-align: left;
  544. vertical-align: middle;
  545. margin-top: 12px auto 0 auto;
  546. padding: 6px 0;
  547. }
  548.  
  549. footer a.logo {
  550. background: url('https://northeastern.edu/neuhome/images/logo-footer.png') no-repeat scroll left top transparent;
  551. float: left;
  552. width: 173px;
  553. height: 17px;
  554. color: #FFF;
  555. font-family: Georgia,Times,Arial,serif;
  556. font-size: 18px;
  557. margin-right: 20px;
  558. padding: 0;
  559. text-decoration: none;
  560. }
  561.  
  562. footer a {
  563. color: #FFF;
  564. text-decoration: none;
  565. }
  566.  
  567. footer img {
  568. margin-right: 10px;
  569. float: right;
  570. }
  571.  
  572. .info {
  573. display: inline;
  574. float: left;
  575. font-size: 12px;
  576. list-style-type: none;
  577. margin: -4px 0 10px 0;
  578. color: #CCC;
  579. }
  580.  
  581. .info li {
  582. float: left;
  583. margin-right: 4px;
  584. }
  585.  
  586. .info li:after {
  587. content: "\20\00b7";
  588. }
  589.  
  590. .info li:last-child:after {
  591. content: "";
  592. margin-right: 0;
  593. padding-right: 0;
  594. }
  595.  
  596. footer .info a:link, footer .info a:visited {
  597. color: #FFF;
  598. text-decoration: none;
  599. }
  600.    
  601. footer .info a:hover, footer .info a:active {
  602. color: #CCC;
  603. text-decoration: underline;
  604. }
  605.  
  606. .social-media {
  607. display: inline;
  608. float: right;
  609. list-style-type: none;
  610. font-size: 11px;
  611. margin: 0;
  612. }
  613.  
  614. .social-media li {
  615. float: left;
  616. margin-right: 10px;
  617. }
  618.  
  619. .social-media li:last-child {
  620. margin-right: 0;
  621. padding-right: 0;
  622. }
  623.  
  624. .social-media img {
  625.  margin: 0;
  626.  float: left;
  627. }
  628.  
  629. .social-media a img {
  630.  border: 0;
  631.  padding: 0;
  632. }
  633.  
  634. .contact {
  635. clear: both;
  636. line-height: 1.4em;
  637. margin: 0 0 0 193px;
  638. padding: 0;
  639. color: #CCC;
  640. }
  641. /*---
  642. footer {
  643. clear:both;
  644. display: block;
  645. width: 100%;
  646. text-align: center;
  647. color: #333;
  648. padding: 0px 0px 10px 0px;
  649. margin: 0 auto;
  650. position: relative;
  651. font-size: 80%;
  652. }
  653.                
  654. footer li   {
  655. display: inline;
  656. }
  657.    
  658. #footer a:link, #footer a:visited {
  659. color: #333;
  660. text-decoration: none;}
  661.  
  662. footer a:hover {
  663. color: #3333;
  664. text-decoration: underline;}
  665.    
  666. footer nav {
  667. margin: 0px;
  668. color: #333;}*/
  669. /************************
  670. * END footer *
  671. ************************/
  672.  
  673. /****************************************************************************************************************************
  674. * LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 LAYOUT #2 *
  675. ****************************************************************************************************************************/
  676.  
  677. /*      Tablet Layout: 768px.
  678.         Gutters: 24px.
  679.         Outer margins: 28px.
  680.         Inherits styles from: Default Layout.
  681. -----------------------------------------------------------------
  682. cols    1     2      3      4      5      6      7      8
  683. px      68    160    252    344    436    528    620    712    */
  684.  
  685. @media only screen and (min-width: 768px) and (max-width: 991px) {
  686.    
  687. body {
  688. }
  689.  
  690. /************************************************************************
  691. * HEADER LAYOUT #2 HEADER LAYOUT #2 HEADER LAYOUT #2 HEADER LAYOUT #2 *
  692. ***************************************************************************/
  693. .wrapper {
  694. width: 712px;
  695. margin: 0 auto;
  696. }
  697.  
  698. #wrapper, #threecol {
  699. width: 712px;
  700. margin: 0 auto;
  701. }
  702.  
  703. #searchForm {
  704. position: relative;
  705. float: right;
  706. }
  707.  
  708. /* User Navigation 2 */
  709. nav {
  710. float: left;
  711. padding: 0px;
  712. font-size: 120%;
  713. width: 100%;
  714. background-color:#CC0000;
  715. }
  716.  
  717. nav ul.usernav {
  718. padding: 0px;
  719. line-height: 2em;
  720. margin: 0 auto;
  721. text-align: center;
  722. }
  723.  
  724. nav ul.usernav li {
  725. display: inline;
  726. list-style-type: none;
  727. padding-right: 0px;
  728. }
  729.  
  730.  
  731. nav ul.usernav li.top {display:block; float:left;}
  732. nav ul.usernav li a {display:block; float:left; height:40px; border:none; text-decoration:none; padding:0; cursor:pointer;}
  733. nav ul.usernav li:hover {position:relative; z-index:200;}
  734. nav ul.usernav a:hover {position:relative; white-space:normal; z-index:200;}
  735.  
  736. nav ul.usernav a, nav ul.usernav a:visited, nav ul.usernav a:link {
  737. margin: 5px;
  738. padding: 5px;
  739. text-decoration: none;
  740. color: #ffffff;
  741. height:35px;
  742. }
  743.  
  744. nav ul.usernav a:link.first {
  745. margin-left: 0px;
  746. }
  747.  
  748. nav ul.usernav a:hover {
  749. background-color:#FFF;
  750. color: #CC0000;
  751. }
  752.  
  753. nav ul.usernav a.current:link, nav a.current:visited,
  754. nav ul.usernav a.current:hover, nav a.current:active {
  755. color: #003F5F;
  756. text-decoration: none;
  757. }
  758.  
  759. nav ul.usernav a, nav ul.usernav a:visited, nav ul.usernav a:link {
  760. margin: 5px 0px 5px 15px;
  761. padding: 0px 10px 10px 10px;
  762. text-decoration: none;
  763. color: #ffffff;
  764. height: 28px;
  765. border: 1px solid #dc5555;
  766. -webkit-border-radius: 6px;
  767. -moz-border-radius: 6px;
  768. border-radius: 6px;
  769. }
  770.  
  771. nav ul.usernav a:hover {
  772. background-color:#FFF;
  773. color: #CC0000;
  774. }
  775.  
  776. nav ul.usernav li.menusearch form#searchForm {
  777. height: 26px;
  778. text-align: right;
  779. padding:2px 0px;
  780. margin: 0 auto;
  781. position:relative;
  782. top:0px;
  783. float: right;
  784. width: 728px;
  785. margin-top: -225px;
  786. }
  787.  
  788. /* HOMEPAGE 2*/
  789. span.bannerhome{
  790. float: left;
  791. width: 345px;
  792. overflow: hidden;
  793. }
  794.  
  795. span.bannerhome img {
  796. }
  797.  
  798. #intro {
  799. float: right;
  800. width: 48%;
  801. background-color: #dfe7e9;
  802. padding: 5px 5px 5px 0px;
  803. min-height: 164px;
  804. }
  805.  
  806. #modules {
  807. float: left;
  808. width: 75%;
  809. }
  810.  
  811. .module4col {
  812. width: 45.5%;
  813. float: left;
  814. margin-left: 0;
  815. margin-right: 24px;
  816. min-height: 200px;
  817. }
  818.  
  819. .clear2 {
  820. margin-left: 0;
  821. clear: left;
  822. }
  823.  
  824. .clear3 {
  825. clear: none;
  826. }
  827.  
  828. #sidebar4col {
  829. width: 178px;
  830. }
  831.  
  832. .leftmodule {
  833. clear: none;
  834. }
  835.  
  836. #leftcolumn {
  837. width: 100%;
  838. }
  839.  
  840. #rightcolumnone {
  841. width: 100%;
  842. }
  843.  
  844. #rightcolumntwo {
  845. width: 100%;
  846. }
  847.  
  848. #rightcolumnliststyleA {
  849. float: left;
  850. }
  851.  
  852. #rightcolumntwo {
  853. float: right;
  854. width: 344px;
  855. }
  856.  
  857. .module4col {
  858. border-bottom-left-radius: 0px;
  859. }
  860.  
  861. .module4col {
  862. border-bottom-left-radius: 10px;
  863. }
  864.  
  865. .module4col {
  866. border-bottom-right-radius: 10px;
  867. }
  868.  
  869. footer {
  870. font-size: 10px;
  871. margin-left: auto;
  872. margin-right: auto;
  873. margin-top: 18px;
  874. padding: 6px 0;
  875. position: relative;
  876. text-align: left;
  877. vertical-align: middle;
  878. width: 100%;
  879. }
  880.  
  881. footer a.logo {
  882. font-size: 14px;
  883. margin-right: 20px;
  884. padding: 0;
  885. text-decoration: none;
  886. }
  887.  
  888. .info {
  889. font-size: 10px;
  890. padding-top: 5px;
  891. }
  892.  
  893. .contact {
  894.  font-size: 10px;
  895. }
  896. #intro p.condensed {
  897.     font-size: 110%;}
  898. }
  899.  
  900. /*************************************************************************************************************************
  901. * LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 *LAYOUT #4 LAYOUT #4 LAYOUT #4 LAYOUT #4 *
  902. *************************************************************************************************************************/
  903.  
  904.  
  905. /*      Mobile Layout: 320px.
  906.         Gutters: 24px.
  907.         Outer margins: 34px.
  908.         Inherits styles from: Default Layout.
  909. ---------------------------------------------
  910. cols    1     2      3
  911. px      68    160    252    */
  912.  
  913. @media only screen and (max-width: 767px) {
  914.  
  915. body {
  916. }
  917.  
  918. /************************************************************************
  919. * HEADER LAYOUT #2 HEADER LAYOUT #2 HEADER LAYOUT #2 HEADER LAYOUT #2 *
  920. ***************************************************************************/
  921. .wrapper {
  922. width: 320px;
  923. margin: 0 auto;
  924. }
  925.  
  926. #wrapper, #threecol {
  927. width: 320px;
  928. margin: 0 auto;
  929. }
  930.  
  931. /* UPPER header*/
  932. headerupper a.root {
  933. color: #CC0000;
  934. font-family: Georgia,Times,Arial,serif;
  935. font-size: 22px;
  936. padding: 0;
  937. text-decoration: none;
  938. }
  939.  
  940. .module4col, #sidebar4col {
  941. width: 100%;
  942. float: left;
  943. margin-left: 0px;
  944. }
  945.  
  946. #modulecontainerleft, #modulecontainerright {
  947. float: left;
  948. width: 100%;
  949. }
  950.  
  951. #toplinks-list {
  952. text-align: center;
  953. }
  954.  
  955. #logo {
  956. height: 50px;
  957. }
  958.  
  959. #footer span.links {
  960. display: none;
  961. }
  962.  
  963. #footer {
  964. font-size: 60%;
  965. line-height: 110%;
  966. }
  967.  
  968. #wrapper {
  969. margin-top: 0px;
  970. border-bottom-right-radius: 10px;
  971. border-bottom-left-radius: 10px;
  972. }
  973.    
  974. /* User Navigation 3
  975. nav {
  976. background-color:#fff;}
  977.  
  978. nav ul.usernav a, nav ul.usernav a:visited, nav ul.usernav a:link {}
  979.  
  980. nav ul.usernav, ul.toplinks {
  981. line-height: 1.85em;
  982. width: 480px;
  983. position: relative;}
  984.  
  985. nav ul.toplinks {
  986. line-height: 1.85em;
  987. width: 480px;
  988. position: relative;
  989. text-transform: uppercase;
  990. color: #fff;}
  991.  
  992.  
  993.  
  994. nav ul.usernav li, nav ul.toplinks li {
  995. display: block;
  996. width: 100%;
  997. height: 28px;
  998. margin-top: 5px;
  999. background-color:#CCCCCC;
  1000. float: left;
  1001. text-align: left;}
  1002.  
  1003. nav ul.usernav li a, nav ul.toplinks li a {
  1004. color: #fff;
  1005. height: 18px;
  1006. padding: 0px 0px 0px 5px;
  1007. width: 200px;
  1008. float: left;}
  1009.  
  1010. nav ul.toplinks li a:link, nav ul.toplinks li a:visited {
  1011. color: #fff;}
  1012.  
  1013.  
  1014. nav a, nav a:visited, nav a:link {
  1015. margin-left: 0px;
  1016. padding-top: 2px;
  1017. padding-right: 2px;
  1018. padding-bottom: 2px;
  1019. padding-left: 5px;
  1020. text-decoration: none;
  1021. font-weight: normal;
  1022. color: #ffffff;}
  1023.  
  1024. nav ul.usernav a, nav ul.usernav a:visited, nav ul.usernav a:link {
  1025.     color: #FFFFFF;
  1026.     font-weight: normal;
  1027.     height: 28px;
  1028.     margin-right: 5px;
  1029.     padding-bottom: 5px;
  1030.     padding-left: 5px;
  1031.     padding-right: 5px;
  1032.     padding-top: 5px;
  1033.     text-decoration: none;
  1034. }
  1035. nav ul.usernav li a:hover, nav ul.toplinks li a:hover {
  1036. color: #fff;
  1037. height: 18px;
  1038. background-color:#CCCCCC;
  1039. text-decoration: none;}*/
  1040.  
  1041. /* User Navigation 2 */
  1042. nav {
  1043. float: left;
  1044. padding: 0px;
  1045. font-size: 120%;
  1046. width: 100%;
  1047. background-color:#CC0000;
  1048. }
  1049.  
  1050. nav ul.usernav {
  1051. padding: 0px;
  1052. line-height: 2.9em;
  1053. margin: 0 auto;
  1054. text-align: center;
  1055. }
  1056.  
  1057. nav ul.usernav li {
  1058. display: inline;
  1059. list-style-type: none;
  1060. padding-right: 0px;
  1061. }
  1062.  
  1063.  
  1064. nav ul.usernav li.top {display:block; float:left;}
  1065. nav ul.usernav li a {
  1066. display:inline-block;
  1067. float:none;
  1068. height:40px;
  1069. border:none;
  1070. text-decoration:none;
  1071. padding:0; cursor:pointer;
  1072. }
  1073.  
  1074. nav ul.usernav li:hover {position:relative;
  1075. z-index:200;
  1076. }
  1077.  
  1078. nav ul.usernav a:hover {position:relative; white-space:normal; z-index:200;}
  1079.  
  1080. nav ul.usernav a, nav ul.usernav a:visited, nav ul.usernav a:link {
  1081. margin: 5px;
  1082. padding: 5px;
  1083. text-decoration: none;
  1084. color: #ffffff;
  1085. height:35px;
  1086. }
  1087.  
  1088. nav ul.usernav a:link.first {
  1089. margin-left: 0px;
  1090. }
  1091.  
  1092. nav ul.usernav a:hover {
  1093. background-color:#FFF;
  1094. color: #CC0000;
  1095. }
  1096.  
  1097. nav ul.usernav a.current:link, nav a.current:visited,
  1098. nav ul.usernav a.current:hover, nav a.current:active {
  1099. color: #003F5F;
  1100. text-decoration: none;
  1101. }
  1102.  
  1103. nav ul.usernav a, nav ul.usernav a:visited, nav ul.usernav a:link {
  1104. margin: 3px;
  1105. padding: 3px;
  1106. text-decoration: none;
  1107. color: #ffffff;
  1108. height: 18px;
  1109. border: 1px solid #dc5555;
  1110. -webkit-border-radius: 6px;
  1111. -moz-border-radius: 6px;
  1112. border-radius: 6px;
  1113. }
  1114.  
  1115. nav ul.usernav {
  1116. line-height: 1em;
  1117. text-align: center;
  1118. }
  1119.  
  1120. nav ul.usernav a:hover {
  1121. background-color:#FFF;
  1122. color: #CC0000;
  1123. }
  1124.  
  1125. nav ul.usernav li.menusearch form#searchForm {
  1126. height: 26px;
  1127. text-align: right;
  1128. padding:2px 0px;
  1129. margin: 0 auto;
  1130. position:relative;
  1131. top:0px;
  1132. float: right;
  1133. width: 728px;
  1134. margin-top: -225px;
  1135. }
  1136.  
  1137. #leftcolumn {
  1138. width: 100%;
  1139. float: left;
  1140. margin: 10px 0px 0px 0px;
  1141. background-image: url('images/bkg_interior.jpg');
  1142. background-position: 0 100px;
  1143. background-repeat:repeat-x;
  1144. }
  1145.  
  1146. #rightcolumnone {
  1147. width: 100%;
  1148. }
  1149.  
  1150. #rightcolumntwo {
  1151. width: 100%;
  1152. }
  1153.  
  1154. #modules {
  1155. width: 100%;
  1156. }
  1157.  
  1158. .module4col {
  1159. margin: 0px 0px 12px 0px;
  1160. background-image: url('images/homepage/mod_bkg.jpg');
  1161. background-position: 0 4px;
  1162. background-repeat:repeat-x;
  1163. min-height: 300px;
  1164. }
  1165.  
  1166. .module4col {
  1167. border: none;
  1168. width: 100%;
  1169. min-height: 100%;
  1170. }
  1171.  
  1172. .module4col img {
  1173. display:  none;
  1174. }
  1175.  
  1176. span.bannerhome img {
  1177. float: left;
  1178. width: 100%;
  1179. }
  1180.  
  1181. #intro {
  1182. float: left;
  1183. width: 100%;
  1184. background-color: #dfe7e9;
  1185. margin-top: 10px;
  1186. padding: 0px;
  1187. min-height: 50px;
  1188. }
  1189.  
  1190.  #intro p {
  1191. font-family: Arial, Verdana,sans-serif;
  1192. font-size: 12px;
  1193. }
  1194.  
  1195. footer .wrapper {
  1196. margin-top: 0;
  1197. }
  1198.  
  1199. footer {
  1200. margin: 18px auto 0 auto;
  1201. font-size: 10px;
  1202. padding: 5px 10px;
  1203. position: relative;
  1204. text-align: left;
  1205. vertical-align: middle;
  1206. width: 300px;
  1207. }
  1208.  
  1209. footer a.logo {
  1210. font-size: 14px;
  1211. margin-right: 20px;
  1212. padding: 0;
  1213. text-decoration: none;
  1214. }
  1215.  
  1216. .info {
  1217. float: left;
  1218. width: 50%;
  1219. font-size: 9px;
  1220. margin: 3px 0;
  1221. }
  1222.  
  1223. .info li:after {
  1224. content: "";
  1225. }
  1226.  
  1227. .info li {
  1228. float: none;
  1229. margin-right: 0;
  1230. padding: 5px 0;
  1231. }
  1232.  
  1233. .social-media {
  1234. float: right;
  1235. width: 30%;
  1236. margin-top: -17px;
  1237. }
  1238.  
  1239. .social-media li {
  1240. float: left;
  1241. margin: 0 0 0 10px;
  1242. }
  1243.  
  1244. .contact {
  1245. margin-left: 0;
  1246. }
  1247.  
  1248. /*******************************
  1249.  *   Top Search Box            *
  1250. ****************************/
  1251. nav ul.usernav li.menusearch form#searchForm {
  1252. height: 26px;
  1253. text-align: right;
  1254. padding:2px 0px;
  1255. margin: 0 auto;
  1256. margin: 0px;
  1257. float: left;
  1258. display: block;
  1259. position: relative;
  1260. }
  1261.  
  1262. #q {
  1263. color: #666;
  1264. padding: 2px 0 0 3px;
  1265. padding: 0 0 0 3px;
  1266. width: 100px;
  1267. margin: 2px 5px 0px 5px;
  1268. height:20px;
  1269. background: #fff;
  1270. border: #d2d2d2 1px solid;
  1271. float: left;
  1272.  }
  1273.  
  1274. #searchForm input.button {
  1275. float: left;
  1276. margin-top: 5px;
  1277.  
  1278. }
  1279.  
  1280. #searchForm label {
  1281. display: none;
  1282. float: left;
  1283. }
  1284.  
  1285. #bottom {
  1286. margin-top: 10px;
  1287. }
  1288.  
  1289. #sidebar4col .box {
  1290.     margin-top: 10px;
  1291. }
  1292. #intro p.condensed {
  1293.     font-size: 100%;}
  1294.  
  1295.    
  1296. }
  1297.  
  1298. /*************************************************************************************************************************
  1299. * LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 LAYOUT #3 *
  1300. *************************************************************************************************************************/
  1301.  
  1302. /*      Wide Mobile Layout: 480px.
  1303.         Gutters: 24px.
  1304.         Outer margins: 22px.
  1305.         Inherits styles from: Default Layout, Mobile Layout.
  1306. ------------------------------------------------------------
  1307. cols    1     2      3      4      5
  1308. px      68    160    252    344    436    */
  1309.  
  1310. @media only screen and (min-width: 480px) and (max-width: 767px) {
  1311.    
  1312. body {
  1313. }
  1314.  
  1315. .wrapper {
  1316.  width: 480px;
  1317.  margin: 0 auto;
  1318. }
  1319.  
  1320. #wrapper, #threecol {
  1321. width: 480px;
  1322. margin: 0 auto;
  1323. }
  1324.  
  1325. h2, h3, nav ul.usernav a, nav ul.toplinks li a {
  1326. font-family: Arial, Verdana,sans-serif;
  1327. font-size: 12px;
  1328. text-transform: uppercase;
  1329. }
  1330.    
  1331. /************************************************************************
  1332. * HEADER LAYOUT #3 HEADER LAYOUT #3 HEADER LAYOUT #3 HEADER LAYOUT #3 *
  1333. ***************************************************************************/
  1334.  
  1335. /* CSS ACCORDIAN Header*/
  1336. header{
  1337. padding: 10px;
  1338. }
  1339.  
  1340. header dt.headerupper{
  1341. -webkit-border-radius: 5px;
  1342. -moz-border-radius: 5px;
  1343. border-radius: 5px;
  1344. border: 1px solid #cccccc;
  1345. margin: 0px;
  1346. padding: 0px;
  1347. background-color: #fff;
  1348. height: 35px;
  1349. }
  1350.  
  1351. /* UPPER header*/
  1352. headerupper a.root {
  1353. color: #CC0000;
  1354. font-family: Georgia,Times,Arial,serif;
  1355. font-size: 22px;
  1356. padding: 0;
  1357. text-decoration: none;
  1358. }
  1359.  
  1360. #intro {
  1361. min-height: 100px;
  1362. }
  1363.  
  1364. #intro p {
  1365. font-family: Arial, Verdana,sans-serif;
  1366. font-size: 13px;
  1367. }
  1368.  
  1369. #modulecontainerleft, #modulecontainerright {
  1370. float: left;
  1371. margin-top: 10px;
  1372. }
  1373.  
  1374. #modules {
  1375. float: none;
  1376. width: 100%;
  1377. }
  1378.  
  1379. .module4col {
  1380.  border: none;
  1381.  min-height: 100%;
  1382. }
  1383.  
  1384. .module4col img {
  1385. display: none;
  1386. }
  1387.  
  1388. #leftcolumn {
  1389. float: left;
  1390. margin: 10px 0px 0px 0px;
  1391. background-image: url('images/bkg_interior.jpg');
  1392. background-position: 0 160px;
  1393. background-repeat:repeat-x;
  1394. }
  1395.  
  1396. /*******************************
  1397.  *   Top Search Box            *
  1398. ****************************/
  1399. nav ul.usernav li.menusearch form#searchForm {
  1400. height: 26px;
  1401. text-align: right;
  1402. padding:2px 0px;
  1403. margin: 0 auto;
  1404. margin: 0px;
  1405. float: left;
  1406. display: block;
  1407. position: relative;
  1408. }
  1409.  
  1410. #q {
  1411. color: #666;
  1412. padding: 2px 0 0 3px;
  1413. padding: 0 0 0 3px;
  1414. width: 180px;
  1415. margin: 2px 5px 0px 5px;
  1416. height:20px;
  1417. background: #fff;
  1418. border: #d2d2d2 1px solid;
  1419. float: left;
  1420. }
  1421.  
  1422. #searchForm input.button {
  1423. float: left;
  1424. margin-top: 5px;
  1425. }
  1426.    
  1427. #searchForm label {
  1428. display: none;
  1429. float: left;
  1430. }
  1431.  
  1432. footer {
  1433. width: 100%;
  1434. margin: 18px auto 30px auto;
  1435. font-size: 10px;
  1436. padding: 0;
  1437. position: relative;
  1438. text-align: left;
  1439. vertical-align: middle;
  1440. }
  1441.  
  1442. footer .wrapper {
  1443. width: 480px;
  1444. padding: 5px 0;
  1445. }
  1446.  
  1447. footer a.logo {
  1448. font-size: 14px;
  1449. margin-right: 20px;
  1450. padding: 0;
  1451. text-decoration: none;
  1452. }
  1453.  
  1454. .info {
  1455. clear: left;
  1456. width: 82%;
  1457. font-size: 9px;
  1458. margin-top: 3px;
  1459. }
  1460.  
  1461. .info li {
  1462. float: left;
  1463.  margin-right: 4px;
  1464. }
  1465.  
  1466. .info li:after {
  1467. content: "\20\00b7";
  1468. }
  1469.  
  1470. .info li:last-child:after {
  1471. content: "";
  1472. margin-right: 0;
  1473. padding-right: 0;
  1474. }
  1475.  
  1476.  
  1477. .social-media {
  1478.  width: 17%;
  1479.  margin-top: -17px;
  1480. }
  1481.  
  1482. .contact {
  1483.  margin-left: 0;
  1484. }
  1485.  
  1486. #bottom {
  1487. margin-top: 10px;
  1488. }
  1489.  
  1490. #sidebar4col .box {
  1491.     margin-top: 20px;
  1492. }
  1493.  #sidebar4col .box:first-child {
  1494.     margin-top: 0;
  1495.     min-height: 160px;
  1496. }
  1497. #intro p.condensed {
  1498.     font-size: 100%;}
  1499.  
  1500. }

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.