PSY 200/SOC 200: Social Psychology//Social Psychology
castroana
custom.css/*========= HTML Templates v4 Stylesheet 1/6/2021==========*/ body { font-family: "Arial", Helvetica, sans-serif; font-size: 18px; } .flip-card1 { margin: 2px; display: grid; perspective: 1000px; } .flip-card-inner1 { display: flex; transform-style: preserve-3d; transition: all 0.7s ease; text-align: center; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .flip-card1:hover .flip-card-inner1 { transform: rotateY(180deg); } .flip-card-front1 { background-color: #00467f; color: #fff; border-radius: .5rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; min-width:100%; } .flip-card-back1 { background-color: #00467f; color: white; transform: rotateY(180deg) translate(100%, 0); border-radius: .5rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; min-width:100%; } *[contenteditable="true"] .clicknreveal .collapse:not(.show) { display: block; } *[contenteditable="true"] .clicknreveal { text-align: left; color: #494c4e; font-weight: bold; font-size: 1.25rem; padding: 1.25rem; border: 1px solid #CDD5DC; border-radius: 0; background-color: #FFFFFF; display: block; } /*========= Media Query for Print ==========*/ @media print { .clicknreveal .collapse:not(.show) { display: block; } .fade:not(.show) { opacity: 1; } } /*--------------------------------copy from v3 style sheet--------------------------------*/ /** Link Styling **/ a { color: #00467F; text-decoration: none; } a:hover, a:focus, a:active { color: #00467F; text-decoration: none; } /** Tooltip / Popover Styling **/ .tooltip.in { opacity: 1; } .tooltip.top .tooltip-inner, .tooltip.right .tooltip-inner, .tooltip.bottom .tooltip-inner, .tooltip.left .tooltip-inner { background-color: #695e4a; color: #FFFFFF; font-size: 1rem; padding: 9px 14px; } .tooltip.top .tooltip-arrow, .tooltip.right .tooltip-arrow, .tooltip.bottom .tooltip-arrow, .tooltip.left .tooltip-arrow { border-top-color: #695e4a; } .tooltip.top .tooltip-arrow { border-top-color: #695e4a; } .tooltip.right .tooltip-arrow { border-right-color: #695e4a; border-top-color: transparent; } .tooltip.bottom .tooltip-arrow { border-bottom-color: #695e4a; } .tooltip.left .tooltip-arrow { border-left-color: #695e4a; border-top-color: transparent; } /* Button Primary */ button.btn-primary { background-color: #00467F; border-color: #00467F; color: #FFFFFF; } button.btn-primary:hover, button.btn-primary:focus { background-color: #00467F; border-color: #00467F; color: #FFFFFF; } button.btn-primary:active, button.btn-primary:active:hover, button.btn-primary:active:focus { background-color: #00467F; border-color: #00a160; color: #FFFFFF; } button.btn-primary:disabled, button.btn-primary[aria-expanded="true"] { background-color: rgba(0, 70, 127, 0.75); border-color: rgba(0, 70, 127, 0.75); color: #FFFFFF; } button.btn-primary:disabled:hover, button.btn-primary[aria-expanded="true"]:hover { background-color: rgba(0, 70, 127, 0.75); border-color: rgba(0, 70, 127, 0.75); color: #FFFFFF; } /** Lists **/ ol, ul { padding-left: 16px; } ol li, ul li { padding-bottom: 10px; line-height: 1.5rem; } /* Box Number List */ ol.box-number { counter-reset: li; padding-left: 48px; } ol.box-number li { list-style: none; padding-bottom: 12px; position: relative; } ol.box-number li:before { background-color: #00467F; border-radius: 4px; box-sizing: border-box; color: #FFFFFF; content: counter(li); counter-increment: li; font-size: 1em; font-weight: bold; left: -48px; margin: 4px 8px 0 0; padding: 4px; position: absolute; text-align: center; top: -8px; width: 32px; } ol.box-number ol { counter-reset: item; padding-top: 16px; } ol.box-number ol li:before { content: counter(item); counter-increment: item; } ol.box-number ol { counter-reset: list; } ol.box-number ol li:before { content: counter(list, lower-alpha); counter-increment: list; } /* Icon List */ ul.list-icon { list-style-type: none; } ul.list-icon li { margin: 0 0 16px 40px; position: relative; } ul.list-icon span:before { font-size: 2em; margin-left: -40px; position: absolute; top: -5px; } ul.list-icon.list-check span:before { color: #006FBF; } ul.list-icon.list-cross span:before { color: #E87511; } /* Step List */ ol.list-step { counter-reset: elementcounter; list-style-type: none; padding: 0 0 0 16px; } ol.list-step li:before { content: "Step " counter(elementcounter); counter-increment: elementcounter; display: inline-block; font-weight: bold; padding: 5px; } ol.list-step p { padding-left: 16px; } /* Graphic Columns */ .graphic-col { margin-bottom: 30px; } .graphic-col .col-sm-2, .graphic-col .col-sm-3, .graphic-col .col-sm-4, .graphic-col .col-sm-15, .graphic-col .col-sm-6 { margin-bottom: 60px; padding: 0; } .graphic-col .col-sm-2:first-child, .graphic-col .col-sm-3:first-child, .graphic-col .col-sm-4:first-child, .graphic-col .col-sm-15:first-child, .graphic-col .col-sm-6:first-child { border-left: none; } .graphic-col p { margin: 20px 0; } .graphic-col h3 { margin-top: 0; } .graphic-col .eq-items .row { margin: 0; height: 100%; } /** Timeline **/ .timeline { list-style: none; padding-left: 0; position: relative; } .timeline:before { background-color: #E6EAF0; bottom: 0; content: " "; left: 40px; margin-left: -1px; position: absolute; top: 0; width: 2px; } .timeline > li { margin-bottom: 30px; position: relative; padding: 0; } .timeline > li:before, .timeline > li:after { border-left-width: 0; content: " "; display: table; right: auto; } .timeline > li:before { border-right-width: 15px; left: -15px; } .timeline > li:after { border-right-width: 14px; clear: both; left: -14px; } .timeline > li:last-child { padding-bottom: 0; } .timeline .timeline-badge { background-color: #00467F; border-radius: 15px; height: 15px; left: 33px; line-height: 50px; margin-left: 0; position: absolute; top: 34px; text-align: center; width: 15px; z-index: 100; } .timeline .timeline-panel { background-color: #F9FAFB; border: 1px solid #F2F3F5; float: right; padding: 20px; position: relative; width: calc(100% - 90px); } .timeline .timeline-panel:before, .timeline .timeline-panel:after { content: " "; display: inline-block; position: absolute; } .timeline .timeline-panel:before { border-top: 15px solid transparent; border-right: 15px solid #F9FAFB; border-bottom: 15px solid transparent; border-left: 0 solid #F9FAFB; left: -15px; right: auto; top: 26px; } .timeline .timeline-panel:after { border-top: 14px solid transparent; border-left: 0 solid #F2F3F5; border-right: 14px solid #F2F3F5; border-bottom: 14px solid transparent; left: -14px; right: auto; top: 27px; } @media screen and (min-width: 768px) { .timeline-alt:before { left: 50%; } .timeline-alt .timeline-badge { left: 50%; margin-left: -8px; top: 35px; } .timeline-alt .timeline-panel { float: left; width: 46%; } .timeline-alt .timeline-panel:before, .timeline-alt .timeline-panel:after { border-right-width: 0; left: auto; } .timeline-alt .timeline-panel:before { border-left-width: 15px; right: -15px; } .timeline-alt .timeline-panel:after { border-left-width: 14px; right: -14px; } .timeline-alt li:nth-child(even) .timeline-panel { float: right; } .timeline-alt li:nth-child(even) .timeline-panel:before, .timeline-alt li:nth-child(even) .timeline-panel:after { border-left-width: 0; right: auto; } .timeline-alt li:nth-child(even) .timeline-panel:before { border-right-width: 15px; left: -15px; } .timeline-alt li:nth-child(even) .timeline-panel:after { border-right-width: 14px; left: -14px; } } .table > thead > tr > th { background-color: #00467F; color: #FFFFFF; font-weight: 400; height: 60px; line-height: 2em; padding: 25px 20px 30px 30px; } /* Font */ /* Animation */ /* https://github.com/daneden/animate.css */ /*=========Global Elements==========*/ html, body { font-family: 'Arial', sans-serif; color: #695e4a; font-size: 20px; } .icon { fill: #00467f; stroke: #00467f; } /*====== Typography =========*/ h1 { color: #00467f; margin-top: 30px; margin-bottom: 30px; font-weight: 400; } h2 { color: #00a160; margin-top: 30px; margin-bottom: 30px; font-weight: 400; } h3 { color: #000000; margin-top: 15px; margin-bottom: 15px; font-weight: 700; } h4 { color: #000000; text-transform: uppercase; font-weight: 700; } h5 { color: #000000; font-weight: 700; } h6 { color: #000000; font-weight: 700; } a { color: #00467f; } a:hover, a:focus, a:active { color: #00467f; text-decoration: underline; } blockquote { color: #00467f; } blockquote p:last-child { margin-bottom: 8px; } blockquote cite { color: #565A5C; } .well { margin: 15px 0; background-color: transparent; border: 3px solid #00467f; } .well .well-icon { margin-right: 20px; } .well .well-icon img { width: 100px; } .well-solid { background-color: #00467f; color: #FFFFFF; } .bg-dark { background-color: #00467f; color: #FFFFFF; } .video-wrapper { margin: 15px auto; background-color: #00467f; padding: 30px; color: #FFFFFF; } /*========= Headings ==========*/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { text-align: left; } /*========= Callouts ==========*/ .card-standard { border: 3px solid #00467f; } .card-graphic { border: 3px solid #00467f; } ol.box-number li:before { background-color: #00467f; } ul.list-icon .fa-check { color: #00467f; } ul.list-icon .fa-times { color: #ce7019; } ol.large-number li:before { color: #00467f; } /* Colors for list markers */ /* Colors for background of element --used for box-number, box-list*/ ol.bg-colour-one li:before, ul.bg-colour-one li:before { background-color: #00467f; } ol.bg-colour-one span:before, ul.bg-colour-one span:before { background-color: #00467f; } /* Colors for text of element --used for dics ul, fa icons */ ol.text-colour-one li:before, ul.text-colour-one li:before { color: #00467f; } ol.text-colour-one span:before, ul.text-colour-one span:before { color: #00467f; } /*========= Jumbotrons ==========*/ .jumbotron { background-color: #00467f; } blockquote { text-align: center; } /** Timeline **/ .timeline { list-style: none; padding-left: 0; position: relative; } .timeline:before { background-color: #E6EAF0; bottom: 0; content: " "; left: 40px; margin-left: -1px; position: absolute; top: 0; width: 2px; } .timeline > li { margin-bottom: 30px; position: relative; padding: 0; } .timeline > li:before, .timeline > li:after { border-left-width: 0; content: " "; display: table; right: auto; } .timeline > li:before { border-right-width: 15px; left: -15px; } .timeline > li:after { border-right-width: 14px; clear: both; left: -14px; } .timeline > li:last-child { padding-bottom: 0; } .timeline .timeline-badge { background-color: #00467F; border-radius: 15px; height: 15px; left: 33px; line-height: 50px; margin-left: 0; position: absolute; top: 34px; text-align: center; width: 15px; z-index: 100; } .timeline .timeline-panel { background-color: #F9FAFB; border: 1px solid #F2F3F5; float: right; padding: 20px; position: relative; width: calc(100% - 90px); } .timeline .timeline-panel:before, .timeline .timeline-panel:after { content: " "; display: inline-block; position: absolute; } .timeline .timeline-panel:before { border-top: 15px solid transparent; border-right: 15px solid #F9FAFB; border-bottom: 15px solid transparent; border-left: 0 solid #F9FAFB; left: -15px; right: auto; top: 26px; } .timeline .timeline-panel:after { border-top: 14px solid transparent; border-left: 0 solid #F2F3F5; border-right: 14px solid #F2F3F5; border-bottom: 14px solid transparent; left: -14px; right: auto; top: 27px; } @media screen and (min-width: 768px) { .timeline-alt:before { left: 50%; } .timeline-alt .timeline-badge { left: 50%; margin-left: -8px; top: 35px; } .timeline-alt .timeline-panel { float: left; width: 46%; } .timeline-alt .timeline-panel:before, .timeline-alt .timeline-panel:after { border-right-width: 0; left: auto; } .timeline-alt .timeline-panel:before { border-left-width: 15px; right: -15px; } .timeline-alt .timeline-panel:after { border-left-width: 14px; right: -14px; } .timeline-alt li:nth-child(even) .timeline-panel { float: right; } .timeline-alt li:nth-child(even) .timeline-panel:before, .timeline-alt li:nth-child(even) .timeline-panel:after { border-left-width: 0; right: auto; } .timeline-alt li:nth-child(even) .timeline-panel:before { border-right-width: 15px; left: -15px; } .timeline-alt li:nth-child(even) .timeline-panel:after { border-right-width: 14px; left: -14px; } } .timeline .timeline-heading h2:first-child, .timeline .timeline-heading h3:first-child, .timeline .timeline-heading h4:first-child, .timeline .timeline-heading h5:first-child, .timeline .timeline-heading h6:first-child { margin-top: 0; padding-top: 0; } .timeline .timeline-body p:last-child, .timeline .timeline-body ol:last-child, .timeline .timeline-body ul:last-child, .timeline .timeline-body ol:last-child li:last-child, .timeline .timeline-body ul:last-child li:last-child, .table > tbody > tr > td p:last-child { margin-bottom: 0; padding-bottom: 0; } .timeline { margin-left: 0; } .timeline .timeline-badge { background-color: #ce7019; } .timeline .timeline-panel { background-color: #F9FAFB; border: 1px solid #F2F3F5; } .timeline .timeline-heading > h2, .timeline .timeline-heading > h3 { color: #00467F; } /* Horizontal Timeline*/ .hori-timeline .events { border-top: 3px solid #e9ecef; } .hori-timeline .events .event-list { display: block; position: relative; text-align: center; padding-top: 70px; margin-right: 0; } .hori-timeline .events .event-list:before { content: ""; position: absolute; height: 36px; border-right: 2px dashed #dee2e6; top: 0; } .hori-timeline .events .event-list .event-date { position: absolute; top: 38px; left: 0; right: 0; width: 75px; margin: 0 auto; border-radius: 4px; padding: 2px 4px; } @media (min-width: 1140px) { .hori-timeline .events .event-list { display: inline-block; width: 24%; padding-top: 45px; } .hori-timeline .events .event-list .event-date { top: -12px; } } /*Tabs*/ .list-group-item.active { background-color: #00467f; border-color: #00467f; } /*--------------------------------Pricing Cards--------------------------------*/ .pricing .card { border: none; border-radius: 1rem; transition: all 0.2s; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); } .pricing hr { margin: 1.5rem 0; } .pricing .card-title { margin: 0.5rem 0; font-size: 0.9rem; letter-spacing: .1rem; font-weight: bold; } .pricing .card-price { font-size: 3rem; margin: 0; } .pricing .card-price .period { font-size: 0.8rem; } .pricing ul li { margin-bottom: 1rem; } .pricing .text-muted { opacity: 0.7; } .pricing .btn { font-size: 80%; border-radius: 5rem; letter-spacing: .1rem; font-weight: bold; padding: 1rem; opacity: 0.7; transition: all 0.2s; } /* Hover Effects on Card */ @media (min-width: 992px) { .pricing .card:hover { margin-top: -.25rem; margin-bottom: .25rem; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3); } .pricing .card:hover .btn { opacity: 1; } } *[contenteditable="true"] .clicknreveal .collapse:not(.show) { display: block; } *[contenteditable="true"] .clicknreveal h1 { text-align: left; color: #494c4e; font-weight: bold; font-size: 1.25rem; padding: 1.25rem; border: 1px solid #CDD5DC; border-radius: 0; background-color: #FFFFFF; } *[contenteditable="true"] .fade:not(.show) { opacity: 1; } /*========= Media Query for Print ==========*/ @media print { .clicknreveal .collapse:not(.show) { display: block; }} /**Video Wrapper Font color and size**/ .video-wrapper .video-text { color: #fff; margin-left: 10px; } .video-text a { color: #fff; } /* Timer Gradients */ .bg-gradient-1 { background: #ce7019; background: -webkit-linear-gradient(to right, #ce7019, #ff4b2b); background: linear-gradient(to right, #ce7019, #ff4b2b); } .bg-gradient-2 { background: #00467f; background: -webkit-linear-gradient(to right, #00467f, #00a160); background: linear-gradient(to right, #00467f, #00a160); } .bg-gradient-3 { background: #ff4b2b; background: -webkit-linear-gradient(to right,#ff4b2b, #ce7019, ); background: linear-gradient(to right, #ff4b2b, #ce7019 ); } .bg-gradient-4 { background: #00a160; background: -webkit-linear-gradient(to right, #00a160, #00467f); background: linear-gradient(to right, #00a160, #00467f); } .rounded { border-radius: 1rem !important; }
