﻿/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Contents
==================================================
    #Base 1372 Grid
    #Tablet (Landscape) and old computers 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 1372 Grid
================================================== */

body {
    margin:0px;
    padding:0px;
    font-family:Arial;
    font-size:12px;
    text-align:left;
}

.container {
    width: 70%;
	margin-left:15%;
	margin-right:15%;
    height:700px;
    margin: 0 auto;
    padding: 0;
    direction:ltr;
    background:url("imgs/back.gif");
    background-repeat:no-repeat;
    background-position:top center;
    /*background-color:#70B8DF;
    background-image: linear-gradient(to top, #FFFFFF 0%, #70B8DF 100%);*/
}

.internal_container {
    position: relative;
    width: 470px;
    height:476px;
    margin: 0 auto;
    padding: 0;
    direction:ltr;
    background-color:white;
    border:1px solid #edeae3;
}

.int_con1 {
    width:100%;
    height:100%;
    background:url("imgs/pattern_down.gif");
    background-repeat:repeat-x;
    background-position:left bottom;
}

.simple {
    width: 100%;
}

.oneIcon {
    float: left;
    width: 130px;
    height: 100px;
}



.internal_container_in {
    position: relative;
    width: 670px;
    height:500px;
    margin: 0 auto;
    padding: 0;
    direction:rtl;
    background-color:white;
    border:1px solid #edeae3;
}

.topMenu {
    width: 100%;
    height: 74px;
    /*background: url('imgs/pattern_blue.gif');*/
    background-color:#04325D;
    background-image: linear-gradient(to top, #080841 0%, #04325D 100%);
}

.topLogo {
    float: left;
    width: 45%;
    margin-left: 5%;
    padding-top: 10px;
}

.topLang {
    float: right;
    width: 45%;
    margin-right: 5%;
    padding-top: 10px;
    font-family: Arial;
    font-size: 12px;
}

.panel {
    width:100%;
    float:left;
}

.topLang1 {
    float: right;
    width: 48%;
    margin-right: 2%;
    padding-top: 10px;
    font-family: Arial;
    font-size: 12px;
    text-align:right;
}

.welcomeInner {
    background: url('imgs/back_text.gif');
    height: 59px;
    background-repeat: no-repeat;
    background-position: 2px top;
    text-align: center;
}

.welcome1 {
    color: #00174a;
    margin-top: 3px;
}

.welcome2 {
    color: #948771;
    font-size: 14px;
    font-weight: bold;
    margin-top: 3px;
}

.welcome3 {
    color: #948771;
    font-weight: bold;
    margin-top: 3px;
}

.iconsArea {
    float: left;
    width: 670px;
    font-family: arial;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #000e44;
    margin-top: 20px;
}

.English {
    float: right;
    color: #c5ae8f;
    margin-left: 5px;
}

.Hebrew {
    float: right;
    color: #FFFFFF;
}

.upperPattern {
    width: 100%;
    height: 32px;
    /*background: url('imgs/pattern_up.gif');*/
    background-color:#ECE6DD;
    background-image: linear-gradient(to top, #FFFFFF 0%, #ECE6DD 100%);
}

.fields {
    width: 284px;
    height: 242px;
    margin-left: 93px;
    margin-right: 93px;
}

.fieldsTitle {
    width: 100%;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    color: #948771;
    height: 25px;
}

.fieldsTitleRed {
    width: 100%;
    font-family: Arial;
    font-size: 12px;
    color: #943700;
    height: 25px;
}

.fieldLabel {
    width: 100%;
    font-family: Arial;
    font-size: 14px;
    color: #030343;
    height: 20px;
    padding-top: 5px;
}

.fieldInput {
    width: 100%;
    height: 25px;
}

input.field {
    width: 100%;
    height: 25px;
    border: 1px solid #c6c0b7;
    font-family: Arial;
    color: #666666;
    font-size: 14px;
}

select.field {
    width: 100%;
    height: 25px;
    border: 1px solid #c6c0b7;
    font-family: Arial;
    color: #666666;
    font-size: 14px;
}

.enterArea {
    width: 100%;
    height: 60px;
    background: url('imgs/button.gif');
    background-position:right;
    margin-top: 10px;
}

.enterButton {
    float: right;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: white;
    margin-right: 53px;
    margin-top: 17px;
    cursor: pointer;
}

.forgotPW {
    float:left;
    width: 100%;
    font-family: Arial;
    font-size: 12px;
    color: #8d8370;
    text-decoration: underline;
}

.bottomPattern {
    float:left;
    width: 100%;
    height: 49px;
    /*background: url('imgs/pattern_down.gif');*/
    background-color:#ECE6DD;
    background-image: linear-gradient(to top, #ECE6DD 0%, #FFFFFF 100%);
}
    




    /* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 800px */

    @media only screen and (min-width: 800px) and (max-width:959px) {
        
        
}
         


         


/*  #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 600px */

    @media only screen and (min-width: 550px) and (max-width:799px) {
       

        .fieldsTitle {
        margin-top: 20px;
        margin-bottom: 10px;
    }
       
}


/* #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 420px */

@media only screen and (min-width: 320px) and (max-width: 549px) {
    .container {
        width: 100%;
        padding-top:0px;
    }

    .internal_container {
        width: 100%;
        margin-top:0px;
    }

    .fields {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }

    .topLogo {
        width:100%;
        text-align:center;
    }

    .topLang {
        display:none;
    }

    .enterButton {
    margin-right: 15px;
}

    .bottomPattern {
    width: 100%;
    height: 25px;
    background: url('imgs/pattern_down2.png');
    background-repeat:repeat-x;
    color:white;
    font-weight:bold;
    text-align:center;
    padding-top:8px;
    font-size:14px;
}

        .bottomPattern a {
            color: white;
            text-decoration:none;
            font-size:14px;
        }

    .fieldsTitle {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .iconsArea {
        width: 100%;
    }

    .oneIcon {
    float: left;
    width: 33%;
    height: 100px;
}

}

/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }

    .informationTextPink {
    float:left;
    width:75%;
    height:100%;
    font-family:Arial;
    font-size:12px;
    color:#FFFFFF;
    padding-top:20px;
}
