[Summary view] [Print] [Text view]

   1  /**
   2   * BxSlider v4.0 - Fully loaded, responsive content slider
   3   * http://bxslider.com
   4   *
   5   * Written by: Steven Wanderski, 2012
   6   * http://stevenwanderski.com
   7   * (while drinking Belgian ales and listening to jazz)
   8   *
   9   * CEO and founder of bxCreative, LTD
  10   * http://bxcreative.com
  11  */
  12  
  13  
  14  /** RESET AND LAYOUT
  15  ===================================*/
  16  
  17  .bx-wrapper {
  18      position: relative;
  19      margin: 0 auto 60px;
  20      padding: 0;
  21      *zoom: 1;
  22  }
  23  
  24  .bx-wrapper img {
  25      max-width: 100%;
  26      display: block;
  27  }
  28  
  29  /** THEME
  30  ===================================*/
  31  
  32  .bx-wrapper .bx-viewport {
  33      left: -5px;
  34  }
  35  
  36  .bx-wrapper .bx-pager,
  37  .bx-wrapper .bx-controls-auto {
  38      position: absolute;
  39      bottom: -30px;
  40      width: 100%;
  41  }
  42  
  43  /* LOADER */
  44  
  45  .bx-wrapper .bx-loading {
  46      min-height: 50px;
  47      background: url(images/bx_loader.gif) center center no-repeat #fff;
  48      height: 100%;
  49      width: 100%;
  50      position: absolute;
  51      top: 0;
  52      left: 0;
  53      z-index: 2000;
  54  }
  55  
  56  /* PAGER */
  57  
  58  .bx-wrapper .bx-pager {
  59      text-align: center;
  60      font-size: .85em;
  61      font-family: Arial;
  62      font-weight: bold;
  63      color: #666;
  64      padding-top: 20px;
  65  }
  66  
  67  .bx-wrapper .bx-pager .bx-pager-item,
  68  .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  69      display: inline-block;
  70      *zoom: 1;
  71      *display: inline;
  72  }
  73  
  74  .bx-wrapper .bx-pager.bx-default-pager a {
  75      background: #666;
  76      text-indent: -9999px;
  77      display: block;
  78      width: 20px;
  79      height: 20px;
  80      margin: 0 5px;
  81      outline: 0;
  82      background: url(images/controls.png) no-repeat -76px -30px;
  83  }
  84  
  85  .bx-wrapper .bx-pager.bx-default-pager a:hover,
  86  .bx-wrapper .bx-pager.bx-default-pager a.active {
  87      background: #000;
  88      background: url(images/controls.png) no-repeat -76px -7px;
  89  }
  90  
  91  /* DIRECTION CONTROLS (NEXT / PREV) */
  92  
  93  .bx-wrapper .bx-prev {
  94      left: -42px;
  95      background: url(images/controls.png) no-repeat 0 -32px;
  96      opacity: 0.5;
  97  }
  98  
  99  .bx-wrapper .bx-next {
 100      right: -34px;
 101      background: url(images/controls.png) no-repeat -43px -32px;
 102      opacity: 0.5;
 103  }
 104  
 105  .bx-wrapper .bx-prev:hover {
 106      background-position: 0 0;
 107  }
 108  
 109  .bx-wrapper .bx-next:hover {
 110      background-position: -43px 0;
 111  }
 112  
 113  .bx-wrapper .bx-controls-direction a {
 114      position: absolute;
 115      top: 50%;
 116      margin-top: -16px;
 117      outline: 0;
 118      width: 32px;
 119      height: 32px;
 120      text-indent: -9999px;
 121      z-index: 9999;
 122  }
 123  
 124  .bx-wrapper .bx-controls-direction a.disabled {
 125      display: none;
 126  }
 127  
 128  /* AUTO CONTROLS (START / STOP) */
 129  
 130  .bx-wrapper .bx-controls-auto {
 131      text-align: center;
 132  }
 133  
 134  .bx-wrapper .bx-controls-auto .bx-start {
 135      display: block;
 136      text-indent: -9999px;
 137      width: 10px;
 138      height: 11px;
 139      outline: 0;
 140      background: url(images/controls.png) -86px -11px no-repeat;
 141      margin: 0 3px;
 142  }
 143  
 144  .bx-wrapper .bx-controls-auto .bx-start:hover,
 145  .bx-wrapper .bx-controls-auto .bx-start.active {
 146      background-position: -86px 0;
 147  }
 148  
 149  .bx-wrapper .bx-controls-auto .bx-stop {
 150      display: block;
 151      text-indent: -9999px;
 152      width: 9px;
 153      height: 11px;
 154      outline: 0;
 155      background: url(images/controls.png) -86px -44px no-repeat;
 156      margin: 0 3px;
 157  }
 158  
 159  .bx-wrapper .bx-controls-auto .bx-stop:hover,
 160  .bx-wrapper .bx-controls-auto .bx-stop.active {
 161      background-position: -86px -33px;
 162  }
 163  
 164  /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
 165  
 166  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
 167      /*text-align: left;*/
 168      width: 80%;
 169  }
 170  
 171  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
 172      right: 0;
 173      width: 35px;
 174  }
 175  
 176  /* IMAGE CAPTIONS */
 177  
 178  .bx-wrapper .bx-caption {
 179      position: absolute;
 180      bottom: 0;
 181      left: 0;
 182      background: #666\9;
 183      background: rgba(80, 80, 80, 0.75);
 184      width: 100%;
 185  }
 186  
 187  .bx-wrapper .bx-caption span {
 188      color: #fff;
 189      font-family: Arial;
 190      display: block;
 191      font-size: .85em;
 192      padding: 10px;
 193  }
 194  
 195  /******************************************************************************************/
 196  /********* CUSTOMIZATION *****************************************************************/
 197  /******************************************************************************************/
 198  
 199  body{
 200      background-color: #eee;
 201      background: url(images/wall1.jpg) no-repeat center center fixed; 
 202      -webkit-background-size: cover;
 203      -moz-background-size: cover;
 204      -o-background-size: cover;
 205      background-size: cover;
 206  }
 207  .login-container{
 208      min-width: 960px;
 209  }
 210  /*
 211  .navbar{
 212      bottom: 0 !important;
 213      min-width: 980px;
 214  }*/
 215  
 216  .logo{
 217      margin-top: 15px;
 218      margin-bottom:15px;
 219      float: left;
 220  }
 221  
 222  .login-header{
 223      margin-top:0px;
 224      border-bottom: 2px #ccc solid;
 225      padding-left:25px;
 226      padding-bottom: 5px;
 227  }
 228  .content-wrapper{
 229      height: 100%;
 230      clear: both;
 231      min-width: 940px;
 232      margin-top: 1%;
 233  
 234  }
 235  .login-area{
 236      float: left;
 237      display: inline-block;
 238      margin-top: 10%;    
 239      margin-left: 5%;
 240  }
 241  .carousal-container{
 242      float: right;
 243      width: 550px;
 244      display: inline-block;
 245  }
 246  .login-box{
 247      background-color: #fff;
 248      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 249      border-radius: 4px;
 250      text-align: left;
 251      padding:20px;
 252      width:450px;
 253      height: 250px;
 254      border: 1px solid #ddd;
 255  }
 256  .login-form{
 257      margin-top: 25px;
 258  } 
 259  
 260  .footer-content{
 261      margin: 10px 0;
 262  }
 263  .footer-icons{
 264      margin: 10px 0;
 265      width:50%;
 266      text-align: right;
 267      min-width: 280px;
 268  }
 269  .sbutton{
 270      width:100px;
 271  } 
 272  .login-subscript{
 273      text-align: right;
 274  }
 275  .bxslider{
 276      margin: 0;
 277  }
 278  .slide{
 279      padding: 2%;
 280      min-width: 550px;
 281      min-height: 200px;
 282      text-align: center;
 283      vertical-align: middle;
 284      width: 550px\9;
 285  }
 286  .slide img{
 287      display: inline-block;
 288  }
 289  .helpLinks{
 290      float: right; 
 291      margin-top: 20px;
 292      background: #efefef;
 293      border: 1px solid #fff;
 294      padding: 5px;
 295      border-radius: 5px;
 296      box-shadow: -2px 0 3px;
 297  }
 298  .helpLinks a{
 299      padding: 10px; 
 300  }
 301  a:hover{
 302      text-decoration: none;
 303      cursor: pointer;
 304  }
 305  /******************************************/
 306  
 307  @media (max-width: 1150px) {
 308      .carousal-container {
 309      display: none;
 310      }
 311      .login-area{
 312      margin-left: 0;
 313      }
 314  }
 315  @media (min-width: 1151px) {
 316      .carousal-container {
 317      display: inline-block;
 318      }
 319      .login-area{
 320      margin-left: 5%;
 321      }
 322  }