//DigitalAvant.com stylesheet.
//Author: Benjamin Knox
//ColorScheme1: http://colorschemedesigner.com/#0o11TtAkkw0w
//ColorScheme2: http://colorschemedesigner.com/#3.11TdP--w0w0

@nice-orange: #CC3300;
@dark-orange: #A2470C;
@nice-blue: #99CCFF;
@dark-blue: #326DA6;
@noserifs-font: Arial;
@serifs-font: georgia;

.opacity (@opacity: 0.5) {
	-webkit-opacity: @opacity;
	-moz-opacity: 	 @opacity;
	opacity:         @opacity;
}

.show{display: block !important;}

.change-color {
  transition-property: color;
  transition-duration: 1s;
  transition-timing-function: ease;
}

.change-color {
  transition-property: color;
  transition-duration: 1s;
  transition-timing-function: ease;
}

@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}

.rotateAnimate {
      -webkit-transition-property: -webkit-transform;
      -webkit-transition-duration: .1s;
      -moz-transition-property: -moz-transform;
      -moz-transition-duration: .1s;

      -webkit-animation-name: rotate; 
      -webkit-animation-duration: .2s; 
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -moz-animation-name: rotate; 
      -moz-animation-duration: .2s; 
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
}

HTML,BODY {
  background: #14285f;
}


#header {
  width: 100%;
  height: 180px;
  position: relative;
  margin-bottom: 3px;
  background: url('images/header_graphic.jpg') no-repeat -15px;
  background-color: black;  
  text-shadow: 0px 0px 20px @nice-orange;
  filter: dropshadow(color=@nice-orange, offx=0, offy=0);

  & #header-content {
    color: @nice-orange;
    font-family: @serifs-font;
    letter-spacing: 3px;
    position: absolute;
    top: 65px;
    left: 180px;

    & h1 {
      margin: 0;
      padding: 0;
      font: 18pt @noserifs-font; 
      letter-spacing: 5px;
      font-weight: bold;
    }
  }

  & .border {
    background: @nice-orange;
    width: 100%;
    position: absolute;
    left: 0;
  }

  & #big-border.border{
    height: 2px;
    bottom: -2px;
  }
  & #small-border.border{
    height: 1px;
    bottom: -5px;
  }
  
}

#content {
  margin: 13px 0 0 20px;

  #navigation.nav {
    color: @nice-blue;
    border-right: 1px solid #445DA0;
    
    & li > a {
      border-bottom: 1px dotted #445DA0;
      padding-left: 10px;
      height: 38px;
      line-height: 40px;
      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
      -moz-box-sizing: border-box;    /* Firefox, other Gecko */
      box-sizing: border-box;         /* Opera/IE 8+ */

      &:focus {
        background: none;
      }

    }

    & li:last-of-type > a{
      border-bottom: 0;
    }

    & li >a:hover {
      color: @nice-blue;
      background: none;
      border-bottom: 1px dotted #a2470c;
      border-left: 0;
      border-right: 0;
      line-height: 40px;
    }
  }

  & .html-content {
    display: none;
    padding-left: 19px;

    & a {
      text-decoration: underline !important;
    }

    & h2, & h3 {
      color: @dark-blue;	
      margin-bottom: 3px;
    }

    & p {
      color: @nice-blue;
      text-align: justify;
      letter-spacing: 2px;
      font-size: 10pt;
    }

    & .sub-content > .img {
      width: 300px;
      height: 200px;
      margin:0 auto 10px auto;
    }
      
    & .sub-content > #sc-screen-1 { 
      background: url('images/sc_screen_1.jpg') no-repeat;
    }

    & .sub-content > #sc-screen-2 { 
      background: url('images/sc_screen_2.jpg') no-repeat;
    }

  }
}

#image-section {

  padding: 35px 0 0 15px;

  & .image-wrapper {
    margin-bottom: 20px;
    width: 110px;
    cursor: pointer;
    overflow: hidden;

    .opacity(.8);

    & .title {
      text-align: center;
      font-family: @serifs-font;
      font-weight: bold;
      color: @nice-blue;
    }

    & .image {
      width: 100%;
    }
  }

  & .image-wrapper:hover{
    .opacity(1);
  }

  #iphone-image > img{
    margin-left: -4px;
  }

}

#footer {
  width: 100%;
  margin: 30px 0;
  color: @dark-blue;
  text-align: center;
}