/*Overrided by Chunbo, to add Franklin color: PMS 539 to the top nav bar*/
		.navbar-inverse{background-color:#002b45;border-color:#080808}


		body {
		background-color: #222;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
		background-repeat: repeat;
		
		}
		
		/*Added by Chunbo. 8/8/14 */
			.main-color {
			color:#358cce;
			}
			
			/*Added by Chunbo. 8/28/14 */
			hr {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #fff;
	margin: 25px 0;
	clear: both;
}

/*********************************************
 * ROLLING LINKS
 http://www.dreamdealer.nl/articles/how_to_create_3d_links_rolling_on_hover.html
 *********************************************/

.roll {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;

    -webkit-perspective: 300px;
       -moz-perspective: 300px;
        -ms-perspective: 300px;
            perspective: 300px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
}
.roll:hover {
    background: none;
    text-shadow: none;
}
.roll span {
    display: block;
    position: relative;
    padding: 0 2px;
    pointer-events: none;

    -webkit-transition: all 600ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms ease;
    
    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.roll:hover span {
    //background: rgba(190,190,20,.9);

    -webkit-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
       -moz-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
        -ms-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
            transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg );
}
.roll span:after {
    content: attr(data-title);

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 1px 2px;
    white-space: nowrap;

    color: white;
    background: #283e72; 

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
            transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

	/*	
		.meny a {
		color: #999;//#3BB9FF;//#c2575b;
		text-decoration: none;
		-webkit-transition: 0.15s color ease;
		-moz-transition: 0.15s color ease;
		-ms-transition: 0.15s color ease;
		-o-transition: 0.15s color ease;
		transition: 0.15s color ease;
		}
		.meny a:hover {
		color: #fff;//#f76f76;
		text-decoration: none;
		}
		
		
		.meny {
		display: none;
		padding: 20px;
		overflow: auto;
		background: #002b45; //#333;
		color: #eee;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		}
		.meny ul {
		margin-top: 10px;
		}
		.meny ul li {
		display: inline-block;
		width: 200px;
		list-style: none;
		font-size: 120%;//20px;
		padding: 3px 10px;
		}
		*/
		/*
		.meny ul li:before {
		content: '-';
		margin-right: 5px;
		color: rgba( 255, 255, 255, 0.2 );
		}
		*/
		/**
		 * Hint graphic that appears while menu is inactive
		 */
		 /*
		.meny-arrow {
		position: absolute;
		z-index: 10;
		border: 10px solid transparent;
		-webkit-transition: opacity 0.4s ease 0.4s;
		-moz-transition: opacity 0.4s ease 0.4s;
		-ms-transition: opacity 0.4s ease 0.4s;
		-o-transition: opacity 0.4s ease 0.4s;
		transition: opacity 0.4s ease 0.4s;
		}
		.meny-left .meny-arrow {
		left: 14px;
		top: 50%;
		margin-top: -16px;
		border-left: 16px solid #333;
		}
		.meny-right .meny-arrow {
		right: 14px;
		top: 50%;
		margin-top: -16px;
		border-right: 16px solid #333;
		}
		.meny-top .meny-arrow {
		left: 50%;
		top: 14px;
		margin-left: -16px;
		border-top: 16px solid #333;
		}
		.meny-bottom .meny-arrow {
		left: 50%;
		bottom: 14px;
		margin-left: -16px;
		border-bottom: 16px solid #333;
		}
		.meny-active .meny-arrow {
		opacity: 0;
		-webkit-transition: opacity 0.2s ease;
		-moz-transition: opacity 0.2s ease;
		-ms-transition: opacity 0.2s ease;
		-o-transition: opacity 0.2s ease;
		transition: opacity 0.2s ease;
		}
		*/
		
		/**
		 * Main contents area
		 */
		.contents {
		background: #eee;
		padding:0;/*20px 40px;*/
		width: 100%;
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		
		/*To leave white space from screen top*/
		 // padding-top: 20px;
		}
		
		
		
		.contents p {
		margin: 10px 0 10px 0;
		font-size: 16px;
		line-height: 1.32;
		}
		.contents small {
		display: block;
		margin-top: 10px;
		padding-top: 10px;
		color: #333;
		font-size: 0.85em;
		border-top: 1px dashed #ccc;
		-webkit-text-size-adjust: none;
		}
		.contents .sharing {
		position: absolute;
		bottom: 20px;
		}

.container a {
color: #0064B0;
//font-size: 100%;
text-decoration: none;
}

.container a:hover {
	color: #666666;
}

/*style date and time, from CNN*/
.DateStamp{
	color: #999;
	font-size: 11px;
	padding-bottom: 2px;
	float: left;
	margin-top: 3px;
	margin-right: 5px;
	
}
		
		
.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}

		/* RESPONSIVE CSS: from carousel.css. by Chunbo
		-------------------------------------------------- */
		
		@media (min-width: 768px) {
		
		  /* Navbar positioning foo */
		  .navbar-wrapper {
		    margin-top: 20px;
		  }
		  .navbar-wrapper .container {
		    padding-right: 15px;
		    padding-left: 15px;
		  }
		  .navbar-wrapper .navbar {
		    padding-right: 0;
		    padding-left: 0;
		  }
		
		  /* The navbar becomes detached from the top, so we round the corners */
		  .navbar-wrapper .navbar {
		    border-radius: 4px;
		  }
		
		  /* Bump up size of carousel content */
		  .carousel-caption p {
		    margin-bottom: 20px;
		    font-size: 21px;
		    line-height: 1.4;
		  }
		
		  .featurette-heading {
		    font-size: 50px;
		  }
		}
		
		@media (min-width: 992px) {
		  .featurette-heading {
		    margin-top: 120px;
		  }
		}