style.css

  1. 6.x themes/fp6_clean/style.css
  2. 6.x modules/engagements/css/style.css
  3. 6.x modules/alerts/css/style.css
  4. 6.x modules/system/css/style.css
  5. 6.x modules/calendar/css/style.css
  6. 6.x modules/student_profile/css/style.css
  7. 6.x modules/schools/css/style.css
  8. 4.x themes/classic/style.css
  9. 4.x modules/system/css/style.css
  10. 5.x themes/basic/style.css
  11. 5.x themes/fp5_clean/style.css
  12. 5.x themes/classic/style.css
  13. 5.x modules/system/css/style.css

This CSS file pertains to the look of content itself in FlightPath.

File

themes/fp6_clean/style.css
View source
  1. /**
  2. * @file
  3. * This CSS file pertains to the look of content itself in FlightPath.
  4. */
  5. body
  6. {
  7. font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  8. padding: 0;
  9. margin: 0;
  10. z___background-color: #F2F2F2;
  11. background-color: white;
  12. color: #555;
  13. height: 100%; /* required for modal dialog to work correctly */
  14. }
  15. table {
  16. border-collapse: collapse;
  17. }
  18. .element-type-hidden {
  19. display: none;
  20. margin: 0;
  21. padding: 0;
  22. }
  23. /*
  24. * Page top banner
  25. */
  26. .top-banner {
  27. background-color: white;
  28. margin: 0;
  29. border: 0;
  30. border-radius: 0;
  31. }
  32. .top-banner img {
  33. height: 70px;
  34. width: auto;
  35. }
  36. a.action-link {
  37. padding-left: 3px;
  38. padding-right: 3px;
  39. }
  40. a.action-link-remove {
  41. color: indianred;
  42. }
  43. .user-edit-attribute-link {
  44. margin-left: 10px;
  45. }
  46. /* Tabs & search */
  47. table.tabs-search-table {
  48. width: 820px; /* size of page-content + padding */
  49. display: block;
  50. min-height: 33px;
  51. margin-left: auto;
  52. margin-right: auto;
  53. text-align: left;
  54. border: 0;
  55. border-spacing: 0;
  56. border-collapse: collapse;
  57. background-color: #F2F2F2;
  58. }
  59. /* Are we in a popup window? */
  60. .page-is-popup .tabs-search-table {
  61. width: 90%; /* set to same as page-content in a popup */
  62. }
  63. table.tabs-search-table td {
  64. padding: 0;
  65. margin: 0;
  66. }
  67. table.tabs-table-tabs {
  68. width: 100%;
  69. text-align: left;
  70. border: 0;
  71. border-spacing: 0;
  72. border-collapse: collapse;
  73. }
  74. .tabs-table-tabs td {
  75. padding: 0;
  76. margin: 0;
  77. }
  78. table.tabs-search-table td.search-td {
  79. text-align: right;
  80. width: 100%;
  81. vertical-align: bottom;
  82. padding-right: 30px;
  83. }
  84. .tab_left, .tab_left_i {
  85. display: none;
  86. }
  87. .tab_right, .tab_right_i {
  88. display: none;
  89. }
  90. .active_tab, .inactive_tab {
  91. border-collapse: separate;
  92. position: relative;
  93. top: 4px;
  94. color: #660000;
  95. cursor: default;
  96. border: 0 !important;
  97. border-radius: 0;
  98. padding: 10px 10px 5px 10px;
  99. }
  100. .active_tab {
  101. border-bottom: 3px solid white;
  102. background-color: white;
  103. border-top: 2px solid #ccc !important;
  104. }
  105. .inactive_tab {
  106. position: relative;
  107. top: 4px;
  108. border-bottom: 1px solid #ccc;
  109. color: #666;
  110. }
  111. .inactive_tab_over {
  112. border-collapse: separate;
  113. cursor: pointer;
  114. position: relative;
  115. top: 4px;
  116. border: 0;
  117. border-radius: 0;
  118. color: black;
  119. text-decoration: underline;
  120. padding: 10px 10px 5px 10px;
  121. }
  122. .inactive_tab_over_no_link {
  123. color: #A0A0A0;
  124. cursor: default;
  125. }
  126. .tab_text
  127. {
  128. font-family: Arial, Helvetica, sans serif;
  129. font-size: 0.8em;
  130. }
  131. /* Page content */
  132. .page-content {
  133. width: 800px;
  134. min-height: 400px;
  135. margin-left: auto;
  136. margin-right: auto;
  137. background-color: white;
  138. border: 0;
  139. padding: 20px;
  140. padding-bottom: 50px;
  141. margin-bottom: 2px;
  142. border-radius: 0;
  143. box-shadow: 0px 0px 50px #777;
  144. }
  145. .page-is-popup .page-content {
  146. min-height: 250px;
  147. width: 90%;
  148. }
  149. /* bottom message / footer region */
  150. .fp-bottom-message {
  151. font-size: 0.7em;
  152. display: table;
  153. width: 100%;
  154. color: white;
  155. background-color: #373B44;
  156. margin-top: 50px;
  157. zzmargin-left: auto;
  158. zzmargin-right: auto;
  159. zzpadding-left: 40px;
  160. padding-top: 20px;
  161. padding-bottom: 40px;
  162. min-height: 80px;
  163. border-top: 1px solid #030304;
  164. }
  165. .fp-bottom-message .popup-contact {
  166. display: table-cell;
  167. width: 50%;
  168. padding-left: 40px;
  169. }
  170. .fp-bottom-message .powered-by-fpa {
  171. display: table-cell;
  172. text-align: right;
  173. width: 50%;
  174. padding-right: 50px;
  175. }
  176. .fp-bottom-message a {
  177. color: #ccc;
  178. }
  179. .fp-bottom-message a:hover {
  180. color: white;
  181. text-decoration: underline;
  182. }
  183. .level-3-raquo {
  184. padding: 0 5px 0 5px;
  185. }
  186. .c-fieldset-content {
  187. /* the astericks mean "only for IE" */
  188. *margin-left: 10px;
  189. *margin-right: 10px;
  190. }
  191. .c-fieldset {
  192. margin-bottom: 10px;
  193. }
  194. .selection_highlight {
  195. background-color: #FFFF99 !important;
  196. }
  197. img.fpmn-icon {
  198. position: relative;
  199. top: 4px;
  200. margin-right: 8px;
  201. }
  202. /*
  203. * checkboxes....
  204. *
  205. * */
  206. span.advise-checkbox {
  207. width:14px;
  208. height:14px;
  209. display:inline-block;
  210. background: url('images/cb_eligible.gif') no-repeat top left;
  211. }
  212. span.advise-checkbox-eligible {
  213. background: url('images/cb_eligible.gif') no-repeat top left;
  214. }
  215. span.advise-checkbox-eligible-checked {
  216. background: url('images/cb_eligible-check.gif') no-repeat top left;
  217. }
  218. span.advise-checkbox-completed {
  219. background: url('images/cb_completed.gif') no-repeat top left;
  220. }
  221. span.advise-checkbox-completed-checked {
  222. background: url('images/cb_completed-check.gif') no-repeat top left;
  223. }
  224. span.advise-checkbox-disabled {
  225. background: url('images/cb_disabled.gif') no-repeat top left;
  226. }
  227. span.advise-checkbox-disabled-checked {
  228. background: url('images/cb_disabled-check.gif') no-repeat top left;
  229. }
  230. span.advise-checkbox-enrolled {
  231. background: url('images/cb_enrolled.gif') no-repeat top left;
  232. }
  233. span.advise-checkbox-enrolled-checked {
  234. background: url('images/cb_enrolled-check.gif') no-repeat top left;
  235. }
  236. span.advise-checkbox-retake {
  237. background: url('images/cb_retake.gif') no-repeat top left;
  238. }
  239. span.advise-checkbox-retake-checked {
  240. background: url('images/cb_retake-check.gif') no-repeat top left;
  241. }
  242. /**************/
  243. /* What If selection screen */
  244. #element-inner-wrapper-select_level_1_degrees,
  245. #element-inner-wrapper-select_level_2_degrees
  246. {
  247. max-height: 300px;
  248. overflow-y: scroll;
  249. }
  250. .full_admin_top_options
  251. {
  252. font-size: 10pt;
  253. border: 1px solid maroon;
  254. padding: 2px;
  255. margin-left: 10px;
  256. }
  257. .sub-tabs {
  258. margin-bottom: 10px;
  259. margin-top: 0px;
  260. font-size: 0.9em;
  261. }
  262. .sub-tabs .gradbutton-active {
  263. font-weight: bold;
  264. }
  265. th {
  266. text-align: left;
  267. }
  268. .admin-message
  269. {
  270. padding: 5px;
  271. margin: 5px;
  272. font-size: 10pt;
  273. background-color: #FFFACD;
  274. }
  275. .fp-semester-table {
  276. border-collapse: collapse;
  277. width: 100%;
  278. }
  279. .fp-currently-advising {
  280. border-collapse: collapse;
  281. width: 100%;
  282. }
  283. .currently-advising-box-change-term a {
  284. color: white;
  285. padding-right: 20px;
  286. background: url('images/popup-t.gif') no-repeat top right;
  287. }
  288. .print-graphic
  289. {
  290. background-image: url('images/print.gif');
  291. width: 57px;
  292. height: 20px;
  293. }
  294. .fp-messages {
  295. border: 1px solid #FFCC66;
  296. background-color: #FFFFCC;
  297. padding: 5px 20px 5px 20px;
  298. margin: 5px;
  299. margin-bottom: 10px;
  300. }
  301. .fp-message {
  302. margin-top: 3px;
  303. margin-bottom: 10px;
  304. }
  305. .fp-message-error {
  306. color: red;
  307. }
  308. .fp-message .fp-message-backtrace {
  309. font-size: 0.8em;
  310. text-align: right;
  311. font-style: italic;
  312. }
  313. .fp-render-button
  314. {
  315. background: url('images/buttonbg1.jpg') #fff bottom left repeat-x;
  316. padding: 5px;
  317. padding-left: 20px;
  318. padding-right: 20px;
  319. border: 1px solid #BBBBBB;
  320. display: inline-block;
  321. margin-right: 10px;
  322. /*min-width: 55px; */
  323. }
  324. .fp-render-button:hover
  325. {
  326. border: 1px solid #808080;
  327. }
  328. .fp-render-button:active
  329. {
  330. background: url('images/buttonbg1-down.jpg') #fff top left repeat-x;
  331. border: 1px solid #808080;
  332. }
  333. .selectVariableClassHidden
  334. {
  335. visibility: hidden;
  336. overflow: hidden;
  337. background-color: #FFFFFF;
  338. }
  339. .selectVariableClass
  340. {
  341. visibility: visible;
  342. }
  343. div.updateMsg
  344. {
  345. border: 5px solid maroon;
  346. background-color: white;
  347. width: 200px;
  348. text-align: center;
  349. font-weight: bold;
  350. z-index: 9999;
  351. }
  352. .variableHoursList
  353. {
  354. position: absolute;
  355. background-color: white;
  356. border: 1px solid #333333;
  357. width: 150px;
  358. /*z-index:12;*/
  359. }
  360. .variableHoursList a
  361. {
  362. text-decoration: none;
  363. }
  364. .variableHoursList a:hover
  365. {
  366. font-weight: bold;
  367. }
  368. .tenpt
  369. {
  370. font-size: 10pt;
  371. font-family: Arial;
  372. }
  373. .elevenpt
  374. {
  375. font-size: 11pt;
  376. font-family: Arial;
  377. }
  378. .fixedlen
  379. {
  380. font-family: Courier New;
  381. font-size: 10pt;
  382. }
  383. .smallspace
  384. {
  385. padding-left: 15px;
  386. }
  387. .viewSelectorActive
  388. {
  389. font-weight: bold;
  390. color: black;
  391. text-decoration: none;
  392. }
  393. .viewSelectorInactive
  394. {
  395. font-weight: normal;
  396. text-decoration: none;
  397. }
  398. .viewSelectorInactive:hover
  399. {
  400. font-weight: normal;
  401. text-decoration: none;
  402. }
  403. .superscript
  404. {
  405. /* mimic the apearance of a superscript */
  406. font-size: 7pt;
  407. position: relative;
  408. top: -5px;
  409. }
  410. .transfer_area
  411. {
  412. background-color: white;
  413. color: black;
  414. border-style: solid;
  415. border-color: gray;
  416. width: 350px;
  417. margin: 0px 0px 0px 0px;
  418. padding: 0px 0px 0px 0px;
  419. height: 150px;
  420. font-size: 11px;
  421. cursor: default;
  422. }
  423. a
  424. {
  425. text-decoration: none;
  426. color: #0080ff;
  427. }
  428. a:hover
  429. {
  430. text-decoration: underline;
  431. }
  432. .falseLink
  433. {
  434. text-decoration: none;
  435. color: blue;
  436. cursor: pointer;
  437. }
  438. .smallinput
  439. {
  440. font-size: 8pt;
  441. border-style: solid;
  442. border-width: 1px;
  443. border-color: #96a3dc;
  444. }
  445. .smallbutton
  446. {
  447. font-size: 8pt;
  448. border-style: solid;
  449. border-width: 1px;
  450. border-color: blue;
  451. }
  452. .tabinput
  453. {
  454. font-size: 8pt;
  455. color: white;
  456. border-style: solid;
  457. border-width: 1px;
  458. border-color: white;
  459. background-color: maroon;
  460. }
  461. .tabbutton
  462. {
  463. font-size: 8pt;
  464. border-style: solid;
  465. border-width: 1px;
  466. border-color: white;
  467. }
  468. td.underline
  469. {
  470. border-bottom: 1px solid black;
  471. }
  472. td.u
  473. {
  474. background-image:URL('images/underline.gif');
  475. }
  476. .uhand
  477. {
  478. background-image:URL('images/underline.gif');
  479. cursor: pointer;
  480. }
  481. .hand
  482. {
  483. cursor: pointer;
  484. }
  485. /* Bad name for what this is-- creates the gradient on the curved semester titles you see
  486. * on the degree plan.
  487. */
  488. .blueTitle
  489. {
  490. color: white;
  491. background-color: #999 !important;
  492. }
  493. .hypo
  494. {
  495. background-color: #FDFFBB;
  496. color: black;
  497. }
  498. .hypocolor
  499. {
  500. color: black;
  501. }
  502. table.blueBorder
  503. {
  504. border-bottom: solid 2px #999;
  505. border-right: solid 2px #999;
  506. border-left: solid 2px #999;
  507. }
  508. .completed /* student passed course */
  509. {
  510. color: #1d7bff;
  511. text-decoration:none;
  512. }
  513. .course-assigned-more-than-one-degree td /* the course has been assigned to multiple degrees */
  514. {
  515. background-color: #FFFF99;
  516. text-decoration: none;
  517. }
  518. .eligible /* elegible courses (student may take) */
  519. {
  520. color: black;
  521. text-decoration:none;
  522. }
  523. .d /* developmental requirement */
  524. {
  525. color: black;
  526. font-style:italic;
  527. }
  528. .locked /* not elegible. Student may not take this course. */
  529. {
  530. color: gray;
  531. text-decoration:none;
  532. }
  533. .retake /* student must re-take course. Grade not good enough. */
  534. {
  535. color: #ff5559;
  536. text-decoration:none;
  537. }
  538. .enrolled /* student is currently enrolled in course. */
  539. {
  540. color: green;
  541. text-decoration:none;
  542. }
  543. blockquote.slo
  544. {
  545. margin-top: 2px;
  546. margin-left: 20px;
  547. margin-bottom: 2px;
  548. padding: 0px;
  549. }
  550. table.box
  551. {
  552. border-width: 1px;
  553. border-style: solid;
  554. border-color: white;
  555. }
  556. td.box
  557. {
  558. border-style: solid;
  559. border-color: white;
  560. }
  561. table.saveoption
  562. {
  563. border-style: solid;
  564. border-width: 1px;
  565. border-color: black;
  566. background-color: #ffffcc;
  567. }
  568. table.announcement
  569. {
  570. border-style: solid;
  571. border-width: 1px;
  572. border-color: black;
  573. background-color: white;
  574. }
  575. .edit_col
  576. {
  577. background-color: #ffffcc;
  578. }
  579. .rubric_col
  580. {
  581. background-color: #CCFFFF;
  582. }
  583. .top_col
  584. {
  585. background-color: #CCCCCC;
  586. }
  587. table.slo
  588. {
  589. border-width: 1px;
  590. border-style: solid;
  591. border-color: white;
  592. }
  593. td.slo
  594. {
  595. border-style: solid;
  596. border-color: black;
  597. border-width: 1px;
  598. }
  599. table.score
  600. {
  601. border-width: 1px;
  602. border-style: solid;
  603. border-color: black;
  604. }
  605. td.score
  606. {
  607. border-width: 1px;
  608. border-style: solid;
  609. border-color: black;
  610. }
  611. .side_padding {
  612. padding-left: 3px;
  613. padding-right: 3px;
  614. padding-top: 1px;
  615. padding-bottom: 1px;
  616. }
  617. .tab_padding {
  618. padding-right: 3px;
  619. }
  620. .nounderlink
  621. {
  622. color: #1d7bff;
  623. text-decoration: none;
  624. }
  625. .nounderlink:hover
  626. {
  627. color: #1d7bff;
  628. text-decoration: underline;
  629. }
  630. /*
  631. Main
  632. */
  633. .fp-menu-item {
  634. padding-top: 10px;
  635. padding-bottom: 10px;
  636. padding-left: 20px;
  637. }
  638. .fp-menu-item-tight {
  639. padding-bottom:0;
  640. }
  641. .fp-menu-item .fp-menu-item-description {
  642. padding-left: 25px;
  643. }
  644. .fp-menu-item a {
  645. text-decoration: none;
  646. color: blue;
  647. }
  648. .fp-menu-item a:hover {
  649. text-decoration: underline;
  650. }
  651. .fp-warn-grant-full {
  652. font-size: 0.8em;
  653. color: red;
  654. }
  655. /*
  656. Admin-console related
  657. */
  658. .fp-user-management-permission
  659. {
  660. margin-bottom: 15px;
  661. padding-left: 20px;
  662. }
  663. .fp-user-management-permission-disabled {
  664. background-color: #eee;
  665. font-style: italic;
  666. }
  667. .fp-user-management-permission .fp-user-management-permission-line {
  668. padding-left: 20px;
  669. font-size: 0.8em;
  670. }
  671. .fp-user-management-permission-module-name {
  672. background-color: #eee;
  673. padding: 3px;
  674. margin-top: 10px;
  675. margin-bottom: 3px;
  676. font-weight: bold;
  677. }
  678. ul.top-menu-links {
  679. font-size: 0.8em;
  680. padding: 0;
  681. margin: 0;
  682. }
  683. ul.top-menu-links li {
  684. display: inline;
  685. padding-right: 20px;
  686. }
  687. ul.top-menu-links li.first {
  688. list-style: none;
  689. }
  690. /*
  691. * Forms...
  692. */
  693. label {
  694. display: block;
  695. font-weight: bold;
  696. }
  697. .form-element {
  698. margin-bottom: 20px;
  699. }
  700. .form-element .radio-element {
  701. padding: 5px;
  702. }
  703. label.label-for-radio,
  704. label.label-for-checkbox
  705. {
  706. font-weight: normal;
  707. }
  708. .form-element-description {
  709. font-size: 0.8em;
  710. padding-left: 10px;
  711. margin-top: 5px;
  712. color: #444;
  713. }
  714. .form-element-description fieldset {
  715. margin-top: 5px;
  716. padding-bottom: 0px;
  717. }
  718. .form-required-ast {
  719. color: red;
  720. font-weight: bold;
  721. font-size: 1.1em;
  722. padding-right: 5px;
  723. }
  724. .form-element-error {
  725. border: 1px dotted red;
  726. padding: 5px;
  727. }
  728. a.form-popup-description {
  729. font-weight: normal;
  730. margin-left: 5px;
  731. text-decoration: none;
  732. }
  733. /**
  734. * FPM related
  735. */
  736. .fp-html-print-r-wrapper {
  737. font-size: 0.9em;
  738. }
  739. .fp-html-print-r-multi-row {
  740. background-color: #eee;
  741. border: 1px solid #bbb;
  742. padding: 5px;
  743. }
  744. .fp-html-print-r-multi-row .fp-html-print-r-selector {
  745. cursor: pointer;
  746. }
  747. .fp-html-print-r-multi-row > .fp-html-print-r-var-value {
  748. padding-left: 30px;
  749. }
  750. .fp-html-print-r-single-row {
  751. border-top: 1px solid #bbb;
  752. }
  753. .fp-html-print-r-var-name {
  754. color: #404000;
  755. font-weight: bold;
  756. }
  757. .fp-html-print-r-var-type {
  758. font-style: italic;
  759. }
  760. .fp-html-print-r-single-row .fp-html-print-r-var-value {
  761. font-weight: bold;
  762. }
  763. .student-search-advanced-tips-wrapper {
  764. font-size: 0.8em;
  765. }
  766. .student-search-advanced-tips-wrapper label {
  767. display:block;
  768. font-weight: bold;
  769. }
  770. /**
  771. * General form elements
  772. */
  773. ___general_form_elements{}
  774. label {
  775. font-size: 0.9em;
  776. }
  777. .element-type-textfield input,
  778. .element-type-password input,
  779. .element-type-datetime-local input,
  780. .element-type-time input,
  781. .element-type-date input,
  782. .element-type-search input,
  783. .element-type-textarea textarea
  784. {
  785. font-size: 1.0em;
  786. font-weight: normal;
  787. border: 1px solid #8E929C;
  788. padding: 1rem;
  789. width: 100%;
  790. max-width: 500px;
  791. box-shadow: 0px 1px 2px rgb(0,0,0,0.15);
  792. border-radius: 4px;
  793. filter: none;
  794. }
  795. .element-type-textarea textarea {
  796. max-width: calc(100% - 20px);
  797. padding: 0.4rem;
  798. }
  799. .element-type-date input,
  800. .element-type-time input
  801. {
  802. max-width: 200px;
  803. }
  804. .element-type-datetime-local input,
  805. .element-type-time input,
  806. .element-type-date input
  807. {
  808. font-family: Arial, Helvetica, sans-serif;
  809. }
  810. .element-type-submit input
  811. {
  812. font-size: 1.0em;
  813. padding: 1rem;
  814. background-color: #0095ff;
  815. border: 1px solid #1E90FF;
  816. color: white;
  817. font-weight: 600;
  818. cursor: pointer;
  819. }
  820. .element-type-submit input:hover
  821. {
  822. background-color: lightskyblue;
  823. }
  824. .element-type-submit input.button-disabled {
  825. background-color: #ccc !important;
  826. border: 1px solid #999 !important;
  827. }
  828. .form-checkboxes label.label-for-checkbox {
  829. display: inline-block;
  830. }
  831. .element-type-select select {
  832. font-size: 1.0em;
  833. font-weight: normal;
  834. border: 1px solid #8E929C;
  835. padding: 1rem;
  836. width: 100%;
  837. max-width: 500px;
  838. box-shadow: 0px 1px 2px rgb(0,0,0,0.15);
  839. border-radius: 4px;
  840. filter: none;
  841. }
  842. .element-wrapper--hidden {
  843. display: none;
  844. }
  845. .form-element-editor-after-wrapper-description {
  846. margin-bottom: 10px;
  847. padding-left: 10px;
  848. font-size: 0.9em;
  849. }
  850. input::placeholder {
  851. opacity: 0.7;
  852. }
  853. .readonly {
  854. background-color: #eee !important;
  855. }
  856. .section-box-title {
  857. background-color: #aaa;
  858. border-bottom: 5px solid #999;
  859. color: white;
  860. text-align: center;
  861. padding: 2px;
  862. padding-bottom: 0;
  863. font-weight: 500;
  864. margin-bottom: 5px;
  865. }
  866. #page-print-options {
  867. float: right;
  868. padding-left: 20px;
  869. padding-right: 10px;
  870. font-size: 1.4em;
  871. }
  872. a.button {
  873. display: inline-block;
  874. color: white;
  875. font-weight: 600;
  876. border: 1px solid #1E90FF;
  877. background-color: #0095ff;
  878. padding: 9px;
  879. margin-bottom: 15px;
  880. text-decoration: none;
  881. margin-right: 10px;
  882. }
  883. a.button:hover {
  884. background-color: lightskyblue;
  885. }
  886. a.cancel-button {
  887. background-color: crimson;
  888. border-color: brown;
  889. }
  890. a.cancel-button:hover {
  891. background-color: pink;
  892. }
  893. div.pager-wrapper {
  894. border-top: 1px solid #ccc;
  895. }
  896. ul.pager {
  897. margin: 1.75em 0 0.75em;
  898. clear: both;
  899. text-align: center;
  900. }
  901. ul.pager li {
  902. background-image: none;
  903. display: inline;
  904. list-style-type: none;
  905. padding: 0.5em;
  906. margin: 0 0 0.25em 0.5em;
  907. font-size: 14px;
  908. }
  909. ul.pager li.pager-current {
  910. color: #fff;
  911. padding: 0.5em;
  912. background-color: #bbb;
  913. border: 1px solid #000;
  914. }
  915. ___page--popup-report-contact{}
  916. body.page--popup-report-contact,
  917. body.page--popup-contact-form-thank-you
  918. {
  919. padding: 10px;
  920. }
  921. ___page--stats{}
  922. .page--admin-tools-stats .stats-main-menu {
  923. margin-bottom: 30px;
  924. }
  925. /**
  926. * Login Page
  927. */
  928. ___page--login{}
  929. .page--login {
  930. background-color: #F5F5F5;
  931. }
  932. .page--login .top-banner {
  933. padding-top: 40px;
  934. }
  935. .page--login #page-login-user-form {
  936. float: left;
  937. width: 45%;
  938. text-align: center;
  939. }
  940. .page--login #page-login-page__wallpaper {
  941. position: relative;
  942. float: right;
  943. width: 55%;
  944. background: url('images/login_wallpaper.jpg') bottom center no-repeat;
  945. background-size: cover;
  946. }
  947. .page--login .login-content-div .left-side-content {
  948. text-align: left;
  949. display: inline-block;
  950. width: 400px;
  951. margin-top: 80px;
  952. }
  953. .page--login .fp-form-system_login_form {
  954. padding: 0 !important;
  955. }
  956. .page--login .fp-form-system_login_form label {
  957. display: block !important;
  958. }
  959. .section-box-title-block-system-login_form {
  960. display: none;
  961. }
  962. .page--login h2.login-welcome {
  963. margin-top: 60px;
  964. font-weight: normal;
  965. font-size: 2.5em;
  966. }
  967. .page--login .login-content-div .form-element {
  968. margin-bottom: 40px;
  969. }
  970. .page--login .element-type-submit input {
  971. width: 100%;
  972. }
  973. .page--login .login-content-div .element-type-submit {
  974. margin-bottom: 10px;
  975. }
  976. .page--login .form-element-description {
  977. padding-left: 0;
  978. font-family: inherit;
  979. color: #777;
  980. }
  981. .page--login #login-form-forgot-password {
  982. text-align: right;
  983. }
  984. .page--login a {
  985. color: black;
  986. }
  987. .page--login #school-logo img {
  988. width: 200px;
  989. height: auto;
  990. }
  991. .page--login #school-logo {
  992. display: inline-block;
  993. position: absolute;
  994. bottom: 20px;
  995. right: 20px;
  996. }
  997. /* All of the top-nav stuff goes here */
  998. ___top_nav{}
  999. #header {
  1000. border-bottom: 1px solid #ddd;
  1001. }
  1002. ul.top-nav-ul {
  1003. list-style-type: none;
  1004. margin: 0;
  1005. margin-top: 10px;
  1006. padding: 0;
  1007. float: right;
  1008. display: inline-block;
  1009. }
  1010. ul.top-nav-ul li {
  1011. display: table-cell;
  1012. padding-right: 30px;
  1013. padding-left: 30px;
  1014. border-right: 1px solid #ccc;
  1015. height: 35px;
  1016. vertical-align: middle;
  1017. }
  1018. ul.top-nav-ul li.last {
  1019. border-right: 0;
  1020. margin-right: 10px;
  1021. }
  1022. #header #top-nav form {
  1023. display: inline;
  1024. padding: 0;
  1025. margin: 0;
  1026. }
  1027. #header #top-nav form .smallinput {
  1028. width: 265px;
  1029. padding: 0.5em 1em;
  1030. border: 1px solid #ccc;
  1031. font-size: 0.9em;
  1032. border-radius: 5px;
  1033. }
  1034. #header #top-nav form a {
  1035. font-size: 1.2em;
  1036. margin-left: 10px;
  1037. }
  1038. ul.top-nav-ul li.user-options i {
  1039. font-size: 1.2em;
  1040. }
  1041. #main-contant-wrapper {
  1042. min-height: calc(100vh - 250px);
  1043. box-sizing: border-box;
  1044. }
  1045. .top-nav-ul .tub-user-menu .tub-caret-down {
  1046. font-size: 0.8em;
  1047. padding-left: 10px;
  1048. }
  1049. .top-nav-ul .tub-user-menu {
  1050. position: relative;
  1051. }
  1052. .top-nav-ul #tub-user-pulldown {
  1053. z-index: 99;
  1054. min-width: 200px;
  1055. white-space: nowrap;
  1056. text-overflow: ellipsis;
  1057. background-color: white;
  1058. color: black;
  1059. padding: 10px;
  1060. font-size: 0.85em;
  1061. border: 1px solid #ccc;
  1062. position: absolute;
  1063. right: 10px;
  1064. top: 45px;
  1065. }
  1066. .current-student-link i.fa {
  1067. font-size: 1.1em;
  1068. }
  1069. #header #top-nav #tub-user-pulldown .user-pulldown {
  1070. padding-left: 20px ;
  1071. list-style-type: circle;
  1072. }
  1073. #header #top-nav #tub-user-pulldown .user-pulldown li {
  1074. display: block;
  1075. border: 0;
  1076. padding-left: 10px;
  1077. list-style-type: circle;
  1078. height: auto;
  1079. line-height: 1.9em;
  1080. }
  1081. .tub-icon-element-alert {
  1082. position: relative;
  1083. }
  1084. .tub-icon-element-alert .tub-alert-count {
  1085. position: absolute;
  1086. display: inline-block;
  1087. text-align: center;
  1088. top: 8px;
  1089. right: -4px;
  1090. color: indianred;
  1091. font-size: 0.7em;
  1092. }
  1093. ___sidebar-left{}
  1094. .has-sidebar-left #page-content {
  1095. display: inline-block;
  1096. vertical-align: top;
  1097. padding-left: 20px;
  1098. padding-top: 10px;
  1099. width: calc(100vw - 200px);
  1100. max-width: 1500px;
  1101. }
  1102. #sidebar-left {
  1103. display: inline-block;
  1104. vertical-align: top;
  1105. width: 120px;
  1106. background-color: #999999;
  1107. }
  1108. ul.sidebar-left-nav {
  1109. margin: 0;
  1110. padding: 0;
  1111. list-style: none;
  1112. }
  1113. ul.sidebar-left-nav li {
  1114. padding-top: 20px;
  1115. padding-bottom: 20px;
  1116. text-align: center;
  1117. }
  1118. ul.sidebar-left-nav li .desc {
  1119. color: white;
  1120. font-weight: 700;
  1121. font-size: 0.9em;
  1122. }
  1123. ul.sidebar-left-nav li:hover {
  1124. background-color: #777;
  1125. }
  1126. ul.sidebar-left-nav li i {
  1127. font-size: 2.1em;
  1128. color: white;
  1129. }
  1130. ul.sidebar-left-nav li.students i,
  1131. ul.sidebar-left-nav li.analytics i
  1132. {
  1133. font-size: 2em;
  1134. }
  1135. .clear {
  1136. clear: both;
  1137. }
  1138. ___hamburger_menu{}
  1139. #mobile-hamburger-menu {
  1140. z-index: 9999;
  1141. position: absolute;
  1142. top: 50px;
  1143. left: 0px;
  1144. background-color: #999999;
  1145. width: 170px;
  1146. }
  1147. #mobile-hamburger-menu .logout {
  1148. border-top: 1px solid white;
  1149. }
  1150. .mobile-top-nav {
  1151. text-align: center;
  1152. margin-left: auto;
  1153. margin-right: auto;
  1154. }
  1155. .mobile-top-nav ul.top-nav-ul{
  1156. display: inline-block;
  1157. float: none;
  1158. font-size: 1.9em;
  1159. border-bottom: 1px solid white;
  1160. padding-bottom: 10px;
  1161. }
  1162. ___breadcrumbs{}
  1163. #breadcrumb-inner-wrapper {
  1164. float: left;
  1165. display: block;
  1166. margin-left: 13px;
  1167. }
  1168. #breadcrumb-inner-wrapper ul {
  1169. list-style: none;
  1170. padding: 0;
  1171. margin: 0;
  1172. }
  1173. .breadcrumbs {
  1174. display: block;
  1175. }
  1176. .breadcrumbs li.first {
  1177. padding-left: 8px;
  1178. }
  1179. .breadcrumbs li {
  1180. display: inline;
  1181. }
  1182. .breadcrumbs li a, .breadcrumbs li a:link, .breadcrumbs li a:visited {
  1183. color: #666;
  1184. display: block;
  1185. float: left;
  1186. font-size: 12px;
  1187. margin-left: -13px;
  1188. padding: 5px 17px 11px 18px;
  1189. position: relative !important;
  1190. text-decoration: none;
  1191. }
  1192. .breadcrumbs li a {
  1193. background-image: url(images/bg-crumbs.png);
  1194. background-repeat: no-repeat;
  1195. background-position: 100% 0;
  1196. position: relative !important;
  1197. }
  1198. .breadcrumbs li a:hover{
  1199. color:#333;
  1200. background-position:100% -48px;
  1201. cursor:pointer;
  1202. }
  1203. .breadcrumbs li a:active{
  1204. color:#333;
  1205. background-position:100% -96px;
  1206. }
  1207. ___tabs{}
  1208. .page-tabs-wrapper {
  1209. margin-top: 10px;
  1210. margin-bottom: 20px;
  1211. }
  1212. ul.tabs {
  1213. margin: 0;
  1214. padding: 0;
  1215. padding-left: 20px;
  1216. list-style: none;
  1217. border-bottom: 1px solid #ccc;
  1218. }
  1219. ul.tabs li.tab {
  1220. position: relative;
  1221. top: 1px;
  1222. display: inline-block;
  1223. padding: 3px 10px 3px 10px;
  1224. border-bottom: 1px solid #ccc;
  1225. }
  1226. ul.tabs li.active {
  1227. border: 1px solid #ccc;
  1228. border-radius: 5px 5px 0px 0px;
  1229. border-bottom: 1px solid white;
  1230. background-color: white;
  1231. }
  1232. ul.tabs li.active a {
  1233. color: black;
  1234. font-weight: bold;
  1235. cursor: default;
  1236. }
  1237. ul.tabs li.active a:hover {
  1238. text-decoration: none;
  1239. }
  1240. ul.tabs li.inactive a {
  1241. color: #888;
  1242. }
  1243. body.has-page-tabs .inner-page-content-wrapper {
  1244. margin-top: 10px;
  1245. margin-left: 20px;
  1246. }
  1247. ___history_tab{}
  1248. .history-comment-row {
  1249. margin-top: 5px;
  1250. margin-bottom: 5px;
  1251. }
  1252. ___advising_screens{}
  1253. .degree-plan-wrapper {
  1254. max-width: 1024px;
  1255. }
  1256. .fp-semester-table td {
  1257. font-size: 1.0em;
  1258. }
  1259. .fp-box-top {
  1260. width: 95%;
  1261. }
  1262. table.draw-course-row {
  1263. table-layout: fixed;
  1264. width: 100%;
  1265. }
  1266. table.table-group-select-row {
  1267. table-layout: fixed;
  1268. width: 100%;
  1269. }
  1270. .group-row-msg {
  1271. font-style: italic;
  1272. }
  1273. .box-headers-row table.header-table {
  1274. table-layout: fixed;
  1275. width: 100%;
  1276. }
  1277. .fp-semester-table .fp-box-top th {
  1278. font-size: 0.9em;
  1279. }
  1280. .fp-semester-table td.fp-boxes {
  1281. width: 50%;
  1282. }
  1283. .fp-semester-table table.draw-course-row td {
  1284. white-space: nowrap;
  1285. }
  1286. .fp-semester-table table .w1_1 {
  1287. width: 10%;
  1288. text-align: left;
  1289. }
  1290. .fp-semester-table table .w1_2 {
  1291. width: 8%;
  1292. text-align: left;
  1293. }
  1294. .fp-semester-table table .w1_3 {
  1295. width: 8%;
  1296. text-align: left;
  1297. }
  1298. .fp-semester-table table .w2 {
  1299. width: 17%;
  1300. text-align: left;
  1301. }
  1302. .fp-semester-table table .w3 {
  1303. width: 26%;
  1304. text-align: left;
  1305. }
  1306. .fp-semester-table table .w4 {
  1307. width: 10%;
  1308. text-align: left;
  1309. }
  1310. .fp-semester-table table .w5 {
  1311. width:10%;
  1312. text-align: left;
  1313. }
  1314. /* NOTE:
  1315. * Do not set a width for .w6 (pts column, also last column in table) as that will
  1316. * mess up the spacing of everything else. Not sure why it does that,
  1317. * but it has to do with trying to set widths on td elements.
  1318. */
  1319. .fp-semester-table table .w6 {
  1320. /* width: 9%; */
  1321. text-align: left;
  1322. }
  1323. /*
  1324. This starts off a "box", like "Freshman Year" or "Excess Credits"
  1325. */
  1326. table.fp-box-top {
  1327. margin-bottom: 10px;
  1328. }
  1329. .what-if-selector {
  1330. width: 90%;
  1331. }
  1332. .sub-tabs .subtab-link-wrapper label {
  1333. display: inline-block;
  1334. font-weight: normal;
  1335. }
  1336. .sub-tabs .subtab-link-wrapper a {
  1337. padding-left: 10px;
  1338. color: #999;
  1339. }
  1340. .sub-tabs .subtab-link-wrapper a:hover {
  1341. color: inherit;
  1342. }
  1343. .sub-tabs .change-term-link
  1344. {
  1345. padding-left: 30px;
  1346. font-size: 1.2em;
  1347. }
  1348. .sub-tabs .change-what-if-link {
  1349. display: inline-block;
  1350. margin-left: 20px;
  1351. height: 22px;
  1352. padding: 0px 5px 2px 5px;
  1353. background-color: lemonchiffon;
  1354. font-size: 1.2em;
  1355. }
  1356. .sub-tabs .change-what-if-link a {
  1357. }
  1358. ___popups_and_dialog{}
  1359. /* Don't display if this is a popup! */
  1360. .page-is-popup #header,
  1361. .page-is-popup .fp-bottom-message,
  1362. .page-is-popup h2.title,
  1363. .page-is-popup #breadcrumbs-wrapper,
  1364. .page-is-popup #sidebar-left
  1365. {
  1366. display: none;
  1367. }
  1368. .page-is-popup #page-content {
  1369. width: calc(100vw - 30px) !important;
  1370. padding-left: 0;
  1371. padding-right: 10px;
  1372. }
  1373. .ui-dialog {
  1374. background-color: white;
  1375. }
  1376. .ui-dialog .ui-widget-content,
  1377. .ui-widget-content
  1378. {
  1379. background: white !important;
  1380. }
  1381. .ui-dialog .ui-dialog-content {
  1382. padding: 0;
  1383. padding-left: 10px;
  1384. }
  1385. .ui-dialog iframe {
  1386. border: 0;
  1387. }
  1388. .ui-widget-header {
  1389. color: white;
  1390. background: #aaa;
  1391. border: 0;
  1392. border-bottom: 5px solid #999;
  1393. border-radius: 0;
  1394. }
  1395. .ui-widget-header button:focus {
  1396. outline: none;
  1397. }
  1398. .ui-widget-overlay {
  1399. opacity: 0.2;
  1400. }
  1401. iframe#fp-iframe-dialog-small-iframe {
  1402. width: calc(100% - 10px);
  1403. }
  1404. iframe#fp-iframe-dialog-large-iframe {
  1405. width: calc(100% - 10px);
  1406. }
  1407. ___student_mini_profile{}
  1408. .student-mini-profile .header-profile-image {
  1409. display: inline-block;
  1410. width: 80px;
  1411. height: 100px;
  1412. overflow: hidden;
  1413. border-radius: 5px;
  1414. float: left;
  1415. margin-right: 20px;
  1416. }
  1417. .student-mini-profile .header-profile-image img {
  1418. width: 100%;
  1419. height: auto;
  1420. }
  1421. .student-mini-profile .profile-top-details-wrapper {
  1422. float: left;
  1423. width: calc(100% - 500px);
  1424. max-width: 550px;
  1425. }
  1426. .student-mini-profile .student-header .profile-detail-line {
  1427. margin-bottom: 3px;
  1428. }
  1429. .student-mini-profile .profile-top-details-wrapper .profile-detail-line {
  1430. font-size: 1.05em;
  1431. margin-bottom: 10px;
  1432. }
  1433. .student-mini-profile .profile-detail-line label {
  1434. display: inline-block;
  1435. min-width: 150px;
  1436. font-weight: bold;
  1437. vertical-align: top;
  1438. }
  1439. .student-mini-profile .profile-top-details-wrapper .profile-detail-line-degree .profile-line-content {
  1440. display: inline-block;
  1441. width: 300px;
  1442. vertical-align: top;
  1443. }
  1444. .student-mini-profile .profile-detail-line .multi-degree-title {
  1445. display: block;
  1446. }
  1447. .student-mini-profile .profile-detail-line .multi-degree-comma {
  1448. display: none;
  1449. }
  1450. #page-student-mini-profile-wrapper {
  1451. margin-left: 20px;
  1452. margin-top: 20px;
  1453. margin-bottom: 0px;
  1454. border-bottom: 1px solid #eee;
  1455. }
  1456. .student-mini-profile h2 {
  1457. margin: 0;
  1458. font-weight: 400;
  1459. }
  1460. .student-mini-profile .degree-title {
  1461. display: inline;
  1462. }
  1463. .student-mini-profile .catalog-year-alert-early a {
  1464. color: orange;
  1465. padding-left: 10px;
  1466. }
  1467. .student-mini-profile .catalog-year-alert-too-far a {
  1468. color: orange;
  1469. padding-left: 10px;
  1470. }
  1471. .student-mini-profile h2.what-if-notice {
  1472. font-weight: bold;
  1473. display: inline-block;
  1474. }
  1475. .student-mini-profile .what-if-change-settings {
  1476. padding-left: 20px;
  1477. font-weight: bold;
  1478. font-size: 0.8em;
  1479. }
  1480. .degree-op-link {
  1481. padding-right: 10px;
  1482. padding-left: 10px;
  1483. }
  1484. .student-mini-profile-what-if-mode {
  1485. background-color: lemonchiffon;
  1486. padding: 10px;
  1487. }
  1488. .student-mini-profile a {
  1489. color: #999;
  1490. }
  1491. .student-mini-profile a:hover {
  1492. color: inherit;
  1493. }