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. 4.x themes/classic/style.css
  16. 4.x modules/system/css/style.css
  17. 5.x themes/basic/style.css
  18. 5.x themes/fp5_clean/style.css
  19. 5.x themes/classic/style.css
  20. 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. /* For a smaller (width-wise) select field */
  843. .element-type-select-smaller select {
  844. font-size: 1.0em;
  845. font-weight: normal;
  846. border: 1px solid #8E929C;
  847. padding: 1rem;
  848. width: 100%;
  849. max-width: 250px;
  850. box-shadow: 0px 1px 2px rgb(0,0,0,0.15);
  851. border-radius: 4px;
  852. filter: none;
  853. }
  854. .element-wrapper--hidden {
  855. display: none;
  856. }
  857. .form-element-editor-after-wrapper-description {
  858. margin-bottom: 10px;
  859. padding-left: 10px;
  860. font-size: 0.9em;
  861. }
  862. input::placeholder {
  863. opacity: 0.7;
  864. }
  865. .readonly {
  866. background-color: #eee !important;
  867. }
  868. .section-box-title {
  869. background-color: #aaa;
  870. border-bottom: 5px solid #999;
  871. color: white;
  872. text-align: center;
  873. padding: 2px;
  874. padding-bottom: 0;
  875. font-weight: 500;
  876. margin-bottom: 5px;
  877. }
  878. #page-print-options {
  879. float: right;
  880. padding-left: 20px;
  881. padding-right: 10px;
  882. font-size: 1.4em;
  883. }
  884. a.button {
  885. display: inline-block;
  886. color: white;
  887. font-weight: 600;
  888. border: 1px solid #1E90FF;
  889. background-color: #0095ff;
  890. padding: 9px;
  891. margin-bottom: 15px;
  892. text-decoration: none;
  893. margin-right: 10px;
  894. }
  895. a.button:hover {
  896. background-color: lightskyblue;
  897. }
  898. a.cancel-button {
  899. background-color: crimson;
  900. border-color: brown;
  901. }
  902. a.cancel-button:hover {
  903. background-color: pink;
  904. }
  905. div.pager-wrapper {
  906. border-top: 1px solid #ccc;
  907. }
  908. ul.pager {
  909. margin: 1.75em 0 0.75em;
  910. clear: both;
  911. text-align: center;
  912. }
  913. ul.pager li {
  914. background-image: none;
  915. display: inline;
  916. list-style-type: none;
  917. padding: 0.5em;
  918. margin: 0 0 0.25em 0.5em;
  919. font-size: 14px;
  920. }
  921. ul.pager li.pager-current {
  922. color: #fff;
  923. padding: 0.5em;
  924. background-color: #bbb;
  925. border: 1px solid #000;
  926. }
  927. ___page--popup-report-contact{}
  928. body.page--popup-report-contact,
  929. body.page--popup-contact-form-thank-you
  930. {
  931. padding: 10px;
  932. }
  933. ___page--stats{}
  934. .page--admin-tools-stats .stats-main-menu {
  935. margin-bottom: 30px;
  936. }
  937. /**
  938. * Login Page
  939. */
  940. ___page--login{}
  941. .page--login {
  942. background-color: #F5F5F5;
  943. }
  944. .page--login .top-banner {
  945. padding-top: 40px;
  946. }
  947. .page--login #page-login-user-form {
  948. float: left;
  949. width: 45%;
  950. text-align: center;
  951. }
  952. .page--login #page-login-page__wallpaper {
  953. position: relative;
  954. float: right;
  955. width: 55%;
  956. background: url('images/login_wallpaper.jpg') bottom center no-repeat;
  957. background-size: cover;
  958. }
  959. .page--login .login-content-div .left-side-content {
  960. text-align: left;
  961. display: inline-block;
  962. width: 400px;
  963. margin-top: 80px;
  964. }
  965. .page--login .fp-form-system_login_form {
  966. padding: 0 !important;
  967. }
  968. .page--login .fp-form-system_login_form label {
  969. display: block !important;
  970. }
  971. .section-box-title-block-system-login_form {
  972. display: none;
  973. }
  974. .page--login h2.login-welcome {
  975. margin-top: 60px;
  976. font-weight: normal;
  977. font-size: 2.5em;
  978. }
  979. .page--login .login-content-div .form-element {
  980. margin-bottom: 40px;
  981. }
  982. .page--login .element-type-submit input {
  983. width: 100%;
  984. }
  985. .page--login .login-content-div .element-type-submit {
  986. margin-bottom: 10px;
  987. }
  988. .page--login .form-element-description {
  989. padding-left: 0;
  990. font-family: inherit;
  991. color: #777;
  992. }
  993. .page--login #login-form-forgot-password {
  994. text-align: right;
  995. }
  996. .page--login a {
  997. color: black;
  998. }
  999. .page--login #school-logo img {
  1000. width: 200px;
  1001. height: auto;
  1002. }
  1003. .page--login #school-logo {
  1004. display: inline-block;
  1005. position: absolute;
  1006. bottom: 20px;
  1007. right: 20px;
  1008. }
  1009. /* All of the top-nav stuff goes here */
  1010. ___top_nav{}
  1011. #header {
  1012. border-bottom: 1px solid #ddd;
  1013. }
  1014. ul.top-nav-ul {
  1015. list-style-type: none;
  1016. margin: 0;
  1017. margin-top: 10px;
  1018. padding: 0;
  1019. float: right;
  1020. display: inline-block;
  1021. }
  1022. ul.top-nav-ul li {
  1023. display: table-cell;
  1024. padding-right: 30px;
  1025. padding-left: 30px;
  1026. border-right: 1px solid #ccc;
  1027. height: 35px;
  1028. vertical-align: middle;
  1029. }
  1030. ul.top-nav-ul li.last {
  1031. border-right: 0;
  1032. margin-right: 10px;
  1033. }
  1034. #header #top-nav form {
  1035. display: inline;
  1036. padding: 0;
  1037. margin: 0;
  1038. }
  1039. #header #top-nav form .smallinput {
  1040. width: 265px;
  1041. padding: 0.5em 1em;
  1042. border: 1px solid #ccc;
  1043. font-size: 0.9em;
  1044. border-radius: 5px;
  1045. }
  1046. #header #top-nav form a {
  1047. font-size: 1.2em;
  1048. margin-left: 10px;
  1049. }
  1050. ul.top-nav-ul li.user-options i {
  1051. font-size: 1.2em;
  1052. }
  1053. #main-contant-wrapper {
  1054. min-height: calc(100vh - 250px);
  1055. box-sizing: border-box;
  1056. }
  1057. .top-nav-ul .tub-user-menu .tub-caret-down {
  1058. font-size: 0.8em;
  1059. padding-left: 10px;
  1060. }
  1061. .top-nav-ul .tub-user-menu {
  1062. position: relative;
  1063. }
  1064. .top-nav-ul #tub-user-pulldown {
  1065. z-index: 99;
  1066. min-width: 200px;
  1067. white-space: nowrap;
  1068. text-overflow: ellipsis;
  1069. background-color: white;
  1070. color: black;
  1071. padding: 10px;
  1072. font-size: 0.85em;
  1073. border: 1px solid #ccc;
  1074. position: absolute;
  1075. right: 10px;
  1076. top: 45px;
  1077. }
  1078. .current-student-link i.fa {
  1079. font-size: 1.1em;
  1080. }
  1081. #header #top-nav #tub-user-pulldown .user-pulldown {
  1082. padding-left: 20px ;
  1083. list-style-type: circle;
  1084. }
  1085. #header #top-nav #tub-user-pulldown .user-pulldown li {
  1086. display: block;
  1087. border: 0;
  1088. padding-left: 10px;
  1089. list-style-type: circle;
  1090. height: auto;
  1091. line-height: 1.9em;
  1092. }
  1093. .tub-icon-element-alert {
  1094. position: relative;
  1095. }
  1096. .tub-icon-element-alert .tub-alert-count {
  1097. position: absolute;
  1098. display: inline-block;
  1099. text-align: center;
  1100. top: 8px;
  1101. right: -4px;
  1102. color: indianred;
  1103. font-size: 0.7em;
  1104. }
  1105. ___sidebar-left{}
  1106. .has-sidebar-left #page-content {
  1107. display: inline-block;
  1108. vertical-align: top;
  1109. padding-left: 20px;
  1110. padding-top: 10px;
  1111. width: calc(100vw - 200px);
  1112. max-width: 1500px;
  1113. }
  1114. #sidebar-left {
  1115. display: inline-block;
  1116. vertical-align: top;
  1117. width: 120px;
  1118. background-color: #999999;
  1119. }
  1120. ul.sidebar-left-nav {
  1121. margin: 0;
  1122. padding: 0;
  1123. list-style: none;
  1124. }
  1125. ul.sidebar-left-nav li {
  1126. padding-top: 20px;
  1127. padding-bottom: 20px;
  1128. text-align: center;
  1129. }
  1130. ul.sidebar-left-nav li .desc {
  1131. color: white;
  1132. font-weight: 700;
  1133. font-size: 0.9em;
  1134. }
  1135. ul.sidebar-left-nav li:hover {
  1136. background-color: #777;
  1137. }
  1138. ul.sidebar-left-nav li i {
  1139. font-size: 2.1em;
  1140. color: white;
  1141. }
  1142. ul.sidebar-left-nav li.students i,
  1143. ul.sidebar-left-nav li.analytics i
  1144. {
  1145. font-size: 2em;
  1146. }
  1147. .clear {
  1148. clear: both;
  1149. }
  1150. ___hamburger_menu{}
  1151. #mobile-hamburger-menu {
  1152. z-index: 9999;
  1153. position: absolute;
  1154. top: 50px;
  1155. left: 0px;
  1156. background-color: #999999;
  1157. width: 170px;
  1158. }
  1159. #mobile-hamburger-menu .logout {
  1160. border-top: 1px solid white;
  1161. }
  1162. .mobile-top-nav {
  1163. text-align: center;
  1164. margin-left: auto;
  1165. margin-right: auto;
  1166. }
  1167. .mobile-top-nav ul.top-nav-ul{
  1168. display: inline-block;
  1169. float: none;
  1170. font-size: 1.9em;
  1171. border-bottom: 1px solid white;
  1172. padding-bottom: 10px;
  1173. }
  1174. ___breadcrumbs{}
  1175. #breadcrumb-inner-wrapper {
  1176. float: left;
  1177. display: block;
  1178. margin-left: 13px;
  1179. }
  1180. #breadcrumb-inner-wrapper ul {
  1181. list-style: none;
  1182. padding: 0;
  1183. margin: 0;
  1184. }
  1185. .breadcrumbs {
  1186. display: block;
  1187. }
  1188. .breadcrumbs li.first {
  1189. padding-left: 8px;
  1190. }
  1191. .breadcrumbs li {
  1192. display: inline;
  1193. }
  1194. .breadcrumbs li a, .breadcrumbs li a:link, .breadcrumbs li a:visited {
  1195. color: #666;
  1196. display: block;
  1197. float: left;
  1198. font-size: 12px;
  1199. margin-left: -13px;
  1200. padding: 5px 17px 11px 18px;
  1201. position: relative !important;
  1202. text-decoration: none;
  1203. }
  1204. .breadcrumbs li a {
  1205. background-image: url(images/bg-crumbs.png);
  1206. background-repeat: no-repeat;
  1207. background-position: 100% 0;
  1208. position: relative !important;
  1209. }
  1210. .breadcrumbs li a:hover{
  1211. color:#333;
  1212. background-position:100% -48px;
  1213. cursor:pointer;
  1214. }
  1215. .breadcrumbs li a:active{
  1216. color:#333;
  1217. background-position:100% -96px;
  1218. }
  1219. ___tabs{}
  1220. .page-tabs-wrapper {
  1221. margin-top: 10px;
  1222. margin-bottom: 20px;
  1223. }
  1224. ul.tabs {
  1225. margin: 0;
  1226. padding: 0;
  1227. padding-left: 20px;
  1228. list-style: none;
  1229. border-bottom: 1px solid #ccc;
  1230. }
  1231. ul.tabs li.tab {
  1232. position: relative;
  1233. top: 1px;
  1234. display: inline-block;
  1235. padding: 3px 10px 3px 10px;
  1236. border-bottom: 1px solid #ccc;
  1237. }
  1238. ul.tabs li.active {
  1239. border: 1px solid #ccc;
  1240. border-radius: 5px 5px 0px 0px;
  1241. border-bottom: 1px solid white;
  1242. background-color: white;
  1243. }
  1244. ul.tabs li.active a {
  1245. color: black;
  1246. font-weight: bold;
  1247. cursor: default;
  1248. }
  1249. ul.tabs li.active a:hover {
  1250. text-decoration: none;
  1251. }
  1252. ul.tabs li.inactive a {
  1253. color: #888;
  1254. }
  1255. body.has-page-tabs .inner-page-content-wrapper {
  1256. margin-top: 10px;
  1257. margin-left: 20px;
  1258. }
  1259. ___history_tab{}
  1260. .history-comment-row {
  1261. margin-top: 5px;
  1262. margin-bottom: 5px;
  1263. }
  1264. ___advising_screens{}
  1265. .degree-plan-wrapper {
  1266. max-width: 1024px;
  1267. }
  1268. .fp-semester-table td {
  1269. font-size: 1.0em;
  1270. }
  1271. .fp-box-top {
  1272. width: 95%;
  1273. }
  1274. table.draw-course-row {
  1275. table-layout: fixed;
  1276. width: 100%;
  1277. }
  1278. table.table-group-select-row {
  1279. table-layout: fixed;
  1280. width: 100%;
  1281. }
  1282. .group-row-msg {
  1283. font-style: italic;
  1284. }
  1285. .box-headers-row table.header-table {
  1286. table-layout: fixed;
  1287. width: 100%;
  1288. }
  1289. .fp-semester-table .fp-box-top th {
  1290. font-size: 0.9em;
  1291. }
  1292. .fp-semester-table td.fp-boxes {
  1293. width: 50%;
  1294. }
  1295. .fp-semester-table table.draw-course-row td {
  1296. white-space: nowrap;
  1297. }
  1298. .fp-semester-table table .w1_1 {
  1299. width: 10%;
  1300. text-align: left;
  1301. }
  1302. .fp-semester-table table .w1_2 {
  1303. width: 8%;
  1304. text-align: left;
  1305. }
  1306. .fp-semester-table table .w1_3 {
  1307. width: 8%;
  1308. text-align: left;
  1309. }
  1310. .fp-semester-table table .w2 {
  1311. width: 17%;
  1312. text-align: left;
  1313. }
  1314. .fp-semester-table table .w3 {
  1315. width: 26%;
  1316. text-align: left;
  1317. }
  1318. .fp-semester-table table .w4 {
  1319. width: 10%;
  1320. text-align: left;
  1321. }
  1322. .fp-semester-table table .w5 {
  1323. width:10%;
  1324. text-align: left;
  1325. }
  1326. /* NOTE:
  1327. * Do not set a width for .w6 (pts column, also last column in table) as that will
  1328. * mess up the spacing of everything else. Not sure why it does that,
  1329. * but it has to do with trying to set widths on td elements.
  1330. */
  1331. .fp-semester-table table .w6 {
  1332. /* width: 9%; */
  1333. text-align: left;
  1334. }
  1335. /*
  1336. This starts off a "box", like "Freshman Year" or "Excess Credits"
  1337. */
  1338. table.fp-box-top {
  1339. margin-bottom: 10px;
  1340. }
  1341. .what-if-selector {
  1342. width: 90%;
  1343. }
  1344. .sub-tabs .subtab-link-wrapper label {
  1345. display: inline-block;
  1346. font-weight: normal;
  1347. }
  1348. .sub-tabs .subtab-link-wrapper a {
  1349. padding-left: 10px;
  1350. color: #999;
  1351. }
  1352. .sub-tabs .subtab-link-wrapper a:hover {
  1353. color: inherit;
  1354. }
  1355. .sub-tabs .change-term-link
  1356. {
  1357. padding-left: 30px;
  1358. font-size: 1.2em;
  1359. }
  1360. .sub-tabs .change-what-if-link {
  1361. display: inline-block;
  1362. margin-left: 20px;
  1363. height: 22px;
  1364. padding: 0px 5px 2px 5px;
  1365. background-color: lemonchiffon;
  1366. font-size: 1.2em;
  1367. }
  1368. .sub-tabs .change-what-if-link a {
  1369. }
  1370. ___popups_and_dialog{}
  1371. /* Don't display if this is a popup! */
  1372. .page-is-popup #header,
  1373. .page-is-popup .fp-bottom-message,
  1374. .page-is-popup h2.title,
  1375. .page-is-popup #breadcrumbs-wrapper,
  1376. .page-is-popup #sidebar-left
  1377. {
  1378. display: none;
  1379. }
  1380. .page-is-popup #page-content {
  1381. width: calc(100vw - 30px) !important;
  1382. padding-left: 0;
  1383. padding-right: 10px;
  1384. }
  1385. .ui-dialog {
  1386. background-color: white;
  1387. }
  1388. .ui-dialog .ui-widget-content,
  1389. .ui-widget-content
  1390. {
  1391. background: white !important;
  1392. }
  1393. .ui-dialog .ui-dialog-content {
  1394. padding: 0;
  1395. padding-left: 10px;
  1396. }
  1397. .ui-dialog iframe {
  1398. border: 0;
  1399. }
  1400. .ui-widget-header {
  1401. color: white;
  1402. background: #aaa;
  1403. border: 0;
  1404. border-bottom: 5px solid #999;
  1405. border-radius: 0;
  1406. }
  1407. .ui-widget-header button:focus {
  1408. outline: none;
  1409. }
  1410. .ui-widget-overlay {
  1411. opacity: 0.2;
  1412. }
  1413. iframe#fp-iframe-dialog-small-iframe {
  1414. width: calc(100% - 10px);
  1415. }
  1416. iframe#fp-iframe-dialog-large-iframe {
  1417. width: calc(100% - 10px);
  1418. }
  1419. ___student_mini_profile{}
  1420. .student-mini-profile .header-profile-image {
  1421. display: inline-block;
  1422. width: 80px;
  1423. height: 100px;
  1424. overflow: hidden;
  1425. border-radius: 5px;
  1426. float: left;
  1427. margin-right: 20px;
  1428. }
  1429. .student-mini-profile .header-profile-image img {
  1430. width: 100%;
  1431. height: auto;
  1432. }
  1433. .student-mini-profile .profile-top-details-wrapper {
  1434. float: left;
  1435. width: calc(100% - 500px);
  1436. max-width: 550px;
  1437. }
  1438. .student-mini-profile .student-header .profile-detail-line {
  1439. margin-bottom: 3px;
  1440. }
  1441. .student-mini-profile .profile-top-details-wrapper .profile-detail-line {
  1442. font-size: 1.05em;
  1443. margin-bottom: 10px;
  1444. }
  1445. .student-mini-profile .profile-detail-line label {
  1446. display: inline-block;
  1447. min-width: 150px;
  1448. font-weight: bold;
  1449. vertical-align: top;
  1450. }
  1451. .student-mini-profile .profile-top-details-wrapper .profile-detail-line-degree .profile-line-content {
  1452. display: inline-block;
  1453. width: 300px;
  1454. vertical-align: top;
  1455. }
  1456. .student-mini-profile .profile-detail-line .multi-degree-title {
  1457. display: block;
  1458. }
  1459. .student-mini-profile .profile-detail-line .multi-degree-comma {
  1460. display: none;
  1461. }
  1462. #page-student-mini-profile-wrapper {
  1463. margin-left: 20px;
  1464. margin-top: 20px;
  1465. margin-bottom: 0px;
  1466. border-bottom: 1px solid #eee;
  1467. }
  1468. .student-mini-profile h2 {
  1469. margin: 0;
  1470. font-weight: 400;
  1471. }
  1472. .student-mini-profile .degree-title {
  1473. display: inline;
  1474. }
  1475. .student-mini-profile .catalog-year-alert-early a {
  1476. color: orange;
  1477. padding-left: 10px;
  1478. }
  1479. .student-mini-profile .catalog-year-alert-too-far a {
  1480. color: orange;
  1481. padding-left: 10px;
  1482. }
  1483. .student-mini-profile h2.what-if-notice {
  1484. font-weight: bold;
  1485. display: inline-block;
  1486. }
  1487. .student-mini-profile .what-if-change-settings {
  1488. padding-left: 20px;
  1489. font-weight: bold;
  1490. font-size: 0.8em;
  1491. }
  1492. .degree-op-link {
  1493. padding-right: 10px;
  1494. padding-left: 10px;
  1495. }
  1496. .student-mini-profile-what-if-mode {
  1497. background-color: lemonchiffon;
  1498. padding: 10px;
  1499. }
  1500. .student-mini-profile a {
  1501. color: #999;
  1502. }
  1503. .student-mini-profile a:hover {
  1504. color: inherit;
  1505. }