/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Vertical tabs CSS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.ui-tabs-vertical { 
	width: 60em;
	overflow: auto;
}
.ui-tabs-vertical .ui-tabs-nav { 
	padding: .2em .1em .2em .2em; 
	float: left;  
	border-radius: 6px;
	border-style: solid;
	border-color: #efefef;
	border-width: 1px;
	box-shadow:0px 4px 8px #efefef;
	overflow: auto;
	max-height:600px;
}
.ui-tabs-vertical .ui-tabs-nav li { 
	clear: left; 
	width: 95%; 
	border-bottom-width: 1px !important; 
	border-right-width: 0 !important; 
	margin: 0 -1px .2em 0; 
	border-radius: 6px;
}
.ui-tabs-vertical .ui-tabs-nav li a { 
	display:block; 
	width:100%; 
	padding-left	:10px;
	padding-top		:9px;
	padding-bottom	:9px;
	text-align:left; 
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { 
	padding-bottom: 0; 
	padding-right: .1em; 
	border-right-width: 1px; 
}
.ui-tabs-vertical .ui-tabs-panel { 
	padding: 1em; 
	float:left;
}
/*
.ui-tabs-vertical, .ui-tab-content, .ui-tabs-panel{overflow: auto;}
*/
.draggable { 
	width: 200px; 
	height: 200px; 
	padding: 5px; 
	float: left; 
	margin: 0; 
}
.ui-widget-header p, .ui-widget-content p { 
	margin: 0; 
}
#tabs {
	list-style-type: none;
	margin: 0px;
	padding: 0;
	min-height: 400px;
	overflow: 'auto';
}
#tabs li {
	float: left;
	font-size:14px;
	overflow: auto;
	border-radius:6px;
	min-height:40px;
	margin-bottom:20px;
}
.ui-tabs{
	border-radius: 6px;
}
.ui-tabs-tab{
	border-radius: 6px;
	min-width: 150px;
}
.ui-state-default{
	overflow:hidden;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Vertical Tabs
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.cssDashboard_VerticalTabs_Container{
	width:100%;
	text-align:left;
	margin:0 auto;

}
.cssDashboard_VerticalTabs_DIV{
	display: inline-block;
	width:100%;
	border-style:none;
}
.cssDashboard_ULFunctions{
	width:25%;
	display: inline-block;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Main body
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.cssDashboard_Panels{
	width:70%;
	text-align:left;
}
.cssDashboard_VerticalTabs_UL{
	margin-top:150px;
	min-width:220px;
	background:none;
	min-height: 400px;
	overflow: scroll;

}
.cssDashboard_Panel_Div{
	width:100%;
	display: inline-block;
	text-align:left;
	min-height:600px;
}
.cssDashboard_Panel_UL{
	display: inline-block;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Items
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.cssDashboards_Main_Container{
	position:relative;
	margin: auto;
	text-align:center;
	width:100%;
}
.cssDashboards_Main_TagLine{
	width:100%;
	font-size:11px;	
	padding:5px;
	display: inline-block;
}
.cssDashboards_Main_GradientFill{
	width:100%;
	line-height: 40px;
	vertical-align: middle;
	background: -moz-linear-gradient(45deg, #c0c0c0 0%, #ffffff 50%, #808080 100%); /* ff3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #c0c0c0), color-stop(50%, #ffffff), color-stop(100%, #808080)); /* safari4+,chrome */
	background: -webkit-linear-gradient(45deg, #c0c0c0 0%, #ffffff 50%, #808080 100%); /* safari5.1+,chrome10+ */
	background: -o-linear-gradient(45deg, #c0c0c0 0%, #ffffff 50%, #808080 100%); /* opera 11.10+ */
	background: -ms-linear-gradient(45deg, #c0c0c0 0%, #ffffff 50%, #808080 100%); /* ie10+ */
	background: linear-gradient(45deg, #c0c0c0 0%, #ffffff 50%, #808080 100%); /* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#c0c0c0',GradientType=1 ); /* ie6-9 */
}
.cssDashboards_Main_Items{
	text-align:center;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Making the panels draggable and sortable.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.cssDragable_LI {
	list-style-type: none;
	font-size: 30px;
	text-align: center;
	cursor: pointer;
	border: 1px solid #dedede;
	border-radius:5px;
	margin: 10px;
	padding: 2px;
	width: 250px;
	height: 275px;
	min-height: 275px;
}
.cssDragable_DIV {
  width:100%;
  height:100%;
  font-size:14px;
  float: left;
  margin: 0 auto;
  overflow: hidden;
  background-color: rgba(255,255,255,0.8);
  border-radius: 15px;
}
.cssDragable_Highlight {
  font-weight: bold;
  font-size: 50px;
  background-color: lightblue;
  border: 2px solid red;
  margin: auto;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Commonly used
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.cssPanelTitles{
	font-size:16px;	
}

.cssRecentListing {
	text-decoration: none;
	font-size:10px;	
  }

.cssSearchWord{
	float:left;
	width:auto;
	margin:3px;
	background:#efefef;
	border-radius:6px;
	padding:2px;
}
.cssSearchWord:hover{
	background:#dedede;
}
.cssNewNotifications{
	/* Remember to put position:relative in container CSS*/
	position:absolute;
	top:0;
	right:0;

	width:20px;
	height:20px;
	line-height: 20px;
	overflow:hidden;

	text-align: center;
	font-size: 12px;

	border-radius: 50%;
	background:#f44;
	padding:2px;
	animation: shake 1s; 
	animation-iteration-count: 5; 

}
@keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
  }
.cssDashboardExplain{
	font-size:11px;	
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Clock cube for WhatsNew
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  
@font-face {
  font-family: 'Digital-7';
  src: 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.eot?#iefix') format('embedded-opentype'),  
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.woff') format('woff'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.ttf')  format('truetype'), 
  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/184191/Digital-7.svg#Digital-7') format('svg');
  font-weight: normal;
  font-style: normal;
}
.cssClockFigure{
  top:30px;
  width:100px;
  height:100px;
  position:relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(-35deg) rotateY(45deg);
  transform: rotateX(-35deg) rotateY(45deg);
  transition:2s;
  margin:0 auto;
}
.cssClockFigure:hover{
  -webkit-transform:rotateX(-50deg) rotateY(45deg);
  transform:rotateX(-50deg) rotateY(45deg);
}
.face{
  width:100%;
  height:100%;
  position:absolute;
  -webkit-transform-origin: center;
  transform-origin: center;
  background:#000;
  text-align:center;
  overflow:hidden;
}
.cssClockP{
  font-size:80px;
  font-family: 'Digital-7';
  color:#2982FF;
  text-shadow:0px 0px 5px #000;
  -webkit-animation:color 10s infinite;
  animation:color 10s infinite;
  line-height:90px;
}
.front{
  -webkit-transform: translate3d(0, 0, 100px);
  transform: translate3d(0, 0, 50px);
  background:#111;
}
.left{
  -webkit-transform: rotateY(-90deg) translate3d(0, 0, 100px);
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
  background:#151515;
}
.top{
  -webkit-transform: rotateX(90deg) translate3d(0, 0, 100px);
  transform: rotateX(90deg) translate3d(0, 0, 50px);
  background:#222;
}

@keyframes color{
  0%{color:#2982ff;text-shadow:0px 0px 5px #000;}
  50%{color:#cc4343;text-shadow:0px 0px 5px #ff0000;}
}
@-webkit-keyframes color{
  0%{color:#2982ff;text-shadow:0px 0px 5px #000;}
  50%{color:#cc4343;text-shadow:0px 0px 5px #ff0000;}
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
For Fun
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.cssCapital_Lines{
	margin:0 auto;
	width:100%;
	text-align:center;
	font-size:12px;
}

.quote-box {
    border-radius: 3px;
    position: relative;
    margin: 0 auto;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}
#quote {
    overflow: hidden;
    opacity: 1;
    transition: all 0.8s cubic-bezier(0.44, 1.13, 0.58, 1);
}
.quote-text {
    font-size: 12px;
}
.author {
    font-size: 8px;
    font-weight: 600;
    float: right;
}

.cssCountdown{
	width:100%;
	height:30px;
	color:#fff;

	background: -moz-linear-gradient(45deg, rgba(255,0,0,1) 0%, rgba(5,193,255,1) 83%, rgba(0,0,0,1) 100%); /* ff3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(255,0,0,1)), color-stop(83%, rgba(5,193,255,1)), color-stop(100%, rgba(0,0,0,1))); /* safari4+,chrome */
	background: -webkit-linear-gradient(45deg, rgba(255,0,0,1) 0%, rgba(5,193,255,1) 83%, rgba(0,0,0,1) 100%); /* safari5.1+,chrome10+ */
	background: -o-linear-gradient(45deg, rgba(255,0,0,1) 0%, rgba(5,193,255,1) 83%, rgba(0,0,0,1) 100%); /* opera 11.10+ */
	background: -ms-linear-gradient(45deg, rgba(255,0,0,1) 0%, rgba(5,193,255,1) 83%, rgba(0,0,0,1) 100%); /* ie10+ */
	background: linear-gradient(45deg, rgba(255,0,0,1) 0%, rgba(5,193,255,1) 83%, rgba(0,0,0,1) 100%); /* w3c */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#FF0000',GradientType=1 ); /* ie6-9 */
}
.cssWord_Letter{
	float:left;
	width:20px;
	height:25px;
	border-style: solid;
	border-width: 2px ;
	border-color: #232323 ;
	border-radius:6px;
	margin:1px;
}