OLD_stylesheet.css

/*----------------------------------------------------------------

// Table of contents //

        Body
    0.  HEADER & NAVIGATION STYLES
    1.  FOOTER
    2.  BUTTON STYLES
    3.  COMPONENT STYLES
    4.  PERSONA DOC STYLES

------------------------------------------------------------------*/

.mainTitle{
	padding-top: 10%;
}

.main-title{
	font-family: 'Sans-Serif', serif !important;
}

.centered{
	text-align: center;
}
.left{
	float: left;
}
.right{
	float:right;
}

/*---------------------------------------
  FONT STYLING              
-----------------------------------------*/

#capitalize{
	text-transform: capitalize;
}

/*---------------------------------------
  HEADER & NAVIGATION STYLES              
-----------------------------------------*/

.header h1{
	text-align: center;
}

.header ul{
	width: 100%;
	margin: 0px;
	position: relative;
	/* padding-top: .5em; */
	/* padding-bottom: .5em; */
	background-color: #1e57c8;
	list-style-type: none;
	text-align: left;
}
.header li:hover{
	background-color: #ed7d31;
	cursor: pointer;

}

ul.nav li.dropdown:hover > div.dropdown-menu {
    display: block;
		background-color: #fff;
		/* color: #1e57c8; */
		margin: 0px;
}

.nav-pills .nav-link.active, .nav-item.active, .nav-pills .show>.nav-link {
	background-color: #ed7d31;
	margin: 0px;

}


.header li {
	padding: 0.5em;
	margin: 0px;
	display: inline;
}


.header li a{
	display: inline;
	color: white;
	text-decoration: none;
	/* text-transform: uppercase; */
}

.header li a.dropdown-item{
	display: block;
	color: #1e57c8;
	text-decoration: none;
}

.header li a.dropdown-item:hover{
	display: block;
	color: white;
	background-color: #ed7d31;
	text-decoration: none;
}


.header ul li #triangle{
	height: 0;
	position: absolute;
	top: 0;
	right: 0;
	border-top: 37px solid transparent;
	border-right: 74px solid white;
	border-bottom: 37px solid transparent;
}

/*---------------------------------------
  FOOTER              
-----------------------------------------*/

.footer{
	background-color: #1e57c8;
	border: none;
	margin-top: 1em;
	margin-left: 0px;
	margin-right: 0px;
	position: relative;
	bottom: 0;
}

.footer-text{
	color: white;
}
.footer-text a{
	color: white;
}

.footer-content{
	padding: 2em;
}

.footer-text a:hover{
	text-decoration: underline;
}

#badge-footer {
	background-color: #fff;
}

#badge-footer .footer-content {
	padding: 0;
}

/*---------------------------------------
  BUTTON STYLES              
-----------------------------------------*/

.btn-primary {
	background-color: #1e57c8;
	border-color: #1e57c8;
	border-radius: 5px;
}

.btn-primary:hover {
	background-color: #ed7d31;
	border-color: #ed7d31;
	border-radius: 5px;
}

/*---------------------------------------
  COMPONENT STYLES              
-----------------------------------------*/

a{
	color: #1e57c8;
}

label{
	font-size: small;
	color: grey;
}

/*---------------------------------------
  PERSONA DOC STYLES             
-----------------------------------------*/

.persona-border{
	/* border-top: 3px; */
	/* width: 96%; */
	/* background-color: #4E81E4 !important; */
	/* border: #000 !important;
	border-color: #000 !important; */
	/* color: #4E81E4 !important; */
	padding: 3em;
}


.persona-input{
	/*color: #1E57C8;*/
	color: rgb(146, 146, 146);
	font-size: 15px;
}

.knowledge_block, .motivation_block, .attitude_block {
	border:2px solid red;
	border-radius:25px;
	/* display: inline-block;
    *display: inline; */

	padding:1em;
}

.card {
	margin-bottom:1rem;
}
.ses-persona_pic{
 border-top: 3px; 
 display: inline-block;
 
}

/*.border {
  border:3px solid red;
   padding: 1em;
}*/

.persona-generator{
	/* border-top: 3px; */
	/* width: 96%; */
	/* background-color: #4E81E4 !important; */
	/* border: #000 !important;
	border-color: #000 !important; */
	/* color: #4E81E4 !important; */
	padding: 2em;
}

.persona-input-border{
	border: 3px solid;
   padding: 1em;
   border-radius: 15px;
}

.red-box{
	border-color: #F06363;
}

.blue-box{
	border-color: #1e57c8;
}

.permanent-text{
	font-weight: bold;

}

/* Customizable fields */
#yearoutput, #empoutput, #placeoutput, #backparaoneop, #para1output {
	color: #1E57C8;
}

#backparaoneop {
	margin-top: 5px;
	margin-bottom: 15px; 
	display: inline; 
}