/*  page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
    font-size:11px;
}
img {
  border-radius: 30px;
}




.example {
    background:#fff url(../images/clouds-in-blue-sky-changed.jpg);
    width:1100px;
    height: 1px;
    position: absolute;
    margin:1px auto;
    padding: 1px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    top :-5px;
}


/* main menu styles */
#nav {
    display:inline-block;
    width:100%;
    margin:5px auto;
    padding:5px;
    background:#335599 url(../images/bg.png) repeat-x 0 -110px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
    margin:8px;
    float:left;
    position:relative;
    list-style:none;
}
#nav a {
    font-weight:bold;
    font-size:18px;
    color:#e7e5e5;
    text-decoration:none;
    display:block;
    padding:6px 10px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}

/* selected menu element */
#nav .current a, #nav li:hover > a {
    background:#7788aa url(../images/bg.png) repeat-x 0 -20px;
    color:#000;
    border-top:1px solid #f8f8f8;

    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}

/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#000;
}
#nav ul li a:hover {
    background:#335599 url(../images/bg.png) repeat-x 0 -100px;
    color:#fff;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}

#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

/* drop down */
#nav li:hover > ul {
    opacity:1;
    visibility:visible;
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:275px;
    position:absolute;
    background:#aabbcc url(../images/bg.png) repeat-x 0 0;
    border:1px solid #7788aa;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
    float:none;
    margin:0;
}
#nav ul a {
    font-weight:normal;
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
    left:160px;
    top:-15px;
}






@media only screen 
and (min-device-width : 275px) 
and (max-device-width : 387px)
and (orientation:landscape) {



.example {
    top:290px;
    background:#fff url(../images/clouds-in-blue-sky-changed.jpg);
    width:00px;
    height: 10px;
    position: absolute;
    margin:10px auto;
    padding:0px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
.example1 {
    top:290px;
    background:#fff url(../images/clouds-in-blue-sky-changed.jpg);
    width:500px;
    height: 10px;
    position: absolute;
    margin:10px auto;
    padding:0px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}


 




 #nav {
    display:inline-block;
    width: 800px;
    margin:0px auto;
    padding:0;
    background:#335599 url(../images/bg.png) repeat-x 0 -110px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav1 {
    top:100px;
    display:inline-block;
    width: 800px;
    margin:0px auto;
    padding:0;
    background:#335599 url(../images/bg.png) repeat-x 0 -110px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:800px;
    position:absolute;
    background:#aabbcc url(../images/bg.png) repeat-x 0 0;
    border:1px solid #7788aa;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav1 ul {
    top:100px;
    opacity:0;
    visibility:hidden;
    padding:0;
    width:800px;
    position:absolute;
    background:#aabbcc url(../images/bg.png) repeat-x 0 0;
    border:1px solid #7788aa;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}

#nav li {
    margin:2px;
    float:left;
    position:relative;
    list-style:none;
}
#nav1 li {
    top: 100px;
    margin:2px;
    float:left;
    position:relative;
    list-style:none;
}
#nav a {
    font-size: 45px;
    font-weight:bold;
    color:#e7e5e5;
    text-decoration:none;
    display:block;
    padding:6px 10px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}
#nav1 a {
    font-size: 45px;
    font-weight:bold;
    color:#e7e5e5;
    text-decoration:none;
    display:block;
    padding:6px 10px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}

}



@media only screen 
and (min-device-width : 175px) 
and (max-device-width : 587px)
and (orientation : portrait) {

.example1 {
    top:290px;
    background:#fff url(../images/clouds-in-blue-sky-changed.jpg);
    width:500px;
    height: 10px;
    position: absolute;
    margin:10px auto;
    padding:0px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}


    .tabs {
        position: relative;
        top :2695px;
        left : 40px;
     display:inline-block;
    width: 1220px;

    
    margin-left:10px;
    margin:5px auto;
    padding:0;
    background:#335599 url(../images/bg.png) repeat-x 0 -110px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:5px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
    border: 5px solid #8AC007;
} 


.tab-menu {
    postion:absolute;
    right:1%;
     margin-left:10px;
    list-style-type: none;
    overflow: hidden;
    margin: 2.5em 0 0 0;
    padding: 20;
    font-size:45px;
}

.tab-content {
    position: relative;
    margin-top: 1px;
    width: 1500px;
    min-height: 690px;
    max-height: 690px;
    overflow: auto;
    margin-bottom: 2.5em;
    padding: 15px;
    border-left: 3px solid #ccf;
    border-bottom: 1px solid #ccf;
    background-color: #f5f5f5;
    font-size:35px;
}




 #nav {
    display:inline-block;
    width: 1300px;
    margin:0px auto;
    padding:0;
    background:#335599 url(../images/bg.png) repeat-x 0 -110px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav1 {
    position: absolute;
    top:-90px;
    display:inline-block;
    width: 1500px;
    margin:0px auto;
    padding:0;
    background:#335599 url(../images/bg.png) repeat-x 0 -110px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:1275px;
    position:absolute;
    background:#aabbcc url(../images/bg.png) repeat-x 0 0;
    border:1px solid #7788aa;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}

#nav1 ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:1275px;
    position:absolute;
    background:#aabbcc url(../images/bg.png) repeat-x 0 0;
    border:1px solid #7788aa;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}


#nav li {
    margin:2px;
    float:left;
    position:relative;
    list-style:none;
}
#nav1 li {
    margin:2px;
    float:left;
    position:relative;
    list-style:none;
}
#nav a {
    font-size: 45px;
    font-weight:bold;
    color:#e7e5e5;
    text-decoration:none;
    display:block;
    padding:6px 10px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}
#nav1 a {
    font-size: 45px;
    font-weight:bold;
    color:#e7e5e5;
    text-decoration:none;
    display:block;
    padding:6px 10px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}
  
}