﻿
/*-----------------------------*/
/*  Open Design          */
/*-----------------------------*/

#OTopPage
{
    height: 140px;
    /*padding-top: 30px;*/
    width: 100%; 
    display: inline-block;
    overflow: hidden;
  
}

#OTopHeader
{
   height: 80px;
   padding-top: 30px;
   /*height: inherit;*/
   width: 100%;
   float: left; 
   padding-bottom: 0px;
   margin: 0px;
   
  /* Put this back when we are ready*/
  /*background-image: url('/Icons/tablet5_7_o.png'), url('/Icons/students8.png');*/
  
  background-position: right top, left top;
  background-repeat:no-repeat;
  display: inline-block;

}


#OMid_0
{
    width: auto;
    text-align: center;
    
    /* former height: 60px*/ 
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 0px;

    border-width: 1px 0px 0px 0px;
    border-style: solid;
    line-height: 20px;

    border-top-color: #CCCCCC;
    height: 5px;
    
    /*height: 80px;
    margin-top: 30px;*/

    height: 60px;
    /*margin-top: 30px;*/


    background: url('/Icons/pen4.png') center top;
    background-repeat: no-repeat;
    
    
}

#OMid_1
{ width: 100%;
  display: inline-block;
  /*overflow:hidden;*/
}

#OMid_1_1
{
    display: inline-block;
    width: 43%;
    float: left; 
    height: 260px;
    /*margin: 5%;*/
}

.loginbox
{
    display: inline-block;
    width: 90%;
    float: left;
    height: 230px;
    padding-left: 1%;
    /*background-color:#F5F5F5; */
    /*background-color:#81e98d; */
    background: url('/Icons/worldsplash_w600_o.jpg') left top;
    background-repeat: no-repeat;
    /*background: url('/Icons/whiteback03_01.jpg') left top;*/
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    /*background: url('/Icons/wood4.jpg') left top;
    background: url('/Icons/dp_sunshine01.jpg') left top;*/
    /*background-color: white;*/
    /*margin: 5px;*/
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 15px;
    margin-bottom: 5px;
    /*-moz-border-radius: 15px;
    border-radius: 15px;*/
    border-color: blue;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
}

#OMid_1_2
{
    display: block;
    float: left; 
    width: 57%;
    height: 300px;
    /*padding-left: 20%;*/
    
    
}

.omidtextbox
{
    display: inline-block;
    width: 98%;
    float: left; 
    height: 280px;
    padding-left: 1%;
    padding-right: 5px;
    padding-bottom: 2%;
    padding-top: 1%;
    
    margin: 0px;
    /*overflow: hidden;*/
  /*background-image: url('/Icons/clip01.jpg');
  background-size: 60px 60px;
  background-position: 5% 75%;
  background-repeat:no-repeat;*/
   
}


.omidpash1
{
  font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  font-size : 26px;
  color : #0099FF;
  margin-top : 10px;
  text-shadow: 1px 1px #CCCCCC;
}

.logintext
{
  color :  black;
  text-shadow: 2px 2px white;
  background-color: white;
  background: rgba(0, 255, 0, 0.4);
  font-weight: bold;
  font-size: larger;
}



#OMid_2
{
    width: 90%;
    float: left; 
    height: 5px;
    display: inline-block;
    
}

#OFooter2
{
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-top-color: #CCCCCC;
    height: 5px;
    text-align: center;
    font-size: 0.7em;
    /*line-height: 10px;*/
    margin: 0px auto;
    max-width: 1200px; 
    width: 96%; 
}

#OFooter3
{
    text-align: left;
   
    font-size: smaller;
    /*border-top-color: #CCCCCC;*/
    /*margin: 0px auto;*/
    /*height: 70px;*/
        
   
    width: 90%; 
    padding-left: 5%;
    padding-right: 5%;
    
    
    padding-top: 25px;
    padding-bottom: 25px;
    /*float: left; */

    background: #68A4C4; /* Old browsers */
/*background: -moz-linear-gradient(top,  #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); /* FF3.6+ */
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(47%,#cbebff), color-stop(100%,#a1dbff)); /* Chrome,Safari4+ */
/*background: -webkit-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Chrome10+,Safari5.1+ */
/*background: -o-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* Opera 11.10+ */
/*background: -ms-linear-gradient(top,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* IE10+ */
/*background: linear-gradient(to bottom,  #f0f9ff 0%,#cbebff 47%,#a1dbff 100%); /* W3C */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */

color:white;
}

#OFooter4
{
    height: 30px;
    max-height : inherit;
    text-align: center;
    font-size: 0.7em;
    border-top-color:  #68A4C4;
    background-color: #68A4C4;
    margin: 0px auto;
    /*/max-width: 1200px;*/ 
    width: 100%; 
}



/* -------------- BLOCK MOVERS OPEN -------------------*/

#Oblockmover {display: table; width: 100%; }

#Oblock-1 {display: table-header-group; } /* Menu is displayed in the top */
#Oblock-2 {display: table-row-group; } /* Settings + logo displayed on middle */
#Oblock-3 {display: table-footer-group; height:auto;} /* Play area on the bottom */


/* -------------- MEDIA QUERIES ------------------*/

/* Two columns */

@media all and (min-width:901px) and (max-width: 1300px) and (orientation:landscape){
    /* iPad landscape mode - confirmed */
    
    /*Open area*/
    #OTopHeader {float:left; width: 100%; 
                    /*background-image: url('/Icons/tablet5_7_o.png'), url('/Icons/students8.png');*/
   background-position: right top, left top;
   background-repeat:no-repeat;}
    #OMid_1_1 { width:43%; }
    #OMid_1_2 { width:57%; }

}

@media all and (min-width:701px) and (max-width: 1000px) and (orientation:portrait){
    /* iPad portait mode*/
    /*Open area*/
    #OTopHeader {float:left; width: 100%; 
          background-position: left top; background-repeat:no-repeat; }
    /*#OTopHeader {float:left; width: 100%; background-image: url('/Icons/student4.jpg');
          background-position: left top; background-repeat:no-repeat; }
    */
    #OMid_1 {   height: 580px; }
    #OMid_1_1 { width:85%; text-align: center;  float: left; padding-left: 5%;}
    #OMid_1_2 { width:90%; text-align: center; margin-left: 5%; float: left; }
    .omidtextbox { padding-top: 40px; }


}

/* One column */

@media all and (min-width:1px) and (max-width: 900px)  and (orientation:landscape) {
    /* iPhone5, Sony Experia landscape */
    /* iPhone and Sony Experia are over 301*/

        /* Open area */
        /*Open area*/
    #OTopHeader {float:left; width: 100%; 
          background-position: left top; background-repeat:no-repeat; }
    /*#OTopHeader {float:left; width: 100%; background-image: url('/Icons/tablet5_7_o.png');
          background-position: left top; background-repeat:no-repeat; }*/

    #OMid_0 { background: none; height: 0%}
    #OMid_1 {   height: 620px; }
    #OMid_1_1 { width:85%; text-align: center;  float: left; padding-left: 5%;}
    #OMid_1_2 { width:90%; text-align: center; margin-left: 5%; float: left; height: 340px;}
    .omidtextbox { height: 340px; padding-top: 40px;}
    
       #OMid_2 { background: none; height: 0%}

 

    }



@media all and (min-width:1px) and (max-width: 700px) and (orientation:portrait) {
    /* iPhone5, Sony Experia portrait */
    /* iphone and Sony Experia are over 301*/
    
    /* Open area */
   #OMid_0 { background: none; height: 0%;}
   #OTopHeader {float:left; width: 100%; background-position: left top; background-repeat:no-repeat; } 
   /*#OTopHeader {float:left; width: 100%; background-image: url('/Icons/tablet5_7_o.png'); background-position: left top; background-repeat:no-repeat; } */

   #OMid_1 {   height: 700px; }
   #OMid_1_1 { width:85%; text-align: center;  float: left; padding-left: 5%;}
   #OMid_1_2 { width:90%; text-align: center; margin-left: 5%; float: left; height: 380px;}
   .omidtextbox { height: 380px; padding-top: 40px;}
   #OMid_2 { background: none; height: 0%}
   .omidpash1 { font-size: 20px; }
   .loginbox { width: 100%;}



}










