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