/* 
    Document   : style
    Created on : Feb 13, 2013, 1:08:51 PM
    Author     : shabab
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;    
    font-family: Arial, Helvetica, sans-serif,'Bauhaus 93';
}

a{
    text-decoration: none;
}

a:hover{
    text-decoration: none;
    cursor: pointer;
}

a img
{
    border:none;
}

body{
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;;
}

#wrapper{
    width: 100%;
   /* min-height: 1000px;*/
   height: auto;
	
    background-color: #0058b4;
    -moz-box-shadow: inset 0 -15px 15px -15px #000, inset 0 15px 15px -15px
        #000;
    -webkit-box-shadow: inset 0 -15px 15px -15px #000, inset 0 15px 15px -15px
        #000;
    box-shadow: inset 0 -15px 15px -15px #000, inset 0 15px 15px -15px #000;
}


#inner_wrapper{
    width: 925px;
    margin: auto;
   height: auto;
	
    background-color: #0058b4;
    -moz-box-shadow: inset 0 -15px 15px -15px #000, inset 0 15px 15px -15px
        #000;
    -webkit-box-shadow: inset 0 -15px 15px -15px #000, inset 0 15px 15px -15px
        #000;
    box-shadow: inset 0 -15px 15px -15px #000, inset 0 15px 15px -15px #000;
    /*    background-image: url('landing_landing_images/deepbluel.png');*/
}

#logo_holder{
    position: relative;
    margin: 0px auto;
	top:40px;
	width: 600px;
    background-color: #3378de;
    background-image: url('../landing_images/lightbluebigv.png');
    height: 300px;
    
    -moz-box-shadow:1px 1px 50px rgba(0,0,0,0.2);
    -webkit-box-shadow:1px 1px 50px rgba(0,0,0,0.2);
    box-shadow:1px 1px 50px rgba(0,0,0,0.2); 
     animation: shadowed 5s;
    -moz-animation: shadowed 5s; /* Firefox */
    -webkit-animation: shadowed 5s; /* Safari and Chrome */
    -o-animation: shadowed 5s; /* Opera */
    /*border: 10px solid white;
    border-radius: 12px;
    border-top-right-radius: 120px;
    border-bottom-left-radius: 120px;*/
    -moz-border-radius: 300px / 150px;
	-webkit-border-radius: 300px / 150px;
	border-radius: 300px / 150px;
   
   

}

@keyframes shadowed
{
    from {background: red;}
to {background: yellow;}
}

@-moz-keyframes shadowed /* Firefox */
{
    from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes shadowed /* Safari and Chrome */
{
    from {
    -moz-box-shadow:1px 1px 10px rgba(0,0,0,0.2);
    -webkit-box-shadow:1px 1px 10px rgba(0,0,0,0.2);
    box-shadow:1px 1px 10px rgba(0,0,0,0.2); 
}
to {
    -moz-box-shadow:1px 1px 50px rgba(0,0,0,0.4);
    -webkit-box-shadow:1px 1px 50px rgba(0,0,0,0.4);
    box-shadow:1px 1px 50px rgba(0,0,0,0.4); 
}
}

@-o-keyframes shadowed /* Opera */
{
    from {background: red;}
to {background: yellow;}
}


.infinity
{
   /* animation: myfirst 3s;
    -moz-animation: myfirst 3s; /* Firefox 
    -webkit-animation: myfirst 3s; /* Safari and Chrome 
    -o-animation: myfirst 3s; /* Opera */
	 -webkit-animation: myfirst 4s linear 0s infinite alternate;
     -moz-animation: myfirst 4s linear 0s infinite alternate;
      -ms-animation: myfirst 4s linear 0s infinite alternate;
       -o-animation: myfirst 4s linear 0s infinite alternate;
          animation: myfirst 4s linear 0s infinite alternate;

}
@keyframes myfirst
{
    from { 
    left: 35%;
    top: 35%;
    width: 30%;
    height: 30%;
}
to { left: 15%;
     top: 15%;
     width: 70%;
     height: 70%;
}
}

@-moz-keyframes myfirst /* Firefox */
{
    from { 
    left: 35%;
    top: 35%;
    width: 30%;
    height: 30%;
}
to { left: 15%;
     top: 15%;
     width: 70%;
     height: 70%;
}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from { 
    left: 35%;
    top: 35%;
    width: 30%;
    height: 30%;
}
to { left: 15%;
     top: 15%;
     width: 70%;
     height: 70%;
}
}

@-o-keyframes myfirst /* Opera */
{
    from { 
    left: 35%;
    top: 35%;
    width: 30%;
    height: 30%;
}
to { left: 15%;
     top: 15%;
     width: 70%;
     height: 70%;
}
}

#logo{
    position: absolute;
    left: 15%;
    top: 15%;
    width: 70%;
    height: 70%;
    background-image: url('../landing_images/logo.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;

}

#item_holder{
    position: relative;
    top: 60px;
    width: 920px;
    height: 237px;
    /*left: -50px;*/
    margin: 0px auto;
    
}

.items{    
    display:table-cell; 
    vertical-align:middle;
    alignment-adjust: middle;
    padding-top: 20px;
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    border-radius: 2px;
    display: block;
    float: left;
    width: 391px;
    margin: 15px 0px 15px 15px;
    background-color: #3378de;
    background-size: contain;
    background-image: url('../landing_images/lightbluesmall2.png');
    height: 45px;
    
    -moz-box-shadow:1px 1px 50px rgba(0,0,0,0.2);
    -webkit-box-shadow:1px 1px 50px rgba(0,0,0,0.2);
    box-shadow:1px 1px 50px rgba(0,0,0,0.2); 
     animation: shadowed 5s;
    -moz-animation: shadowed 5s; /* Firefox */
    -webkit-animation: shadowed 5s; /* Safari and Chrome */
    -o-animation: shadowed 5s; /* Opera */
    

    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    text-shadow:#666;
    color:white;
    border: 5px solid #B5C4FB;
    border-radius: 20px;
}

.items:hover{   
    cursor: pointer;
    float: left;
    /*    width: 300px;*/
    /*    margin: 10px;*/
    background-color: #3378de;
    /*    height: 110px;*/
    -moz-box-shadow:1px 1px 50px rgba(255,255,255,0.2);
    -webkit-box-shadow:1px 1px 50px rgba(255,255,255,0.2);
    box-shadow:1px 1px 50px rgba(255,255,255,0.2);

}