/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2014-11-17, 22:23:12
    Author     : Lynn
*/

    /* GLOBAL STYLES
    -------------------------------------------------- */
    /* Padding below the footer and lighter body text */

    body {
      padding-bottom: 40px;
      color: #5a5a5a;
    }

	#upload-progress{
		height: 20px;
		border: 1px solid #ddd;
		width: 100%;
		margin-top: 20px;
	}

	#upload-progress .progress-bar{
		background: #bde1ff;
		width: 0;
		height: 20px;
	}

    /* jssor slider bullet navigator skin 21 css */
     /*
     .jssorb21 div           (normal)
     .jssorb21 div:hover     (normal mouseover)
     .jssorb21 .av           (active)
     .jssorb21 .av:hover     (active mouseover)
     .jssorb21 .dn           (mousedown)
     */
     .jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
         background: url(../../images/b21.png) no-repeat;
         overflow: hidden;
         cursor: pointer;
     }

     .jssorb21 div {
         background-position: -5px -5px;
     }

         .jssorb21 div:hover, .jssorb21 .av:hover {
             background-position: -35px -5px;
         }

     .jssorb21 .av {
         background-position: -65px -5px;
     }

     .jssorb21 .dn, .jssorb21 .dn:hover {
         background-position: -95px -5px;
     }
     
     /* Bullet Navigator Skin End */
       /* Arrow Navigator Skin Begin */
    /* jssor slider arrow navigator skin 21 css */
    /*
    .jssora21l              (normal)
    .jssora21r              (normal)
    .jssora21l:hover        (normal mouseover)
    .jssora21r:hover        (normal mouseover)
    .jssora21ldn            (mousedown)
    .jssora21rdn            (mousedown)
    */
    .jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn {
        position: absolute;
        cursor: pointer;
        display: block;
        background: url(../../images/a02.png) center center no-repeat;
        overflow: hidden;
    }

    .jssora21l {
        background-position: -3px -33px;
    }

    .jssora21r {
        background-position: -63px -33px;
    }

    .jssora21l:hover {
        background-position: -123px -33px;
    }

    .jssora21r:hover {
        background-position: -183px -33px;
    }

    .jssora21ldn {
        background-position: -243px -33px;
    }

    .jssora21rdn {
        background-position: -303px -33px;
    }



    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */

      /* use navbar-wrapper to wrap navigation bar, the purpose is to overlay navigation bar above slider */
        .navbar-wrapper {                                                 
            position: absolute;
            top: 20px;
            left: 0;
            width: 100%;
            height: 51px;
        }
        .navbar-wrapper > .container {  
            padding: 0;
        }

       /* customized the nav bar color */
        .navbar-inverse {
            background-color: rgba(29, 22, 22, 0.59);
            border-color: #080808;
        }
        
        /* customized the website title color */
        .navbar-inverse .navbar-brand {
            font-weight: bold;
            font-size: 24px;
            color: #FFFFFF;
        }
        
              
        
        @media all and (max-width: 768px ){
            .navbar-wrapper {  
                position: relative;
                top: 0px;
            }
        }
    
    
    /* Special class on .container surrounding .navbar, used for positioning it into place. */
    /*
    .navbar-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      margin-top: 20px;
      margin-bottom: -90px; //Negative margin to pull up carousel. 90px is roughly margins and height of navbar.
    }
    .navbar-wrapper .navbar {

    }
*/
    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
      border: 0;
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
         -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }

    /* Downsize the brand/project name a bit */
    .navbar .brand {
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
      font-size: 24px;
        color: #FFFFFF;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
      padding: 15px 20px;
    }

    /* Offset the responsive button for proper vertical alignment */
    .navbar .btn-navbar {
      margin-top: 10px;
    }



    /* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */

    /* Carousel base class */
    .carousel {
      margin-bottom: 60px;
    }

    .carousel .container {
      position: relative;
      z-index: 9;
    }

   
    .carousel-control {
      height: 80px;
      margin-top: 420px;
      font-size: 120px;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      background-color: transparent;
      border: 0;
      z-index: 10;
    }

    .carousel .item {
      height: 500px;
    }
    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 500px;
    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 550px;
      padding: 0 20px;
      margin-top: 200px;
    }
    .carousel-caption h1,
    .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }
    .carousel-caption .btn {
      margin-top: 10px;
    }



    /* MARKETING CONTENT
    -------------------------------------------------- */
    /* Carousel base class */
    .marketing {
      margin-top: 20px;
      text-align: center;
    }
    
    /* Center align the text within the three columns below the carousel */
    .marketing .span4 {
      text-align: center;
    }
    .marketing h2 {
      font-weight: normal;
    }
    .marketing .span4 p {
      margin-left: 10px;
      margin-right: 10px;
    }


    /* Featurettes
    ------------------------- */

    .featurette-divider {
      margin: 80px 0; /* Space out the Bootstrap <hr> more */
    }
    .featurette {
      padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
      overflow: hidden; /* Vertically center images part 2: clear their floats. */
    }
    .featurette-image {
      margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
    }

    /* Give some space on the sides of the floated elements so text doesn't run right into it. */
    .featurette-image.pull-left {
      margin-right: 40px;
    }
    .featurette-image.pull-right {
      margin-left: 40px;
    }

    /* Thin out the marketing headings */
    .featurette-heading {
      font-size: 50px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -1px;
    }



    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {
        border-radius: 0;
        margin: -20px 0;
      }

      .carousel .item {
        height: 500px;
      }
      .carousel img {
        width: auto;
        height: 500px;
      }

      .featurette {
        height: auto;
        padding: 0;
      }
      .featurette-image.pull-left,
      .featurette-image.pull-right {
        display: block;
        float: none;
        max-width: 40%;
        margin: 0 auto 20px;
      }
    }


    @media (max-width: 767px) {

      .navbar-inner {
        margin: -20px;
      }

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }
      .carousel .container {

      }
      .carousel .item {
        height: 300px;
      }
      .carousel img {
        height: 300px;
      }
      .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-top: 100px;
      }
      .carousel-caption h1 {
        font-size: 30px;
      }
      .carousel-caption .lead,
      .carousel-caption .btn {
        font-size: 18px;
      }

      .marketing .span4 + .span4 {
        margin-top: 40px;
      }

      .featurette-heading {
        font-size: 30px;
      }
      .featurette .lead {
        font-size: 18px;
        line-height: 1.5;
      }

    }
    
    
    .emailMessagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  right:95px;
  top:30px;
  text-align:left;
  width:300px;
  z-index:9999911;
  padding: 25px 25px 20px;
}

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  right:75px;
  top:30px;
  text-align:left;
  width:300px;
  z-index:9999912;
  padding: 25px 25px 20px;
}
.share-icons-sidebar{position:fixed;display:block;top:310px;left:0;width:40px;height:240px}
@media only screen and (max-width:1080px){.ad_title_share{display:none}.share-icons-sidebar{display:none}}
.share-icon{
    display:inline-block;
    float:left;
    margin:4px;
    width:32px;
    height:32px;
    cursor:pointer;
    vertical-align:middle;
    background-image:url(https://www.jssor.com/img/share/share-icons.png)
}
.share-facebook{background-position:0 0}
.share-facebook:hover{background-position:0 -40px}
.share-twitter{background-position:-40px 0}
.share-twitter:hover{background-position:-40px -40px}
.share-pinterest{background-position:-80px 0}
.share-pinterest:hover{background-position:-80px -40px}
.share-linkedin{background-position:-240px 0}
.share-linkedin:hover{background-position:-240px -40px}
.share-googleplus{background-position:-120px 0}
.share-googleplus:hover{background-position:-120px -40px}
.share-stumbleupon{background-position:-360px 0}
.share-stumbleupon:hover{background-position:-360px -40px}
.share-email{background-position:-320px 0}
.share-email:hover{background-position:-320px -40px}

.vertline{vertical-align:middle;box-shadow:inset 1px 0 #ffffff;}

/* Credit to bootsnipp.com for the css for the color graph */
.colorgraph {
  height: 5px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
}

.caret-up {
    width: 0; 
    height: 0; 
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid;
    
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
}


.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

.h-divider{
    margin-top:15px;
    margin-bottom:15px;
    height:1px;
    width:100%;
    border-bottom: 1px solid #dedede;
 }
 
 #title{
    font-family: Verdana, Georgia,Sans-serif;
    color:#ffffff;
    font-weight: bold;
    font-size: 18px;
    margin-left:5px
}

.web_title{
    font-family: Verdana, Georgia,Sans-serif;
    color:#ffffff;
    font-weight: bold;
    font-size: 40px
}

.web_sub_title{
    font-family: Verdana, Georgia,Sans-serif;
    color:#ffffff;
    font-size:15px;
    margin-left:15px
}

#banner{
    height:100px;
	width: 1024px;
	margin-top: 0px;
	background-color: transparent;
	margin: 0px;
    border-right-width: 0px;
    border-right-color: #000C45;
    border-right-style: solid
}

a.langLink, a.langLink:link, a.langLink:visited{
	z-index: 1000;
    text-decoration:none;
    font-family:Verdana, Georgia,Sans-serif;
    font-size:14px;
    color:#ffffff;
    text-align:center
}

a.langLink:hover{
	z-index: 1000;
    text-decoration:underline
}

#content{
    width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 300;
    background: rgba(0,0,0,0.7);
    overflow: hidden;
    padding: 10px 10px;
    border-left: 10px solid rgba(255,255,255,0.2);
    border-right: 10px solid rgba(255,255,255,0.2);
 }
 
 #footer{
    width: 900px;
    height: 10px;
    position: relative;
    margin: 0 auto;
    border-top: 2px solid rgba(255,255,255,0.2);
    border-bottom: 5px solid rgba(255,255,255,0.2);
}
 
.calendarWeekend
{
    border-right: #339900 1px solid;
    border-top: #339900 1px solid;
    border-left: #339900 1px;
    border-bottom: #339900 1px;
    background-color: #fff3c4;
    color: #333366
}
.calendarEvent
{
    border-right: #ac552b solid;
    border-top: #fff8d9 solid;
    font-size: x-small;
    border-left: #fff8d9 solid;
    border-bottom: #ac552b solid;
    font-family: verdana, arial, helvetica, sans-serif;
    background-color: #ffcc00
}
.calendarInactive
{
    border-right: #339900 thin solid;
    border-top: thin solid;
    font-size: x-small;
    border-left: #339900 thin;
    border-bottom: #339900 thin;
    font-family: geneva, arial, helvetica, sans-serif;
    background-color: #eeeeee;
    color: #333366
}
.calendarActive
{
    border-right: #339900 thin solid;
    border-top: #339900 thin solid;
    border-left: #339900 thin;
    border-bottom: #339900 thin;
    background-color: #efffdf;
    color: #333366
}
.calendarCaption
{
    font-weight: bold;
    font-size: 10px;
    color: #ffffff;
    font-style: normal;
    font-family: arial, helvetica, sans-serif;
    background-color: #333366
}
.calendarOuterBorder
{
    border-left-color: #009900;
    border-bottom-color: #009900;
    border-left-style: solid;
    border-bottom-style: solid
}

.paginate a:link, .paginate a:visited, .paginate a:active{
	text-decoration:none;
    display: block;
    height: 17px;
	width:20px;
	font-size:12px;
	font-weight:bold;
    color:#FFFFFF;
	background-color:#8A8A8A;
    float:left;
	padding-top:1px;
    margin:1px;
	text-align:center
	}
    
  .current_paginate a:visited,.current_paginate a:link{
    text-decoration:none;
    display: block;
    height: 17px;
	width:20px;
	font-size:12px;
	font-weight:bold;
    color:#8A8A8A;
	float:left;
	padding-top:1px;
    margin:1px;
	text-align:center
	}   
	
.paginate a:hover, .current_paginate a:hover{
	background-color:#BEB9B5;
    text-decoration:none;
    display: block;
    height: 17px;
	width:20px;
	font-size:12px;
	font-weight:bold;
    color:#FFFFFF;
	float:left;
	padding-top:1px;
    margin:1px;
	text-align:center
}

.pageTotal{
	display: block;
    height: 17px;
	width:30px;
	font-size:12px;
	font-weight:bold;
    color:#8A8A8A;
	float:left;
	padding-top:1px;
    margin:1px;
	text-align:center
}


.sortLink a:link, .sortLink a:visited, .sortLink a:active{
	display: block;
    text-decoration:none;
    color:#FFFFFF;
    height: 17px;
	width:60px;
	font-size:12px;
	font-weight:bold;
	background-color:#8A8A8A;
    outline:1px solid #BEB9B5;
    float:left;
	padding-top:2px;
    margin:1px;
	text-align:center
}

.sortLink a:hover{
	background-color: #BEB9B5;
    color: #8A8A8A;
    outline:1px solid #8A8A8A
}

a.addToCart, a.addToCart:link, a.addToCart:visited{
	display: block;
    text-decoration:none;
    color:#FFFFFF;
    height: 25px;
	width:120px;
	font-size:16px;
	font-weight:bold;
	background-color:#8A8A8A;
    outline:1px solid #BEB9B5;
    float:left;
	padding-top:7px;
    margin:1px;
	text-align:center
}
    
 a.addToCart:hover,a.addToCart:active{
	background-color: #BEB9B5;
    color: #8A8A8A;
    outline:1px solid #8A8A8A
}


a.backToStore, a.backToStore:link, a.backToStore:visited{
	display: block;
    text-decoration:none;
    color:#FFFFFF;
    height: 25px;
	width:80px;
	font-size:16px;
	font-weight:bold;
	background-color:#8A8A8A;
    outline:1px solid #BEB9B5;
    float:left;
	padding-top:7px;
    margin:1px;
	text-align:center
}
    
 a.backToStore:hover,a.backToStore:active{
	background-color: #BEB9B5;
    color: #8A8A8A;
    outline:1px solid #8A8A8A
}

a.continueShopping, a.continueShopping:link, a.continueShopping:visited{
	display: block;
    text-decoration:none;
    color:#FFFFFF;
    height: 20px;
	width:160px;
	font-size:12px;
	font-weight:bold;
	background-color:#8A8A8A;
    outline:1px solid #BEB9B5;
    float:left;
	padding-top:7px;
    margin:1px;
	text-align:center
}
    
 a.continueShopping:hover,a.continueShopping:active{
	background-color: #BEB9B5;
    color: #8A8A8A;
    outline:1px solid #8A8A8A
}

a.checkOut, a.checkOut:link, a.checkOut:visited{
	display: block;
    text-decoration:none;
    color:#FFFFFF;
    height: 20px;
	width:120px;
	font-size:14px;
	font-weight:bold;
	background-color:#8A8A8A;
    outline:1px solid #BEB9B5;
    float:left;
	padding-top:7px;
    margin:1px;
	text-align:center
}
    
 a.checkOut:hover,a.checkOut:active{
	background-color: #BEB9B5;
    color: #8A8A8A;
    outline:1px solid #8A8A8A
}

.thText{
    font-family: Verdana, Georgia,Sans-serif;
    font-size:14px;
    font-weight:bold;
	color: #FFFFFF
}

a.viewCart, a.viewCart:link, a.viewCart:visited{
	display: block;
    text-decoration:none;
    color:#FFFFFF;
    height: 17px;
	width:80px;
	font-size:12px;
	font-weight:bold;
	background-color:#8A8A8A;
    outline:1px solid #BEB9B5;
    float:left;
	padding-top:2px;
    margin:1px;
	text-align:center
}
    
 a.viewCart:hover,a.viewCart:active{
	background-color: #BEB9B5;
    color: #8A8A8A;
    outline:1px solid #8A8A8A
}

a.deleteProduct, a.deleteProduct:link, a.deleteProduct:visited{
	display: block;
    text-decoration:none;
    font-family: Verdana, Georgia,Sans-serif;
    color: #FF0000;
    height: 15px;
	width:60px;
	font-size:12px;
	background-color:#FFFFFF;
    float:right;
	padding-top:0px;
    margin:1px;
	text-align:center
}
    
 a.deleteProduct:hover,a.deleteProduct:active{
	background-color: #FFFFFF;
    color: #FF0000;
    outline:1px solid #FF0000
}

.submitButton{
    display: block;
    background:#8A8A8A;
    color:white;
    border-style:outset;
    border-color:#BEB9B5;
    height:40px;
    font-size:14px;
    float:right;
    font-weight:bold;
    width:150px;font-family: Verdana, Georgia,Sans-serif;
    padding-top:0px;
    margin:1px;
	text-align:center
}

 a.link164, a.link164:link, a.link164:visited{
    text-decoration:none;
    font-family: Arial, serif;
    font-size:12px;
	color:#B22222;
	text-align:center
 }   
	
 a.link164:hover{
	text-decoration:underline;
}

a.prodNameLink, a.prodNameLink:link, a.prodNameLink:visited{
    background-color:#FFFFFF;
	text-decoration:none;
    font-family: Georgia, Courier, Arial, serif;
    font-size:12px;
	color:#000000;
	text-align:center
 }   
	
a.prodNameLink:hover{
    text-decoration:underline;
}

.blueLine{
  background: transparent url("https://www.zionhosting.com/english/images/h_line.gif") repeat-x;
}

.forErrors{
    font-family:Verdana, Georgia, Sans-serif;
    font-size:12px;
	color: #FF0000
}

.forCounter{
    font-family:Verdana, Georgia, Sans-serif;
    font-size:12px;
    color: #ffffff
}

.titleText{
    font-family:Verdana, Georgia, Sans-serif;
    font-size:12px;
    color: #808080
}

.contactTitleText{
    font-family:Verdana, Georgia, Sans-serif;
    font-size:12px;
    color: #000000
}

.contSubmit{
    display: block;
    background:#8A8A8A;
    color:white;
    border-style:outset;
    border-color:#BEB9B5;
    height:25px;
    font-size:12px;
    float:right;
    width:80px;font-family:Verdana, Georgia, Sans-serif;
    padding-top:0px;
    margin:1px;
	text-align:center
}

.contReset{
    display: block;
    background:#8A8A8A;
    color:white;
    border-style:outset;
    border-color:#BEB9B5;
    height:25px;
    font-size:12px;
    float:right;
    width:80px;font-family:Verdana, Georgia, Sans-serif;
    padding-top:0px;
    margin:1px;
	text-align:center
}

a.emailSelected {
  z-index:100
}

a.contSelected {
  z-index:110
}

.emailMessagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  right:75px;
  top:45px;
  text-align:left;
  width:300px;
  z-index:700;
  padding: 25px 25px 20px;
}

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  right:45px;
  top:45px;
  text-align:left;
  width:300px;
  z-index:700;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.arrow-up {
	width:0px; 
	height:0px; 
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-bottom:10px solid #8A8A8A
}

.arrow-down {
	width:0px; 
	height:0px; 
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-top:10px solid #8A8A8A
}