body {
  background: #000;
  color: #fff;
}
a:focus {
    outline: thin dotted;
    outline-offset: -2px;
}

.hide {
    display: none !important;
}

#topNavBar, #mobileSearchBox {
	display: none;
}

#leftSidePage {	
    background-image: url("/images/staticback.png");
    background-repeat: no-repeat;
}

#navigationBox {
	background-color: #191930;
    border: 0.1rem solid rgba(255, 255, 255, 0.05);
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.05) inset;
    padding: 6px;
}

/* old bootstrap START */
.nav {
    list-style: outside none none;
    margin-bottom: 18px;
    margin-left: 0;
}
.nav > li > a {
    display: block;
}
.nav > li > a:hover {
    background-color: #eeeeee;
    text-decoration: none;
}
.nav .nav-header {
    color: #999999;
    display: block;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    padding: 3px 15px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}
.nav li + .nav-header {
    margin-top: 9px;
}
.nav-list {
    margin-bottom: 0;
    padding-left: 15px;
    padding-right: 15px;
}
.nav-list > li > a, .nav-list .nav-header {
    margin-left: -15px;
    margin-right: -15px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list > li > a {
    padding: 3px 15px;
}
.nav-list > .active > a, .nav-list > .active > a:hover {
    background-color: #0088cc;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.nav-list [class^="icon-"] {
    margin-right: 2px;
}
.nav-list .divider {
    background-color: #e5e5e5;
    border-bottom: 1px solid #ffffff;
    height: 1px;
    margin: 8px 1px;
    overflow: hidden;
}
/* old bootstrap END */

.nav-list {
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}
.nav-list > li > a, .nav-list .nav-header {
    margin-left: -1px;
    margin-right: -1px;
    padding: 3px 5px;
    text-decoration: none;
    text-shadow: none;
}
.nav li + .nav-header {
    margin-top: 9px;
}

#overview .overview a, #websites .websites a, #articles .articles a, #catsmeow .catsmeow a, #bio .bio a, #contact .contact a, #resume .resume a, #pictures .pictures a, #lists .lists a {
    background-color: #0088cc;
    color: #ffffff;
}

#siteLogo img {
	max-width: 100%;
	height: auto;	
}
html {
  height: 100%;
  overflow-y: hidden;
}
body {
  height: 100%;
  overflow-y: hidden;
}

#bodyContainer {
	padding: 0.5rem 0.5rem 0 0.5rem;
	font-size: 0.9rem;
	line-height: 1.1rem;
	position: relative;
  height: 100%;
  max-width: 100%;
  overflow-y: auto;
}

#pageContent{
	margin-top: 2.0rem;
	position: relative;
}
#pageContent a {
    color: #999;
}

#bodyContainer h1{
	font-size: 1.50rem;
}
#bodyContainer h2{
	font-size: 1.25rem;
}
#bodyContainer h3{
	font-size: 1.1rem;
}
#bodyContainer h4{
	font-size: 1.0rem;
}

#bookCallout {
	background: #222;
	padding-top: 0.2rem;
	border: 0.1rem solid #333;
    border-radius: 0.25rem;		
    text-align: center;
	font-size: 0.8rem;
	line-height: 1.0rem;
    margin-top: 2.1rem;
	margin-left: -5px;
	margin-right: 5px;
}
#bookCallout img {
	max-width: 100%;
	height: auto;
}

#bookCallout h2{
	font-size: 1.0rem;	
}


#footerContainer {
	text-align: right;
	font-size: 0.8rem;
	margin-top: 0;
	padding:0;
	padding-top: 1rem;
	position: relative;
	background: #000;
	left:0;
	z-index: 10;
}
#footerContainer p {
	position: relative;
	right: 0rem;
	background: #000;
	width: 100%;
	padding-bottom: 1rem;
}

.doubleSpacedList li {
	padding-bottom: 1rem;
}

/* Extra big desktop */
@media (min-width: 1200px) {
	#leftSidePage {	
		background-size: 150%;
	}	
	#pageContent{
		margin-top: 2.1rem;
	}
	#bookCallout {
		margin-top: 2.2rem;
	}
}

/* Small desktop specific */
@media (min-width: 768px) and (max-width: 991px) {
	#leftSidePage {	
		background-size: 150%;
	}	
	#pageContent{
		margin-top: 1.1rem;
	}
	#bookCallout {
		margin-top: 2.25rem;
	}
}
/* Mobile specific */
@media (max-width: 767px) {
	#leftSidePage {	
		background: none;
	}
	#bookCallout {
		background-color: transparent;
		border: none;
	}
	#bookCallout h2{
		text-align: left;
		font-size: 1.50rem;
	}
	#pageContent{
		margin-top: 0rem;
	}
	
	#topNavBar {
		display: block;
		background: #0C799D;
		color: #fff;
		border-bottom: solid 0.1rem #aaa;		
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		z-index: 10;
		height: 42px;				
	}
	#topNavBar  ul {
		padding: 0;
		margin: 0;
		text-align: center;
		height: 38px;
	}
	
	#topNavBar  li {
		display: inline;
		top: 0.2rem;
	}
	
	#topNavBar #mobileHamburger {
		position: absolute;		
		left: 1.0rem;		
		cursor: pointer;
	}

	#topNavBar #mobileSiteName {				
		cursor: pointer;
	}

	#topNavBar #mobileSearch {
		position: absolute;
		right: 1rem;
		cursor: pointer;
	}
	.hide-header #topNavBar {		
		top: -42px;
	}	
	
	#mobileSearchBox{
		display: block;
		background: #0C799D;
		color: #fff;
		border-bottom: solid 0.1rem #aaa;		
		position: fixed;
		top: 39px;
		width: 100%;
		height:39px;
		padding: 0.2rem 1rem;
		z-index: 10;
		transition: height 0.5s linear;
	}
	.hideSearch {
		display: none !important;
		top: 0 !important;
		height: 0 !important;
	}
	
	#navigationBox {
		border-right: 2px solid white;
		color: #ededed;
		height: 100%;
		overflow-y: auto;
		position: fixed;
		left:0;
		top: 42px;
		width: 85%;
		z-index: 2;
		border-radius: 0;
		display: block;
	}
	#navigationBox .contents {
		position: relative;
	}
	
	#pageContent {
		z-index: 3;
		background: #000;
		position: relative;
		margin:0;
		left:-15px;
		padding: 0.1rem;
		transition: left 0.5s linear;
		padding-top: 48px;
	}
	.menu-open #pageContent {
		overflow: hidden;		
	}
		
	.col-lg-9 {
		padding-right:0.2rem;
	}
	.col-lg-3 {
		padding-right:0.2rem;
	}
	.menu-open #pageContent {
		left: 88%;
		transition: left 0.5s linear;			
	}
	.menu-open #bodyContainer {
		overflow: hidden;	
	}
	body.menu-open {
		overflow: hidden;
	}	
	#bodyContainer {
		position: absolute;
		padding-left: 0;		
		z-index: 3;
		width: 100%;
		height: 100%;
		overflow-y:scroll;
		background: #000;
	}
	#bodyContainer .container {
		padding: 0;		
	}
	
	#bodyContainer .row{
		margin: 0 0;
	}
	
	#contentOverLay {
		position: fixed;
		background-color: #191930;
		height: 100%;
		opacity: 0.7;
		top: 0;
		bottom: 0;
		left: 85%;
		width: 100%;		
		z-index: 10;
		overflow: hidden;		
	}	
	
	#bookCallout {	
		margin-left: 0;
	}
	
	#cse-search-box {
		position: absolute;
		right:1rem;
	}
	
	#cse-search-box  input{
		color: #000;
		border-radius: 0.4rem;
		box-shadow: 0 1px 1px rgba(255, 255, 255, 0.05) inset;
	}
	
	#footerContainer {
		
	}
	
}
/* following is to ensure container covers menu */
@media (min-width: 544px) and (max-width: 768px) {
	.container {
		max-width: none;
	}
}
/* page specific */
.socialMedia {
	margin-top: -1rem !important;
	margin-bottom: 1rem;
}
.socialMedia img{
	max-width: 100%;
	height: auto;	
}
[class^="iconCRG-"], [class*=" iconCRG-"] {
    background-image: url("../img/sprites.png");
    background-repeat: no-repeat;		
    display: inline-block;
    height: 29px;    
    vertical-align: text-top;
    width: 40px;
}
.iconCRG-hamburger {
    background-position: 0px -3px;
}
.iconCRG-hamburger-active {
    background-position: -40px -3px;
}
.iconCRG-search {
    background-position: 0px -36px;
}
.iconCRG-search-active {
    background-position: -40px -36px;
}
.iconCRG-siteLogo {
    background-position: 0px -66px;
	width: 96px;
	height: 32px;
}


/* Old bootstrap icons, I like these still */
[class^="icon-"], [class*=" icon-"] {
    background-image: url("../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;		
    display: inline-block;
    height: 14px;
    line-height: 14px;
    vertical-align: text-top;
    width: 14px;
}

.icon-white {
    background-image: url("../img/glyphicons-halflings-white.png");
}
.icon-glass {
    background-position: 0 0;
}
.icon-music {
    background-position: -24px 0;
}
.icon-search {
    background-position: -48px 0;
}
.icon-envelope {
    background-position: -72px 0;
}
.icon-heart {
    background-position: -96px 0;
}
.icon-star {
    background-position: -120px 0;
}
.icon-star-empty {
    background-position: -144px 0;
}
.icon-user {
    background-position: -168px 0;
}
.icon-film {
    background-position: -192px 0;
}
.icon-th-large {
    background-position: -216px 0;
}
.icon-th {
    background-position: -240px 0;
}
.icon-th-list {
    background-position: -264px 0;
}
.icon-ok {
    background-position: -288px 0;
}
.icon-remove {
    background-position: -312px 0;
}
.icon-zoom-in {
    background-position: -336px 0;
}
.icon-zoom-out {
    background-position: -360px 0;
}
.icon-off {
    background-position: -384px 0;
}
.icon-signal {
    background-position: -408px 0;
}
.icon-cog {
    background-position: -432px 0;
}
.icon-trash {
    background-position: -456px 0;
}
.icon-home {
    background-position: 0 -24px;
}
.icon-file {
    background-position: -24px -24px;
}
.icon-time {
    background-position: -48px -24px;
}
.icon-road {
    background-position: -72px -24px;
}
.icon-download-alt {
    background-position: -96px -24px;
}
.icon-download {
    background-position: -120px -24px;
}
.icon-upload {
    background-position: -144px -24px;
}
.icon-inbox {
    background-position: -168px -24px;
}
.icon-play-circle {
    background-position: -192px -24px;
}
.icon-repeat {
    background-position: -216px -24px;
}
.icon-refresh {
    background-position: -240px -24px;
}
.icon-list-alt {
    background-position: -264px -24px;
}
.icon-lock {
    background-position: -287px -24px;
}
.icon-flag {
    background-position: -312px -24px;
}
.icon-headphones {
    background-position: -336px -24px;
}
.icon-volume-off {
    background-position: -360px -24px;
}
.icon-volume-down {
    background-position: -384px -24px;
}
.icon-volume-up {
    background-position: -408px -24px;
}
.icon-qrcode {
    background-position: -432px -24px;
}
.icon-barcode {
    background-position: -456px -24px;
}
.icon-tag {
    background-position: 0 -48px;
}
.icon-tags {
    background-position: -25px -48px;
}
.icon-book {
    background-position: -48px -48px;
}
.icon-bookmark {
    background-position: -72px -48px;
}
.icon-print {
    background-position: -96px -48px;
}
.icon-camera {
    background-position: -120px -48px;
}
.icon-font {
    background-position: -144px -48px;
}
.icon-bold {
    background-position: -167px -48px;
}
.icon-italic {
    background-position: -192px -48px;
}
.icon-text-height {
    background-position: -216px -48px;
}
.icon-text-width {
    background-position: -240px -48px;
}
.icon-align-left {
    background-position: -264px -48px;
}
.icon-align-center {
    background-position: -288px -48px;
}
.icon-align-right {
    background-position: -312px -48px;
}
.icon-align-justify {
    background-position: -336px -48px;
}
.icon-list {		
    background-position: -360px -48px;
}
.icon-indent-left {
    background-position: -384px -48px;
}
.icon-indent-right {
    background-position: -408px -48px;
}
.icon-facetime-video {
    background-position: -432px -48px;
}
.icon-picture {
    background-position: -456px -48px;
}
.icon-pencil {
    background-position: 0 -72px;
}
.icon-map-marker {
    background-position: -24px -72px;
}
.icon-adjust {
    background-position: -48px -72px;
}
.icon-tint {
    background-position: -72px -72px;
}
.icon-edit {
    background-position: -96px -72px;
}
.icon-share {
    background-position: -120px -72px;
}
.icon-check {
    background-position: -144px -72px;
}
.icon-move {
    background-position: -168px -72px;
}
.icon-step-backward {
    background-position: -192px -72px;
}
.icon-fast-backward {
    background-position: -216px -72px;
}
.icon-backward {
    background-position: -240px -72px;
}
.icon-play {
    background-position: -264px -72px;
}
.icon-pause {
    background-position: -288px -72px;
}
.icon-stop {
    background-position: -312px -72px;
}
.icon-forward {
    background-position: -336px -72px;
}
.icon-fast-forward {
    background-position: -360px -72px;
}
.icon-step-forward {
    background-position: -384px -72px;
}
.icon-eject {
    background-position: -408px -72px;
}
.icon-chevron-left {
    background-position: -432px -72px;
}
.icon-chevron-right {
    background-position: -456px -72px;
}
.icon-plus-sign {
    background-position: 0 -96px;
}
.icon-minus-sign {
    background-position: -24px -96px;
}
.icon-remove-sign {
    background-position: -48px -96px;
}
.icon-ok-sign {
    background-position: -72px -96px;
}
.icon-question-sign {
    background-position: -96px -96px;
}
.icon-info-sign {
    background-position: -120px -96px;
}
.icon-screenshot {
    background-position: -144px -96px;
}
.icon-remove-circle {
    background-position: -168px -96px;
}
.icon-ok-circle {
    background-position: -192px -96px;
}
.icon-ban-circle {
    background-position: -216px -96px;
}
.icon-arrow-left {
    background-position: -240px -96px;
}
.icon-arrow-right {
    background-position: -264px -96px;
}
.icon-arrow-up {
    background-position: -289px -96px;
}
.icon-arrow-down {
    background-position: -312px -96px;
}
.icon-share-alt {
    background-position: -336px -96px;
}
.icon-resize-full {
    background-position: -360px -96px;
}
.icon-resize-small {
    background-position: -384px -96px;
}
.icon-plus {
    background-position: -408px -96px;
}
.icon-minus {
    background-position: -433px -96px;
}
.icon-asterisk {
    background-position: -456px -96px;
}
.icon-exclamation-sign {
    background-position: 0 -120px;
}
.icon-gift {
    background-position: -24px -120px;
}
.icon-leaf {
    background-position: -48px -120px;
}
.icon-fire {
    background-position: -72px -120px;
}
.icon-eye-open {
    background-position: -96px -120px;
}
.icon-eye-close {
    background-position: -120px -120px;
}
.icon-warning-sign {
    background-position: -144px -120px;
}
.icon-plane {
    background-position: -168px -120px;
}
.icon-calendar {
    background-position: -192px -120px;
}
.icon-random {
    background-position: -216px -120px;
}
.icon-comment {
    background-position: -240px -120px;
}
.icon-magnet {
    background-position: -264px -120px;
}
.icon-chevron-up {
    background-position: -288px -120px;
}
.icon-chevron-down {
    background-position: -313px -119px;
}
.icon-retweet {
    background-position: -336px -120px;
}
.icon-shopping-cart {
    background-position: -360px -120px;
}
.icon-folder-close {
    background-position: -384px -120px;
}
.icon-folder-open {
    background-position: -408px -120px;
}
.icon-resize-vertical {
    background-position: -432px -119px;
}
.icon-resize-horizontal {
    background-position: -456px -118px;
}