@CHARSET "ISO-8859-1"; @import url('https://fonts.googleapis.com/css?family=Encode+Sans+Expanded'); /* jquery ui */ .ui-tooltip{padding:8px;position:absolute;z-index:9999;max-width:300px}body .ui-tooltip{border-width:2px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:3px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:3px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:3px}.ui-widget-shadow{-webkit-box-shadow:0 0 5px #666;box-shadow:0 0 5px #666}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;padding:0;position:absolute;width:1px}.ui-widget{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Arial,Helvetica,sans-serif;font-size:1em}.ui-widget.ui-widget-content{border:1px solid #c5c5c5}.ui-widget-content{border:1px solid #ddd;background:#fff;color:#333} /* schemes to pick: http://blog.visme.co/website-color-schemes/, 21 and 28 and 30 and 37... */ body { overflow: hidden; font-family: 'Encode Sans Expanded', sans-serif; background: url('/css/backgrounds/apollo_4_launch.jpg') no-repeat center fixed; background-size: cover; } a:visited { color: white; } a:hover { font-weight: bold; color: white; } a:link { color: yellow; text-decoration: underline; } /* logged in */ .whilst_loggedin { display: none; } .whilst_notloggedin { display: initial; } /* login page */ #login_block { display: block; width: 50%; margin: auto auto; height: auto; background: rgba(152, 175, 199, 0.8); border-radius: 10px; border: 3px solid black; } #login_google_button { display: flex; padding: 20px; border-bottom: 3px solid black; justify-content: center; } .login_flex_row { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 5px; } .login_flex_left { width: 50px; padding: 5px; justify-content: center; } .login_flex_right { flex: 1; padding: 5px; color: white; text-shadow: 1px 1px black; margin: auto auto; } .login_icon { width: 40px; height: 40px; } #test-signin { padding: 12px; border: 2px solid black; background: rgba(255, 255, 255, 0.5); margin-left: 10px; } #test-signin:hover { cursor: pointer; box-shadow: 2px 2px 2px white; } /* position elements */ #menu-fixed { position: fixed; width: 80px; top: 0; bottom: 0; left: 0; background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color: rgba(80 , 120, 140, 0.7); background-size:16px 16px; border-style: double; border-color: rgba(60, 60, 60, 0.9); border-width: 0px 5px 0px 0px; } #menu { position: absolute; height: 100%; overflow: none; display: flex; flex-direction: column; flex-wrap: nowrap; } /* GAH CENTER THIS BETTER!!! */ #triple-right { position: fixed; left: 80px; top: 0; bottom: 0; right: 0; } #top-bar { position: relative; left: 5px; height: 80px; background: rgba(200, 200, 200, 0.8); text-align: right; padding: 5px 10px 5px 5px; font-size: 54px; font-weight: bold; text-shadow: 2px 2px white; } #content-bar { position: absolute; bottom: 30px; top: 90px; right: 0px; left: 5px; width: 100%; overflow-y: auto; overflow-x: hidden; padding: 15px; background: rgba(233, 233, 233, 0.3); } #footer-bar { position: absolute; height: 30px; left: 5px; right: 0px; bottom: 0px; background: rgba(200, 200, 200, 0.8); text-align: right; padding: 10px; } /* footer */ .footer-licences { border-width:0; padding: 5px; } .footer-licences:hover { cursor: pointer; } /* loading thing in menu */ #loading-text { color: white; text-align: center; font-size: 10px; } /* top bar stuff */ /* USER INFO */ #user-info { position: absolute; z-index: 1000; left: 10px; top: 15px; bottom: 15px; width: 200px; background: rgba(90 , 185, 234, 0.9); border: 3px double black; } #user-info-picture { position: relative; float: left; width: 80px; height: 80px; border-radius:50% 50% 50% 50%; border: 3px double black; margin: -15px 0px -10px -50px; background: blue; } #user-info-text { position: relative; float: right; padding: 3px 5px 3px 0px; text-shadow: 1px 1px white; } #user-info-name { font-size: 16px; font-weight: bold; } #user-info-score { font-size: 22px; } .user-info-score_number { color: red; } #user-logout { position: absolute; z-index: 1000; left: 285px; top: 15px; bottom: 15px; text-align: center; font-size: 12px; width: 60px; padding: 18px 2px 20px 2px; background: rgba(255, 255, 255, 0.7); border: 3px double black; } #user-logout:hover { cursor: pointer; background: rgba(90 , 185, 234, 0.9); } #user-cp { position: absolute; z-index: 1000; left: 215px; top: 15px; bottom: 15px; text-align: center; font-size: 12px; width: 60px; padding: 18px 2px 20px 2px; background: rgba(255, 255, 255, 0.7); border: 3px double black; } #user-cp:hover { cursor: pointer; background: rgba(90 , 185, 234, 0.9); } /* menu items */ /* CARBON STYLE: http://lea.verou.me/css3patterns/#carbon-fibre */ .menu-item { flex: 1; justify-content: center; align-items: center; padding: 10px; color: white; margin-left: 0px; margin-top: 2px; cursor: pointer; border-radius: 5px;background-repeat: no-repeat; background-position: center; } .menu-item:hover { -webkit-filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); cursor: pointer; } .menu-block { flex: 2; } /* TIMELINE.PHP */ #unit_options { display: flex; flex-direction: row; flex-wrap: none; margin-right: 40px; } #unit_options-units { flex: 3; } #unit_options-feedback { flex: 1; text-align: justify; height: 95%; overflow: auto; padding: 3px; } .unit_selection-unit { display: inline-block; width: 20vw; padding: 15px; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; transition: all .2s ease-in; box-shadow: 1px 1px 1px black; margin: 5px;} .unit_selection-unit:hover { -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; -webkit-transition: all .2s ease-in; transition: all .2s ease-in; box-shadow: 2px 2px 2px black; cursor: pointer; background: #f5f5f5; } .unit_selection-level_3 { background: #c9c9ff; } .unit_selection-level_4 { background: #e1f7d5; } .unit_selection-level_5 { background: #ffbdbd; } .unit_selection-unit_name { font-size: 1.4vw; font-weight: bold; text-shadow: 1px 1px 1px #dddddd; margin-bottom: 5px; white-space: nowrap; overflow: hidden; } .unit_selection-unit_desc { font-size: 0.9vw; text-align: justify; height: 10vh; overflow: auto; padding: 3px; } #unit_selection-nosubscriptions { padding: 10px; border: 1px solid black; margin-top: 5px; background: rgba(255, 153, 153, 0.9); } #unit_feedback-container { display: flex; flex-direction: column; flex-wrap: wrap; } #unit_feedback-container:hover { } .unit_feedback-feedback { padding: 5px; margin: 3px; flex: 1; box-shadow: 1px 1px 1px black; font-size: 0.8vw} .unit_feedback-name { font-weight: bold; text-shadow: 1px 1px 1px white; } .unit_feedback-click { margin: 10px; background: rgba(200, 130, 0, 0.5); padding: 5px; } .unit_feedback-feedback-colour-1 { background: #CC6600; } .unit_feedback-feedback-colour-2 { background: #CC9900; } .unit_feedback-feedback-colour-3 { background: #AA6600; } .unit_feedback-feedback-colour-5 { background: #AA9900; } /* TOPICS.PHP */ #topics_selection-container { position: absolute; display: flex; flex-direction: row; flex-wrap: wrap; top: 0; left: 0; right: 40px; bottom: 20px; overflow-x: hidden; overflow-y: hidden; white-space: nowrap; background: rgba(152, 175, 199, 0.4); } .topics_selection_level_separator { width: 20px; background: rgba(199, 176, 152, 0.8); } .topics_selection_level_separator_text { transform: rotate(90deg); letter-spacing: 10px; } .topics_selection-level_container { -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1; text-align: center; height: 99.5%; margin: 0px -5px 0px 0px; overflow: hidden; padding: 5px; } .topics_selection-level_container > div { display: flex; flex: 1; align-items: center; justify-content: center; text-align:center; } .topics_selection-level_container:hover { flex: 1.2; } .topics_selection-split_cell { display: flex; flex-direction: column; flex-wrap: nowrap; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; padding: 5px; margin: 2px 0px 2px 0px; } .topics_selection-split_cell:hover { -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; box-shadow: 0 0 4px 5px white; background: rgba(200, 200, 200, 0.2); cursor: pointer; flex: 2; font-weight: 100; } .topics_selection-disabled { color: red; } .split_cell_title { display: flex; flex: 5; align-items: center; justify-content: center; width: 80%; justify-content: center; padding: 5px; white-space: normal; } .split_cell_title_name { padding: 5px; background: rgba(200, 200, 200, 0.7); } .split_cell_title:hover {} .split_cell_schedule { display: flex; flex: 1; align-items: center; justify-content: center; width: 80%; padding: 5px; white-space: normal; color: black; text-shadow: 1px 1px white; } .split_cell_schedule:hover { color: white; text-shadow: 1px 1px black; } /* timepicker */ .topics_set_schedule_timepicker { display: flex; flex-direction: row; flex-wrap: none; } .topics_set_schedule_timepick { flex: 1; padding: 8px; margin: 0px 1px 0px 1px; background: rgba(255, 255, 255, 0.3); } .topics_set_schedule_timepick:hover { background: green; } /* general css for the apps */ /* the whole app */ #activity_container { display: flex; flex-direction: row; flex-wrap: none; margin: 0px 0px 0px 0px; padding: 5px; height: 99%; } #general_information { display: flex; flex-direction: column; flex-wrap: none; flex: 1; background: none; padding: 10px; padding: 10px; margin: 10px; } /* info top row - name and icons */ #information_toprow { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; } #information_name { flex: 2.5; font-size: 30px; font-weight: bold; } /* icons */ #help_icons { flex: 1.8; display: flex; flex-direction: row; flex-wrap: wrap; } .help_icon { display: flex; padding: 0 5px 0 5px; } .help_icon:hover { -webkit-filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); cursor: pointer; } #help_icon_peerassess { background: url('/css/images/icons/peer_assessment.png') no-repeat; } #help_icon_peerhelp { background: url('/css/images/icons/help_icon.png') no-repeat; } #help_icon_helpmypeers { background: url('/css/images/icons/help_others.png') no-repeat; } /** peer request (GENERAL CSS) */ .general_peer_request_display { display: flex; flex-direction: row; flex-wrap: wrap; padding: 10px; } .general_peer_request_box { flex: 1 1 90px; padding: 5px; display:flex; align-items: center; justify-content: center; } .general_peer_request_image { width: 80px; height: 80px; border-radius:50% 50% 50% 50%; border: 3px double black; background: blue; } .general_peer_request_text { opacity: 0; padding: 3px 5px 3px 0px; text-align: left; padding: 15px 5px 15px 5px; width: 80px; } .general_peer_request_text:hover { opacity: 1; color: rgba(255, 255, 255, 1); text-shadow: 1px 1px white; cursor: pointer; } /* TOGGLE ELEMENTS */ .toggled_on { flex: 1; -webkit-filter: drop-shadow(2px 2px 2px rgba(255, 0, 0, 0.7)); filter: drop-shadow(2px 2px 2px rgba(255, 0, 0, 0.7)); } .toggled_off { flex: 0; } .toggled_neither { flex: 1; } /* the instrutions */ #general_instructions { border: 10px 3px 10px 3px; font-size: 1vw; flex: 4; overflow-y: auto; } /* the points progress bar */ #general_points { display: flex; flex-direction: row; flex-wrap: nowrap; margin-top: 5px; margin-bottom: 10px; padding: 3px; } #general_progress_progress { background: green; font-size: 1vw; text-align: left; height: 20px; padding: 3px; } #general_progress_total { background: red; font-size: 1vw; text-align: right; height: 20px; padding: 3px; } .general_peer_request_display { padding: 5px; } /* CSS FOR OTHER STUFF */ /* Auto resize textarea */ /* accordian stuff */ .ui-accordion-header { width: 100%; max-height: 10%; margin: 0; padding: 10px 0px 10px 0px; text-align: center; color: white; text-shadow: 1px 1px black; } .ui-accordion-header-collapsed { margin: 0; padding: 10px 0px 10px 0px; margin: 0px 0px 2px 0px; text-align: center; color: white; text-shadow: 1px 1px black; } .ui-accordion-header:hover { cursor: pointer; } .ui-accordion-content { margin: 0; padding: 5px 10px 5px 5px; color: white; text-shadow: 1px 1px black; overflow: auto; } /* arrows */ i { border: solid black; border-width: 0 8px 8px 0; display: inline-block; padding: 8px; } .right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .left { transform: rotate(135deg); -webkit-transform: rotate(135deg); } /* OBJECTIVE.PHP */ /* THE ACTIVITY AREA */ #activity_area { position: absolute; top: 90px; bottom: 0px; right: 0px; left: 15px; background: rgba(200, 200, 200, 0.3); margin: 0px 0px -0px -15px; overflow: scroll; } /* THE OBJECTIVES BAR - This lists the activites available to complete a topic */ #objectives_activity_bar { position: relative; height: 70px; margin: -5px 0px 0px -15px; display: flex; flex-direction: row; flex-wrap: wrap; left: 0; right: 40px; overflow: hidden; white-space: nowrap; } .objectives_activity { -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; height: 70px; display: flex; flex: 1; } .objectives_activity_bar_back { height: 70px; display: flex; justify-content: center; align-items: center; padding-left: 10px; width: 30px; background: rgba(200, 200, 200, 0.3); } .objectives_activity:hover { -webkit-filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; flex: 1.2; cursor: pointer; } .objectives_activity_bar_back:hover { -webkit-filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; cursor: pointer; } .objectives_activity_VideoNotes { background: rgba(200, 200, 200, 0.3) url("/css/a_VideoNotes/logo.png") no-repeat center; } .objectives_activity_Experiment { background: rgba(200, 200, 200, 0.3) url("/css/a_Experiment/logo.png") no-repeat center; } .objectives_activity_PhetLab { background: rgba(200, 200, 200, 0.3) url("/css/a_PhetLab/logo.png") no-repeat center; } .objectives_activity_FlashCards { background: rgba(200, 200, 200, 0.3) url("/css/a_FlashCards/logo.png") no-repeat center; } .objectives_activity_WorkedExample { background: rgba(200, 200, 200, 0.3) url("/css/a_WorkedExample/logo.png") no-repeat center; } .objectives_activity_Coding { background: rgba(200, 200, 200, 0.3) url("/css/a_Coding/logo.png") no-repeat center; } .objectives_activity_table { display: flex; flex-direction: column; flex-wrap: nowrap; height: 70px; background: black; padding: 8px 10px 8px 10px; width: 250px; text-align: center; } .objectives_activity_table_top { flex: 0.4; font-size: 12px; margin: 0px 18px 0px 0px; background: rgba(255, 255, 255, 0.3); padding: 3px; color: white; height: 21px;} .objectives_activity_table_bottom { flex: 1.5; color: white; font-size: 32px; letter-spacing: 12px; font-weight: bold; } #support_area { display: flex; flex: 0; } #support_area:hover { cursor: pointer; } /* the css for the stuff on this page */ #objectives_frontpage { margin: 20px; display: flex; flex-direction: column; flex-wrap: nowrap; } #objectives_infopanel { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 3px solid black; } #objectives_title { font-size: 36px; font-weight: bold; color: white; text-shadow: 3px 3px black; margin: 10px 0px 10px 0px; } #objectives_description { padding: 5px; color: white; text-shadow: 1px 1px black; } .objectives_frontpage_info { display: flex; flex-direction: row; flex-wrap: wrap; } #objectives_objectivepanel { display: flex; flex-direction: row; flex-wrap: wrap; flex: 1; padding: 5px; } #objectives_leaderboard { flex: 1; padding: 5px; } .objectives_panel_description { flex: 1; padding: 5px; color: white; text-shadow: 1px 1px black; } .objectives_panel_description_rank { flex: 1; padding: 5px; font-size: 24px; color: white; text-shadow: 1px 1px black; text-align: center; } .objectives_objective { display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1; padding: 5px; margin: 5px; } .objectives_level_1 { background: #00CC33; } .objectives_level_2 { background: #009900; } .objectives_level_3 { background: #CCCC00; } .objectives_level_4 { background: #999900; } .objectives_level_5 { background: #CC6600; } .objectives_level_6 { background: #FF3333; } .objectives_level_7 { background: #990000; } .objectives_objective_title { font-size: 20px; font-weight: bold; color: white; text-shadow: 3px 3px black; padding: 5px; } .objectives_objective_level { font-size: 12px; padding: 5px; background: rgba(255, 255, 255, 0.5); color: white; text-shadow: 1px 1px black; } .objectives_objective_description { flex: 1; font-size: 12px; color: white; text-shadow: 1px 1px black; padding: 5px; margin-bottom: 10px; } .objectives_objective_assessbar { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 5px; align-items: flex-end; } .objectives_objective_selfassess { display: flex; flex: 1; justify-content: center; align-items: center; font-size: 20px; height: 50px; color: white; background: rgba(255, 255, 255, 0.5); margin: 0px 1px 0px 1px; } .objectives_objective_selfassess:hover { cursor: pointer; color: black; } .objectives_objective_1 { background: #00CC33; } .objectives_objective_2 { background: #999900; } .objectives_objective_3 { background: #CC6600; } .objectives_objective_4 { background: #FF3333; } .objectives_objective_5 { background: #990000; } /* rankings table */ #objectives_ranking_table { display: flex; flex-direction: column; flex-wrap: nowrap; margin-right: 10px; } .objectives_ranking_line { display: flex; flex-direction: row; flex-wrap: nowrap; margin-top: 3px; } .objectives_ranking_line_generic { padding: 4px; color: black; text-shadow: 1px 1px white; } .objectives_ranking_line_name { flex: 2; font-weight: bold; } .objectives_ranking_line_value { flex: 1.5; text-align: center; } .objectives_ranking_line_total { flex: 1.5; text-align: center; } .objectives_ranking_header { font-weight: bold; background: rgba(152, 175, 199, 0.5); } .objectives_ranking_header:hover { cursor: pointer; color: white; text-shadow: 1px 1px black; } .objectives_ranking_1 { background: #00CC33; } .objectives_ranking_2 { background: #999900; } .objectives_ranking_3 { background: #CC6600; } .objectives_ranking_4 { background: rgba(152, 175, 199, 0.5); } .objectives_ranking_none { background: rgba(152, 175, 199, 0.5); padding: 10px; text-align: center; } /** FLASH CARDS */ /* completed */ #flashcards_completed { align-items: center; justify-content: center; width: 50%; height: auto; text-align: center; background: rgba(80 , 120, 140, 0.7); border: 2px black solid; margin: auto auto; padding: 20px; font-weight: bolder; } /* the non player stuff */ #flashcards_coorectornot { flex: 1; overflow-y: auto; padding: 0 5px 0 0; margin: 10px;} /* stack selection */ #flashcards_stackselection { display: flex; flex-direction: row; flex-wrap: nowrap; } #flashcards_stack_objectiveselect {} #flashcards_stack_topicselect {} #flashcards_stack_allselect {} .flashcard_stack_select_button { flex: 1; text-align: center; padding: 10px; text-shadow: 1px 1px white; } .flashcard_stack_select_button:hover { background: rgba(255, 255, 255, 0.4); font-weight: bolder; cursor: pointer; } .flashcard_stack_selected { border: 2px rgba(80 , 120, 140, 0.7) solid; background: #b8b800; color: white; text-shadow: 1px 1px black; } /* the flashcards area */ #flashcards_area { flex: 2; display: flex; flex-direction: column; flex-wrap: nowrap; padding: 10px; } #flashcards_stackselection { height: 40px; background: rgba(49, 89, 150, 0.8); } #flashcards_flashcard_deck { display: flex; flex: 1; background: rgba(200, 200, 200, 0.3); align: center; align-items: center; justify-content: center;} /* the cards */ .flashcard_flashcard { position: relative; width: 80%; background: rgba(152, 175, 199, 0.5); margin: 10% auto; height: 80%; border: 2px solid black; border-radius: 25px; box-shadow: 3px 3px 3px black; font-size: 24px; } .flashcard_flashcard_sidea { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; } .flashcard_flashcard_sidea:hover { cursor: pointer; } .flashcard_flashcard_sideb { background: rgba(80 , 120, 140, 0.7); display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 25px; } .flashcard_flashcard_sideb_answer { flex: 1; text-align: center; } .flashcard_flashcard_sideb_buttons { display: flex; flex-direction: column; flex-wrap: nowrap; width: 90px; height: 100%; } .flashcard_flashcard_sideb_buttons:hover { cursor: pointer; } .flashcard_flashcard_sideb_correct { flex: 3; background: green; border-radius: 0px 25px 0px 0px; background-image: url('/css/images/icons/002-checked.png'); background-position: center; background-repeat: no-repeat; } .flashcard_flashcard_sideb_incorrect { flex: 3; background: red; border-radius: 0px 0px 25px 0px; background-image: url('/css/images/icons/001-unchecked.png'); background-position: center; background-repeat: no-repeat; } .flashcard_flashcard_sideb_button_style:hover { -webkit-filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); cursor: pointer; } /* the stacks of correct or incorrect... */ #flashcards_stacks { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; } #flashcards_correct_score { padding: 20px; font-size: 40px; } #flashcards_incorrect_score { padding: 20px; font-size: 40px; } .flashcards_scorebox { flex: 1; border: 1px dotted black; padding: 10px; margin: 10px; height: 150px; text-align: center; font-size: 3vh; font-weight: bold; } /* experiment.php */ /* completed */ #experiments_completed { align-items: center; justify-content: center; width: 50%; height: auto; text-align: center; background: green; margin: auto auto; padding: 20px;} /* MOVE FROM BELOW INTO HERE WHEN DONE */ /* the experiments area */ #experiments_stackselection { height: 40px; background: red; } #experiments_experiment_deck { display: flex; flex: 1; background: blue; align: center; align-items: center; justify-content: center;} /* the questions */ .experiment_questionbox { display: flex; flex-direction: column; flex-wrap: nowrap; } .experiment_text { flex: 1; margin: 5px -5px 2px -5px; padding: 3px; background: rgba(255, 255, 255, 0.7); color: black; text-shadow: 1px 1px white; } .experiment_answer { flex: 1; margin: 0px -5px 0px -5px; padding: 3px; border: 3px solid #98AFC7; } .experiment_question_hint { display: none; background: rgba(152, 175, 199, 0.5); color: white; text-shadow: 1px 1px black; margin: 5px -5px 2px -5px; padding: 3px; } .experiment_question_answer { display: none; background: rgba(152, 175, 199, 0.5); color: white; text-shadow: 1px 1px black; margin: 5px -5px 2px -5px; padding: 3px; } .experiment_question_buttons { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 4px -5px 4px -5px; } .experiment_question_button { flex: 1; margin: 0 1px 0 1px; padding: 3px; background: rgba(255, 255, 255, 0.7); text-align: center; font-size: 10px; } .experiment_question_button:hover { background: rgba(50, 50, 50, 0.7); cursor: pointer; } .experiment_showfeedback { flex: 1.5; } .experiment_showhint { flex: 0.75; } .experiment_showanswer { flex: 0.75; } .experiment_feedback_dropdown { display: none; flex-direction: column; flex-wrap: nowrap; } .experiment_feedback { display: flex; flex-direction: row; flex-wrap: nowrap; background: rgba(255, 255, 255, 0.5); margin: 2px -5px 0px -5px; } .experiment_feedback_text { flex: 1; padding: 3px; } .experiment_feedback_vote { display: flex; flex-direction: column; flex-wrap: nowrap; width: 20px; } .experiment_feedback_upvote { flex: 1; background: green; } .experiment_feedback_upvote:hover { cursor: pointer; } .experiment_feedback_downvote { flex: 1; background: red; } .experiment_feedback_downvote:hover { cursor: pointer; } .experiment_givefeedback { flex: 1; margin: 0px -5px 0px -5px; padding: 3px; border: 3px solid #98AFC7; } .experiment_feedback_useful { color: red; font-weight: bold; } .experiment_feedback_inline { font-weight: bold; } #experiments_area { display: flex; flex: 2.5; flex-direction: row; flex-wrap: nowrap; padding: 10px; margin-right: 10px; } #experiments_move_left { display: flex; justify-content: center; align-items: center; } #experiments_info { display: flex; flex: 1; background: rgba(152, 175, 199, 0.5); padding: 10px; } #experiments_move_right { display: flex; justify-content: center; align-items: center; } .experiment_move_button { width: 50px; background: #98AFC7; } .experiment_move_button:hover { cursor: pointer; -webkit-filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5));} /* INTRODUCTION */ .experiment_introduction { display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1; justify-content: center; align-items: center; text-align: center; } .experiment_introduction_title { width: 80%; padding: 10px; font-size: 36px; font-weight: bold; color: white; text-shadow: 3px 3px black; } .experiment_introduction_text { width: 80%; padding: 5px; background: rgba(255, 255, 255, 0.5); color: black; text-shadow: 1px 1px white; } /* VARIABLES */ .experiment_variables { display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1; overflow: auto; } .experiment_variables_typetitle { font-size: 36px; font-weight: bold; color: white; text-shadow: 3px 3px black; margin: 10px 0px 10px 0px; } .experiment_variables_descriptions { padding: 5px; color: black; text-shadow: 1px 1px white; } .experiment_variables_variable { display: flex; flex-direction: row; flex-wrap: nowrap; padding: 5px; margin: 2px 0px 2px 0px; height: auto; } .experiment_variables_variable_section { flex: 1; margin-right: 2px; font-weight: bolder; align-items: center; } .experiment_variables_variable_section_info { display: flex; flex-direction: column; flex-wrap: nowrap; flex: 2; margin-right: 2px; } .experiment_variables_variable_notes { flex: 3; } .experiment_variables_type_0 { background: rgba(152, 175, 199, 0.7); } .experiment_variables_type_1 { background: rgba(152, 175, 199, 0.6); } .experiment_variables_type_2 { background: rgba(152, 175, 199, 0.5); } .experiment_variables_type_3 { background: rgba(152, 175, 199, 0.4); } .experiment_variables_variable_section_info { display: block; } .experiment_variables_variable_section_info_span { font-weight: bold; color: red; } /* equipment */ .experiment_equipment { overflow: auto; } /*display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1; */ .experiment_equipment_title { font-size: 36px; font-weight: bold; color: white; text-shadow: 3px 3px black; margin: 10px 0px 10px 0px; } .experiment_equipment_description { padding: 5px; color: black; text-shadow: 1px 1px white; } .experiment_equipment_list { display: flex; flex-direction: column; flex-wrap: nowrap; } .experiment_equipment_item { display: flex; flex-direction: row; flex-wrap: nowrap; background: rgba(152, 175, 199, 0.7); margin: 0 0 10px 0; } .experiment_equipment_item_name { flex: 1; font-weight: bold; } .experiment_equipment_item_range { flex: 1; } .experiment_equipment_item_justify { flex: 3; } .experiment_equipment_item_section { padding: 5px; } /* diagram */ .experiment_diagram { flex: 1; display: flex; justify-content: center; align-items: center; } .experiment_diagram_image { width-max: 100%; height-max: 100%; } .experiment_diagram_nodiagram { width: 50%; padding: 5px; background: rgba(255, 255, 255, 0.5); color: black; text-shadow: 1px 1px white; text-align: center; } /* risk */ .experiment_risk { overflow: auto; } /*display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1; */ .experiment_risk_title { font-size: 36px; font-weight: bold; color: white; text-shadow: 3px 3px black; margin: 10px 0px 10px 0px; } .experiment_risk_description { padding: 5px; color: black; text-shadow: 1px 1px white; } .experiment_risk_description_warning { font-weight: bolder; } .experiment_risk_list { display: flex; flex-direction: column; flex-wrap: nowrap; } .experiment_risk_line { display: flex; flex-direction: row; flex-wrap: nowrap; margin-top: 6px; } .experiment_risk_header { display: flex; background: rgba(152, 175, 199, 0.5); padding: 3px; font-size: 10px; text-align: center; align-items: center; } .experiment_risk_nonheader { padding: 3px; margin: 0px 2px 0px 2px; } .experiment_risk_line_risk { flex: 0.8; } .experiment_risk_line_prob { flex: 0.5; } .experiment_risk_line_dang { flex: 0.5; } .experiment_risk_line_thre { flex: 0.5; } .experiment_risk_line_prec { flex: 3; } .experiment_risk_line_reac { flex: 3; } .experiment_risk_link_number { display: flex; font-size: 30px; justify-content: center; align-items: center; } .experiment_risk_color_green { background: green; } .experiment_risk_color_blue { background: blue; } .experiment_risk_color_yellow { background: yellow; } .experiment_risk_color_orange { background: orange; } .experiment_risk_color_red { background: red; } .experiment_risk_read { padding: 10px; font-size: 24px; width: 80%; color: white; text-shadow: 3px 3px black; margin: 15px auto; text-align: center; } .experiment_risk_read:hover { cursor: pointer; background: rgba(50, 50, 50, 0.5); color: black; text-shadow: 1px 1px white; } .experiment_risk_read_true { background: rgba(46, 165, 66, 0.5); } .experiment_risk_read_false { background: rgba(199, 95, 73, 0.5); } /* METHOD */ .experiment_method { overflow: auto; } /*display: flex; flex-direction: column; flex-wrap: nowrap; flex: 1; */ .experiment_method_title { font-size: 36px; font-weight: bold; color: white; text-shadow: 3px 3px black; margin: 10px 0px 10px 0px; } .experiment_method_description { padding: 5px; color: black; text-shadow: 1px 1px white; } .experiment_method_list { display: flex; flex-direction: column; flex-wrap: nowrap; } .experiment_method_line { display: flex; flex-direction: row; flex-wrap: nowrap; margin-top: 6px; font-size: 18px; } .experiment_method_line:hover { cursor: pointer; background: rgba(152, 175, 199, 0.5); } .experiment_method_highlighted { background: rgba(46, 165, 66, 0.5); } .experiment_method_number { display: flex; width: 30px; justify-content: center; align-items: center; padding: 5px; } .experiment_method_description { flex: 1; padding: 5px; } /* phet labs */ /* completed */ #phetlabs_completed { align-items: center; justify-content: center; width: 50%; height: auto; text-align: center; background: green; margin: auto auto; padding: 20px;} /* the phetlabs area */ #phetlabs_area { flex: 2.5; display: flex; flex-direction: column; flex-wrap: nowrap; padding: 10px; margin-right: 10px; } #phetlabs_stackselection { height: 40px; background: red; } #phetlabs_phetlab_deck { display: flex; flex: 1; background: blue; align: center; align-items: center; justify-content: center;} /* the questions */ .phetlab_questionbox { display: flex; flex-direction: column; flex-wrap: nowrap; } .phetlab_text { flex: 1; margin: 5px -5px 2px -5px; padding: 3px; background: rgba(255, 255, 255, 0.7); color: black; text-shadow: 1px 1px white; } .phetlab_answer { flex: 1; margin: 0px -5px 0px -5px; padding: 3px; border: 3px solid #98AFC7; } .phetlab_question_hint { display: none; background: rgba(152, 175, 199, 0.5); color: white; text-shadow: 1px 1px black; margin: 5px -5px 2px -5px; padding: 3px; } .phetlab_question_answer { display: none; background: rgba(152, 175, 199, 0.5); color: white; text-shadow: 1px 1px black; margin: 5px -5px 2px -5px; padding: 3px; } .phetlab_question_buttons { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 4px -5px 4px -5px; } .phetlab_question_button { flex: 1; margin: 0 1px 0 1px; padding: 3px; background: rgba(255, 255, 255, 0.7); text-align: center; font-size: 10px; } .phetlab_question_button:hover { background: rgba(50, 50, 50, 0.7); cursor: pointer; } .phetlab_showfeedback { flex: 1.5; } .phetlab_showhint { flex: 0.75; } .phetlab_showanswer { flex: 0.75; } .phetlab_feedback_dropdown { display: none; flex-direction: column; flex-wrap: nowrap; } .phetlab_feedback { display: flex; flex-direction: row; flex-wrap: nowrap; background: rgba(255, 255, 255, 0.5); margin: 2px -5px 0px -5px; } .phetlab_feedback_text { flex: 1; padding: 3px; } .phetlab_feedback_vote { display: flex; flex-direction: column; flex-wrap: nowrap; width: 20px; } .phetlab_feedback_upvote { flex: 1; background: green; } .phetlab_feedback_upvote:hover { cursor: pointer; } .phetlab_feedback_downvote { flex: 1; background: red; } .phetlab_feedback_downvote:hover { cursor: pointer; } .phetlab_givefeedback { flex: 1; margin: 0px -5px 0px -5px; padding: 3px; border: 3px solid #98AFC7; } .phetlab_feedback_useful { color: red; font-weight: bold; } .phetlab_feedback_inline { font-weight: bold; } /* videonote */ #videonotes_quicklinks { } /* the player */ #videonotes_video { position: relative; flex: 2; padding: 10px; margin: 0 20px 15px 0; } #videonotes_video_player { border: 10px solid black; } #videonotes_video_player_overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 10px; z-index: 100; } /* the notes */ #videonotes_video_player_newnote { display: flex; z-index: 101; position: absolute; top: 20px; left: 20px; width: 400px; background: white; } #videonotes_video_player_newnote_value_container { display: flex; flex-direction: column; position: relative; width: 100%; background: yellow; padding: 0px; } #videonotes_video_player_newnote_value { position: relative; flex: 1; } #videonotes_video_player_newnote_buttons { position: relative; display: flex; flex-direction: column; flex-wrap: none; } #videonotes_video_player_newnote_delete { flex: 0.3; background: red; } #videonotes_video_player_newnote_submit { flex: 0.3; background: green; } .videonotes_video_player_newnote_button { text-align: center; padding: 10px; } .videonotes_video_player_newnote_button:hover { cursor: pointer; } #videonotes_controls { display: flex; flex-direction: column; flex-wrap: none; width: 50px; margin: 0px 20px 0px -30px; padding: 10px; } .videonotes_videocontrol { flex: 1; cursor: pointer; } .videonotes_videocontrol:hover { -webkit-filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); } /* the buttons */ .videonotes_start_sprite { background-image: url('/css/images/icons/003-play.png'); background-position: center; background-repeat: no-repeat; } .videonotes_stop_sprite { background-image: url('/css/images/icons/004-stop.png'); background-position: center; background-repeat: no-repeat; } .videonotes_rw_sprite { background-image: url('/css/images/icons/002-back.png'); background-position: center; background-repeat: no-repeat; } .videonotes_ff_sprite { background-image: url('/css/images/icons/001-next.png'); background-position: center; background-repeat: no-repeat; } .videonotes_pause_sprite { background-image: url('/css/images/icons/005-pause.png'); background-position: center; background-repeat: no-repeat; } .videonotes_deletion_progress { opacity: 0.5; } /* the notes */ .videonotes_note { position: relative; display: block; width: 100%; margin: 5px 5px 0px 0px; font-size: 12px; } /* the headline */ .videonotes_note_headline { display: flex; flex-direction: row; flex-wrap: nowrap; } .videonotes_note_time { width: 30px; background: #bdbdbd; padding: 3px; text-align: center; } .videonotes_note_note { flex: 1; padding: 3px; background: #dfdfdf; text-align: justify; } .videonotes_note_comments { width: 22px; background: #bdbdbd; padding: 3px; text-align: center; } .videonotes_note_delete { width: 22px; background: red; text-align: center; } /* the feedback */ .videonotes_note_feedback { display: none; flex-direction: row; flex-wrap: nowrap; flex: 1; } .videonotes_note_feedback_note { background: orange; padding: 3px; flex: 1; margin: 1px 0 1px 0; } .videonotes_note_feedback_intro { font-weight: bold; } .videonotes_note_feedback_intro_self { color: red; } .videonotes_note_feedback_useful { display: flex; flex-direction: column; flex-wrap: nowrap; width: 22px; } .videonotes_note_feedback_useful_button { text-align: center; padding: 3px; flex: 1; } .videonotes_note_feedback_useful_button:hover { cursor: pointer; } .videonotes_note_feedback_useful_yes { background: green; } .videonotes_note_feedback_useful_no { background: red; } .videonotes_note_headline:hover { cursor: pointer; } /* and finally the new input div */ .videonotes_note_add_feedback { display: none; flex-direction: column; flex-wrap: wrap; flex: 1; background: white; } .videonotes_note_input_feedback { flex: 1; padding: 3px; } /*WORKING */ /* completed */ #working_completed { align-items: center; justify-content: center; width: 50%; height: auto; text-align: center; background: green; margin: auto auto; padding: 20px;} /* MOVE FROM BELOW INTO HERE WHEN DONE */ /* the workings area */ #working_stackselection { height: 40px; background: red; } #working_working_deck { display: flex; flex: 1; background: blue; align: center; align-items: center; justify-content: center;} /* the questions */ .working_questionbox { display: flex; flex-direction: column; flex-wrap: nowrap; } .working_text { flex: 1; margin: 5px -5px 2px -5px; padding: 3px; background: rgba(255, 255, 255, 0.7); color: black; text-shadow: 1px 1px white; } .working_answer { flex: 1; margin: 0px -5px 0px -5px; padding: 3px; border: 3px solid #98AFC7; } .working_question_hint { display: none; background: rgba(152, 175, 199, 0.5); color: white; text-shadow: 1px 1px black; margin: 5px -5px 2px -5px; padding: 3px; } .working_question_answer { display: none; background: rgba(152, 175, 199, 0.5); color: white; text-shadow: 1px 1px black; margin: 5px -5px 2px -5px; padding: 3px; } .working_question_buttons { display: flex; flex-direction: row; flex-wrap: nowrap; margin: 4px -5px 4px -5px; } .working_question_button { flex: 1; margin: 0 1px 0 1px; padding: 3px; background: rgba(255, 255, 255, 0.7); text-align: center; font-size: 10px; } .working_question_button:hover { background: rgba(50, 50, 50, 0.7); cursor: pointer; } .working_showfeedback { flex: 1.5; } .working_showhint { flex: 0.75; } .working_showanswer { flex: 0.75; } .working_feedback_dropdown { display: none; flex-direction: column; flex-wrap: nowrap; } .working_feedback { display: flex; flex-direction: row; flex-wrap: nowrap; background: rgba(255, 255, 255, 0.5); margin: 2px -5px 0px -5px; } .working_feedback_text { flex: 1; padding: 3px; } .working_feedback_vote { display: flex; flex-direction: column; flex-wrap: nowrap; width: 20px; } .working_feedback_upvote { flex: 1; background: green; } .working_feedback_upvote:hover { cursor: pointer; } .working_feedback_downvote { flex: 1; background: red; } .working_feedback_downvote:hover { cursor: pointer; } .working_givefeedback { flex: 1; margin: 0px -5px 0px -5px; padding: 3px; border: 3px solid #98AFC7; } .working_feedback_useful { color: red; font-weight: bold; } .working_feedback_inline { font-weight: bold; } #working_area { display: flex; flex: 2.5; flex-direction: row; flex-wrap: nowrap; padding: 10px; margin-right: 10px; } #working_move_left { display: flex; justify-content: center; align-items: center; } #working_info { display: flex; flex: 1; background: rgba(152, 175, 199, 0.5); padding: 10px; } #working_move_right { display: flex; justify-content: center; align-items: center; } .working_move_button { width: 50px; background: #98AFC7; } .working_move_button:hover { cursor: pointer; -webkit-filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5)); filter: drop-shadow(4px 4px 2px rgba(255, 255, 255, 0.5));} /* the flex box containers */ .working_work_flexibox { flex: 1; } .working_flex_contain { flex: 1; } .working_flex_row { flex: 1; display: flex; flex-direction: row; flex-wrap: nowrap; } .working_flex_column { flex: 1; display: flex; flex-direction: column; row-gap: 10px; flex-wrap: nowrap; } .working_flex_box { display: flex; flex-direction: column; flex: 1; padding: 5px; font-size: 1vw; justify-content: center; align-items: center; }