style.css

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

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

File

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