body {
	
  	background-color: #002C67;
	
	background-image: url('images/bg.jpg'), url('images/set-grad.jpg'), url('images/sand-tile-trans.jpg');
	
	background-repeat: no-repeat, repeat-x, repeat-x;
	
	background-position: center top, center top, center bottom;
	
	margin: 0 auto;
	
	padding: 0;
	
	font-family: Arial, Helvetica, sans-serif;
	
	font-size: 84%;
	
}

div {
	/**border-radius:5px;*/
}

#wrapper {

	margin: 0 auto;
	
	padding: 0px;

	width: 960px;
	
	background-color: transparent;
	
	
	
}

#header {
	
	width: 960px;
	
}

#content-wrapper {

	width: 960px;
	
	background-color: rgba(255,255,255,0.25);
	
	margin-bottom: 20px;
	
	padding-top:20px;
	
	padding-bottom:20px;
	
	border-top-right-radius:0px;
	
	border-top-left-radius:0px;
	
	overflow:hidden;
	
	height:1%;
}

#slideshow {

	width: 500px;
	
	height: 332px;
	
	margin-left: 20px;
	
	margin-bottom: 10px;
	
	background-color: white;
	
	float: left;

}

#titlebar {

	/*border:2px solid #a1a1a1;
	
	
	
	border-radius:25px;
	
	*/
	
	background:#f4f4f4;
	
	padding:10px 40px;
	
	width: 320px;
	
	height: 310px;
	
	margin-left: 20px;
	
	float: left;
}

#content {

	/*border:2px solid #a1a1a1;*/
	
	background-color: #f4f4f4;

	width: 675px;
	
	float: left;
	
	margin-left: 20px;
	
	margin-top: 10px;
	
	padding: 14px;

}

#side-bar{

	float: left;
	
	clear: both;
	
	width: 200px;
	
	padding:0px;
	
	margin-left: 20px;

}



#side-bar-top{

	border:2px solid #a1a1a1;
	
	background-color: #f4f4f4;
	
	border-right: 1px solid #bbb;
	
	border-bottom: 1px solid #bbb;
	
	border-left: 1px solid #ddd;
	
	border-top: 1px solid #ddd;

	margin-top: 20px;

	width: 180px;
	
	padding: 10px;

	float: left;
	
	clear: both;
	
}

#thumbnail {
	
	width: 100px;
}

/*

#side-bar-bottom{

	border:2px solid #a1a1a1;
	
	background-color: #f4f4f4;
	
	border-right: 1px solid #bbb;
	
	border-bottom: 1px solid #bbb;
	
	border-left: 1px solid #ddd;
	
	border-top: 1px solid #ddd;
	
	border-top-right-radius:0px;
	
	border-bottom-right-radius:0px;
	
	margin-top: 20px;
	
	padding-top: 15px;
	
	padding-left: 15px;

	width: 185px;

	float: left;
	
	clear: both;
	
}

*/

#footer {

	width: 940px;
	
	background-color: rgba(255,255,255,0.25);
	
	text-align: center;
	
	padding: 10px;
	
	color: white;

	margin-bottom: 80px;
}

.box {

	float: left;
	
	width: 200px;
	
	padding-bottom:10px;	
	
	margin-top: 10px;
	
	background-color: #b3d9ff;


}

.box hr{
	width:160px;
	margin-left:20px;
	

}

.boxvariable {

	float: left;
	
	padding: 10px;
	
	width: 180px;
	
	margin-top: 10px;
	
	box-shadow: 5px 5px 5px black;
	
	background-color: #96c0e7;

}

#nav {
	background: #1a406e;
	clear: both;
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
}

#nav ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

#nav ul li {
  font: bold 12px/18px sans-serif;
  margin:0;
  display: inline-block;
  position: relative;
  padding: 15px 20px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  z-index: 200;

}

#nav ul li a {
	color: white;
}

#nav ul li:hover a {
	color: white;
}

#nav ul li:hover {
  background: #555;
  color: #fff;
}

#nav ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

#nav ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}

#nav ul li ul li:hover { background: #666; }

#nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}


 /* Slideshow
-------------------------------------------------------------- */

.fadein { position:relative; width:500px; height:332px; margin: 0 auto;}

.fadein img { position:absolute; left:0; top:0; width: 500px; height: 332px;}

/* OLD MENU

#nav {

	width: 960px;

	font-family: arial, sans-serif;
	 
    position: relative;
	
    height:56px;
	 
    font-size:14px;
	 
    color:#999;
	 
    margin: 0px auto;
	
	padding: 0px;
	 
	background-color: #1a406e;
}
 
#nav ul {

    list-style-type: none;
	 
}
 
#nav ul li {

    float: left;
	 
    position: relative;
}
 
#nav ul li a {

    text-align: center;
	 
    border-right:1px solid #e9e9e9;
	 
    padding:20px;
	 
    display:block;
	 
    text-decoration:none;
	 
    color:#999;
	 
}
 
#nav ul li:hover {
	
	background-color: red;
	 
    position: relative;
	 
}

#nav ul li:hover ul li a {

    display:block;
	 
    background-color:red;
	 
    color:#ffffff;
	 
    width: 110px;
	 
    text-align: center;
	 
    border-bottom: 1px solid #f2f2f2;
	 
    border-right: none;
}

*/
 
 /* Nodes
-------------------------------------------------------------- */
.node {
border-bottom: 1px solid #bbb;
margin: 20px 0;
padding-bottom:15px;
}

.content-top{
border-bottom: 1px solid #bbb;
border-right: 1px solid #bbb;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
background-color: #f4f4f4;
margin:0 0 20px;
}

.content-top .block-title {
margin-top:15px;
}

.content-top .region {
margin:15px;
}

.content-middle .block-system {
margin:0;
}

.content-middle .block-block {
margin:0;
}

.content-middle .block-block .block-title{
margin-top:15px;
}

.content-middle .block-block .content {
margin:15px 0;
}

.content-bottom {
border-bottom: 1px solid #bbb;
border-right: 1px solid #bbb;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
background-color: #f4f4f4;
margin:20px 0 0;
}

.content-bottom .block-title {
margin-top:15px;
}

.content-bottom .region {
margin:15px;
}

.title, .title a {
margin: 0 auto;
line-height: 1.2em;
}

.node .content, .comment .content {
margin: .5em 0 .5em;
}

.node .taxonomy {
color: #999;
font-size: 0.9em;
padding-left: 1em;
}

.node .user-picture, .comment .user-picture {
float: right;
margin-left: 10px;
}

.node .user-picture img, .comment .user-picture img {
width:60px;
}

.node-book .links {
padding-top:5px;
}

.preview .node, .preview .comment{
background-color: #f4f4f4;;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 0.8em;
}

.submitted {
font-size: 0.9em;
color: #999;
}

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

.node-sticky {
padding: 1em;
background-color: #f4f4f4;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
margin:0;
}

.messages {
background-color: #f4f4f4;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 0.3em;
margin-bottom: 1em;
}

a:link {
color: #005a8c;/*#e87e17*/
text-decoration: none;
font-weight: bold;
}

a:visited {
color: #005a8c;/*#e87e17*/
text-decoration: none;
font-weight: bold;
}

a:hover {
text-decoration: underline;
}

.site-name a:hover {
text-decoration: none;
}

.comment .new {
text-align: right; /* LTR */
font-weight: bold;
float: right; /* LTR */
color: red;
margin:.5em;
}

.comment .title {
line-height: 1.2em;
}

.comment .title a:hover {
text-decoration: none;
}

$one-second: 1s;
$easing: cubic-bezier(1,0,1,0);
/* =========================================== */

@mixin animate($count) {
  $step: (100 / $count);
  $progress: 0%;
  $translate: -$digit-height;
  @while $progress < 100 {
    #{$progress} { transform: translateY($translate); }
    $progress: $progress + $step;
    $translate: $translate - $digit-height;
  }
}

$digit-height: 180px;

.digit {
  display: inline-block;
  font-size: 200px;
  color: rgba(0,0,0,0.25);
  height: $digit-height;
  line-height: 1;
}

.time-part-wrapper {
  display: inline-block;
  margin-right: 50px;
  position: relative;

  &:not(:last-child):after {
    content: ":";
    display: block;
    width: 30px;
    height: 230px;
    position: absolute;
    top: 0px;
    right: -30px;
    color: rgba(0,0,0,0.25);
    font-size: 200px;
    line-height: 0.9;
  }
}

.time-part {
  width: 140px;
  text-align: center;
  height: $digit-height;
  overflow: hidden;
  display: inline-block;
  margin-left: -5px;
  box-sizing: border-box;
  
  .digit-wrapper {
    animation-timing-function: $easing;
  }
  
  &.minutes {
    &.tens .digit-wrapper {
      animation-name: minutes-tens;
      animation-duration: $one-second * 10 * 6 * 10 * 6;
      animation-iteration-count: 1;
    }
    &.ones .digit-wrapper {
      animation-name: minutes-ones;
      animation-duration: $one-second * 10 * 6 * 10;
      animation-iteration-count: 6;
    }
  }
  
  &.seconds {
    &.tens .digit-wrapper {
      animation-name: seconds-tens;
      animation-duration: $one-second * 10 * 6;
      animation-iteration-count: 60;
    }
    &.ones .digit-wrapper {
      animation-name: seconds-ones;
      animation-duration: $one-second * 10;
      animation-iteration-count: 360;
    }
  }
  
  &.hundredths {
    &.tens .digit-wrapper {
      animation-name: hundredths-tens;
      animation-duration: $one-second;
      animation-iteration-count: 3600;
    }
    &.ones .digit-wrapper {
      animation-name: hundredths-ones;
      animation-duration: $one-second / 10;
      animation-iteration-count: 36000;
    }
  }
}

@keyframes minutes-tens {
  @include animate(6);
}
@keyframes minutes-ones {
  @include animate(10);
}

@keyframes seconds-tens {
  @include animate(6);
}
@keyframes seconds-ones {
  @include animate(10);
}

@keyframes hundredths-tens {
  @include animate(10);
}
@keyframes hundredths-ones {
  @include animate(10);
}