@media screen and (min-width: 0px) {
	html,
	body {
	  margin: 0;
	  display: table;
	  font-family: 'Slabo 27px', serif;
	  height:100%;
	  width: 100%;
	}
	.wrapper {
		height: auto;
		margin: 0px auto;
	}
	footer {
		background-color: #262626;
		display: table-row;
		height: 1px;
	}
	#nav {
	    margin: 0px;
		display: inline-block;
	    width: 100%;
	    height: 90px;
	    background-color: #262626;
	    border: none;
	}
	#navbarIcon {
		margin-top: 5px;
		margin-left: -11px;
		outline: none;
	}
	#nav .navbar-header {
		display: block;
		background-color: #262626;
	    margin-top: -2px;
	}
	#nav .navbar-inner {
		display: inline-block;
		margin-top: -45px;
		margin-left: 80px;
	}
	#nav .navbar-inner li.dropdown {
		display: inline-block;
	}
	#nav .navbar-header li.dropdown {
		margin-top: -0.8px;
	}
	#nav .navbar-inner a.homeLink, a.codeLink, a.projectsLink, a.aboutMeLink {
		font-weight: bold;
		font-size: 18px;
	}
	a, a:active, a:focus {
		outline: none;
	}
	#nav .navbar-inner a.homeLink {
		color: white;
	}
	#nav .navbar-inner a.codeLink {
		color: white;
	}
	#nav .navbar-inner a.projectsLink {
		color: white;
	}
	#nav .navbar-inner a.aboutMeLink {
		color: white;
	}
	#nav .navbar-inner li.dropdown:hover {
		border-bottom: 4.0px solid #ff751a;
		height: 37px;
	}
	.dropdown-menu {
		height: 112.5px;
		background-color: #333333;
		font: italic bold 14px/30px Georgia, serif;
	}
	ul.nav li.dropdown:hover > ul.dropdown-menu {
	    display: block;
	    margin-top: 5px;
	    margin-left: -4px;
	}
	ul.nav li.dropdown ul.dropdown-menu a {
	    font: italic bold 14px/30px Georgia, serif;
	    color: white;
	}
	ul.nav li.dropdown ul.dropdown-menu a:hover {
	    background-color: #737373;
	    color: #ff9900;
	}
	ul.nav li.dropdown ul.dropdown-menu li.dropdownMenueHeader {
	    height: 23px;
	}
	ul.nav li.dropdown ul.dropdown-menu li.lineDividerTop {
	    margin-bottom: 9px;
	}
	ul.nav li.dropdown ul.dropdown-menu li.dropDownCell {
	    height: 18.5px;
	    margin-bottom: 5px
	}
	ul.nav li.dropdown ul.dropdown-menu li.dropDownCell a {
	    margin-top: -9.5px;
	}
	ul.nav li.dropdown ul.dropdown-menu li.lineDivider {
	    margin-top: 17px;
	}
	.dropdownMenueHeader {
		height: 30px;
	    margin-left: 35px;
		color: #79a6d2;
	}
	#jumbotronContainer {
		margin: 30px auto;
	}
	#leftControl {
		margin-top: 20px;
		height: 45px;
	}
	#rightControl {
		margin-top: 20px;
		height: 45px;
	}
	.row {
		display: table;
		margin: 0 auto;
	}
	.col-md-1 {
		height: 200px;
		width: 200px;
		background-color: #2d5986;
		border-radius: 100px;
		display: table;
		font-size: 30px;
		font-weight: bold;
		border: 2px solid #d9d9d9;
		font-family: "Brush Script MT", cursive;
		margin-top: 70px;
		margin-bottom: 30px;
	}
	.col-md-1 a {
		color: #ff751a;
		text-align: center;
		vertical-align: middle;
  		display: table-cell;
  		text-decoration: none;
	}
	.col-md-1 p {
		text-align: center;
	  	vertical-align: middle;
	  	display: table-cell;
	}
	.col-md-2 {
		width: 250px;
		height: 160px;
		background-color: #e0ebeb;
		border-radius: 9px;
		display: table;
		font-size: 33px;
		font-weight: normal;
		border: 1px solid #737373;
		font-family: "Brush Script MT", cursive;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.col-md-2 p {
		color: #ff751a;
		text-align: center;
  		border-bottom: 1.5px solid #737373;
  		margin-top: 20px;
	}
	.col-md-2 h6 {
		margin-top: 30px;
		text-align: left;
		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}
	#navFooter {
		display: table-footer-group;
	    width: 100%;
	}
	#copyRightLogoTab {
		left: 0px;
		display: table;
	}
	#mediaLinksTab {
		margin: -65px auto;
		position: absolute;
		right: 20px;
	}
	#tradeIcon {
		margin: 9px 15px auto;
	}
	#mediaLinksTab a {
		margin-left: 3px;
	}
	ul.fa-ul li i {
		font-size: 9.5px;
		color: #1a8cff;
	}
	#myImage {
		margin: 0px auto;
		display: table;
		border: 2px solid #ffad33;
	}
	#myImageText {
		text-align: center;
	}
	#myEmailLink {
		text-decoration: none;
		color: #1a8cff;
	}
	.notesArea {
		display: table;
		margin: 30px auto;
	}
	#datastructuresJumbotron {
		width: 95%;
		margin: 30px auto;
		display: table;
	}
	#miscellaneousJumbotron {
                width: 105%;
		margin: 30px auto;
		margin-left: -8px;
		display: table;
	}
	#javaProjectsJumbotron {
		width: 95%;
		margin: 30px auto;
		display: table;
	}
	#androidProjectsJumbotron {
		width: 95%;
		margin: 30px auto;
		display: table;
	}
	#androidIcon {
		margin-top: 22px;
		position: absolute;
	}
        .affix {
		margin-top: -12px;
		position: absolute;
	}
	#username.ng-valid {
    		color: #008000;
	}
	#username.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#username.ng-invalid-maxlength {
    		border-color: #e62e00;
	}
	#username.ng-invalid-minlength {
    		border-color: #e62e00;
	}
	#email.ng-valid {
    		color: #008000;
	}
	#email.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#email.ng-invalid-maxlength {
    		border-color: #e62e00;
	}
	#email.ng-invalid-minlength {
    		border-color: #e62e00;
	}
	#employeeId.ng-valid {
    		color: #008000;
	}
	#employeeId.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#employeeId.ng-invalid-maxlength {
    		border-color: #e62e00;
	}
	#employeeId.ng-invalid-minlength {
    		border-color: #e62e00;
	}
	#password.ng-valid {
		color: #008000;
	}
	#password.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#password.ng-invalid-maxlength {
    		border-color: #e62e00;
	}
	#password.ng-invalid-minlength {
    		border-color: #e62e00;
	}
	.error {
		color: #ff5050;
	}
        #logInHeader {
		text-align: center;
		font-family: "Lucida Fax", serif;
		color: #3366cc;
	}
	#nameLabel {
		margin-top: 7px;
	    	float: left;
	    	color: #3366cc;
	    	font-family: "Lucida Fax", serif;
	}
	#passwordLabel {
		margin-top: 7px;
	    	float: left;
	   	color: #3366cc;
	    	font-family: "Lucida Fax", serif;
	}
	.form-group.required {
		margin-top: 0px;
	}
	.form-group.required .control-label:after {
		content: "*";
		color: red;
	}
	#modalInput {
		width: 200px;
		margin-left: 130px;
	}
	.form-inline.required .control-label:before {
		content: "*";
		color: red;
	}
	#addEmpBtn {
		padding: 0.5px 3px;
    		font-size: 14px;
    		line-height: 2;
	}
	#viewEmpBtn {
		padding: 0.5px 3px;
    		font-size: 14px;
    		line-height: 2;
	}
	#viewPswds {
		padding: 0.5px 3px;
    		font-size: 14px;
    		line-height: 2;
	}
	#logInModalBtn {
		padding: 0.5px 12px;
    		font-size: 14px;
    		line-height: 2;
    		margin-top: 5px;
	}
	#closeModalBtn {
		padding: 0.5px 12px;
    		font-size: 14px;
    		line-height: 2;
    		margin-top: 5px;
	}
	#usernameInput.ng-valid {
    		color: #008000;
	}
	#usernameInput.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#passwordInput.ng-valid {
    		color: #008000;
	}
	#passwordInput.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#logInValidationMessage {
		font-size: 14px;
		color: #ff0000;
	}
	#modalAffixDiv {
		margin-top: 11px;
	}
        .btn:focus, .btn:active {
   		outline: none !important;
	}
        .spinner {
    	        position: fixed;
    		top: 50%;
    		left: 50%;
        }
}

@media screen and (min-width: 469px) {
	html,
	body {
		margin: 0;
		display: table;
		font-family: 'Slabo 27px', serif;
		height:100%;
		width: 100%;
	}
        #miscellaneousJumbotron {
                width: 105%;
		margin: 30px auto;
		margin-left: -8px;
		display: table;
	}
	#addEmpBtn {
		padding: 3px 9px;
    		font-size: 16px;
    		line-height: 2;
	}
	#viewEmpBtn {
		padding: 3px 9px;
    		font-size: 16px;
    		line-height: 2;
	}
	#viewPswds {
		padding: 3px 9px;
    		font-size: 16px;
    		line-height: 2;
	}
        .btn:focus, .btn:active {
   		outline: none !important;
	}
        .spinner {
    		position: fixed;
    		top: 50%;
    		left: 50%;
        }
}
@media screen and (min-width: 768px) {
	html,
	body {
		margin: 0;
		display: table;
		font-family: 'Slabo 27px', serif;
		height:100%;
		width: 100%;
	}
	body.modal-open {
		padding-right: 0px !important;
		overflow: inherit;
	}
	body.modal-open .navbar-static-bottom {
		padding-bottom: -100px !important;
		overflow-y: -50px;
	}
	#nav {
		display: inline-block;
	        width: 100%;
	        height: 80px;
	        background-color: #262626;
	}
	#nav .navbar-inner {
		display: block;
		background-color: #262626;
		margin-top: 17px;
		margin-left: 80px;
	}
	.wrapper {
		height: auto;
		margin: 0px auto;
		overflow: inherit;
	}
	#navFooter {
		display: table-footer-group;
	        width: 100%;
	        height: 50px;
	}
	#nav .navbar-header {
		display: block;
		background-color: #262626;
	        margin: -6px auto;
	}
	#nav .navbar-inner li.dropdown {
		display: inline-block;
	}
	#nav .navbar-header li.dropdown {
		margin-top: -0.8px;
	}
	#nav .navbar-inner a.homeLink, a.codeLink, a.projectsLink, a.aboutMeLink {
		font-weight: bold;
		font-size: 18px;
	}
	a, a:active, a:focus {
		outline: none;
	}
	#nav .navbar-inner a.homeLink {
		color: white;
	}
	#nav .navbar-inner a.codeLink {
		color: white;
	}
	#nav .navbar-inner a.projectsLink {
		color: white;
	}
	#nav .navbar-inner a.aboutMeLink {
		color: white;
	}
	#nav .navbar-inner li.dropdown:hover {
		display: block;
		border-bottom: 7.0px solid #ff751a;
		height: 63px;
	}
	.dropdown-menu {
                height: 119px;
		background-color: #333333;
		font: italic bold 14px/30px Georgia, serif;
	}
	ul.nav li.dropdown:hover > ul.dropdown-menu {
            display: table-row;
	    border-style: none;
	    border-radius: 0 !important;
	    -moz-border-radius: 0 !important;
	    margin-top: 6px;
            margin-left: 0px;
	}
	ul.nav li.dropdown ul.dropdown-menu a {
	    font: italic bold 14px/30px Georgia, serif;
	    color: white;
	}
	ul.nav li.dropdown ul.dropdown-menu a:hover {
	    background-color: #737373;
	    color: #ff9900;
            height: 39.3px;
	}
	ul.nav li.dropdown ul.dropdown-menu li.dropdownMenueHeader {
            height: 26px;
	}
	ul.nav li.dropdown ul.dropdown-menu li.lineDividerTop {
	    margin-bottom: 9px;
	}
	ul.nav li.dropdown ul.dropdown-menu li.dropDownCell {
	    height: 20px;
	}
	ul.nav li.dropdown ul.dropdown-menu li.dropDownCell a {
            margin-top: -9px;
	}
	ul.nav li.dropdown ul.dropdown-menu li.lineDivider {
            margin-top: 18.3px;
	}
	.dropdownMenueHeader {
		height: 30px;
	        margin-left: 35px;
		color: #79a6d2;
	}
	#jumbotronContainer {
		margin: 80px auto;
	}
	#jumbotronContainer2 {
		width: 70%;
		margin: 140px auto;
	}
	#leftControl {
		margin-top: 20px;
		height: 45px;
	}
	#rightControl {
		margin-top: 20px;
		height: 45px;
	}
	.row {
		margin: 80px auto;
		display: table;
	}
	.col-md-1 {
		width: 160px;
		height: 160px;
		background-color: #2d5986;
		border-radius: 80px;
		display: table;
		font-size: 25px;
		font-weight: normal;
		border: 1.6px solid #d9d9d9;
		font-family: "Brush Script MT", cursive;
		margin-left: 50px;
	}
	.col-md-1 a {
		color: #ff751a;
		text-align: center;
		vertical-align: middle;
  		display: table-cell;
	}
	.col-md-1 p {
		text-align: center;
		vertical-align: middle;
  		display: table-cell;
	}
	.col-md-1:hover {
		transform: scale(1.1, 1.1);
		background-color: #2d5986;
		border-radius: 80px;
		cursor: pointer;
		box-shadow: 1px 1px 1px 1px #737373;
    	        outline-offset: 5px;
	}
	.col-md-2 {
		width: 250px;
		height: 160px;
		background-color: #e0ebeb;
		border-radius: 9px;
		display: table;
		font-size: 33px;
		font-weight: normal;
		border: 1px solid #737373;
		font-family: "Brush Script MT", cursive;
		margin-left: 50px;
	}
	.col-md-2:hover {
		transform: scale(1.04, 1.04);
		background-color: #e0ebeb;
		border-radius: 9px;
		cursor: pointer;
		box-shadow: 1px 1px 1px 1px #737373;
    	        outline-offset: 5px;
	}
	.col-md-2 p {
		color: #ff751a;
		text-align: center;
  		border-bottom: 1.5px solid #737373;
  		margin-top: 20px;
	}
	.col-md-2 h6 {
		margin-top: 30px;
		text-align: left;
		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}
	#copyRightLogoTab {
		margin: 0px auto;
		display: table;
	}
	#mediaLinksTab {
		position: absolute;
		right: 25px;
	}
	#mediaLinksTab a {
		margin-left: 30px;
	}
	ul.fa-ul li i {
		font-size: 9.5px;
		color: #1a8cff;
	}
	#myImage {
		margin: 0px auto;
		display: table;
		border: 2px solid #ffad33;
	}
	#myImageText {
		text-align: center;
	}
	#myEmailLink {
		text-decoration: none;
		color: #1a8cff;
	}
	.notesArea {
		display: table;
		margin: -70px auto;
	}
	#datastructuresJumbotron {
		width: 95%;
		margin: 30px auto;
		display: table;
	}
	#miscellaneousJumbotron {
		margin: 100px auto;
		width: 100%;
		height: 600px;
		overflow: auto;
		display: table;
	}
	#javaProjectsJumbotron {
		width: 95%;
		margin: 30px auto;
		display: table;
	}
	#androidProjectsJumbotron {
		width: 95%;
		margin: 30px auto;
		display: table;
	}
	#androidIcon {
		margin-top: 22px;
		position: absolute;
	}
	.affix {
		margin-top: -12px;
		position: absolute;
	}
	#infoTable {
		width: 100%;
	}
	#infoTable td {
		height: 53px;
	}
	#infoTable thead tr {
		border-bottom: 1px solid #527a7a;
	}
	#infoTable tbody tr {
		border-bottom: 1px solid #527a7a;
	}
	#infoTable tbody td {
		cursor:pointer;
	}
	#username.ng-valid {
    		color: #008000;
	}
	#username.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#username.ng-invalid-maxlength {
    		border-color: #e62e00;
	}
	#username.ng-invalid-minlength {
    		border-color: #e62e00;
	}
	#email.ng-valid {
    		color: #008000;
	}
	#email.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#email.ng-invalid-maxlength {
    		border-color: #e62e00;
	}
	#employeeId.ng-valid {
    		color: #008000;
	}
	#employeeId.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#employeeId.ng-invalid-maxlength {
    		border-color: #e62e00;
	}
	#employeeId.ng-invalid-minlength {
    		border-color: #e62e00;
	}
	#password.ng-valid {
    		color: #008000;
	}
	#password.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#password.ng-invalid-maxlength {
    		border-color: #e62e00;
	}
	#password.ng-invalid-minlength {
    		border-color: #e62e00;
	}
	.error {
		color: #ff5050;
	}
	#email {
		width:200px;
	}
	#password {
		width: 200px;
	}
	#myColumn {
		display: block;
		margin: 0px auto;
		margin-left: 150px;
	}
	#myTable {
		margin-left: 30px;
	}
	#infoRow {
		margin-top: 14px;
	}
        #buttonFormGroup {
		margin-top: 20px;
	}
	#logInHeader {
		text-align: center;
		font-family: "Lucida Fax", serif;
		color: #3366cc;
	}
	#nameLabel {
		margin-top: 3px;
		margin-left: 15px;
	    	color: #3366cc;
	    	font-family: "Lucida Fax", serif;
	}
	#passwordLabel {
		margin-top: 20px;
	   	margin-left: 15px;
	    	color: #3366cc;
	    	font-family: "Lucida Fax", serif;
	}
	.form-inline.required .control-label: after {
		content: "*";
		color: red;
	}
    	#usernameInput {
    		width: 300px;
    		margin-top: -4px;
    		margin-left: 29px;
    	}
    	#passwordInput {
    		width: 300px;
    		margin-top: 15px;
    		margin-left: 33px;
    	}
    	#logInModalBtn {
		width: 130px;
		margin-top: 5px;
	}
    	#closeModalBtn {
    		width: 130px;
    		margin-top: 5px;
    	}
    	#addEmpBtn {
		padding: 2px 9px;
    		font-size: 15px;
    		line-height: 2;
	}
	#viewEmpBtn {
		padding: 2px 9px;
    		font-size: 15px;
    		line-height: 2;
	}
	#viewPswds {
		padding: 2px 9px;
    		font-size: 15px;
    		line-height: 2;
	}
	#buttonGroup {
		margin-top: 20px;
	}
	.spinner {
    		position: fixed;
    		top: 50%;
    		left: 50%;
    	}
    	#usernameInput.ng-valid {
    		color: #008000;
	}
	#usernameInput.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#passwordInput.ng-valid {
    		color: #008000;
	}
	#passwordInput.ng-invalid.ng-touched {
    		border-color: #e62e00;
	}
	#logInValidationMessage {
		font-size: 16px;
		color: #ff0000;
	}
	#recaptchaVerification {
		margin-left: 126px;
	}
	#modalAffixDiv {
		margin-top: 9px;
	}
        .btn:focus, .btn:active {
   		outline: none !important;
	}
}