*{
box-sizing:border-box; 
}

body{ margin: 0px; padding: 0px; 
/*font-size: calc(0.75em + 1vmin);*/
   font-size: clamp( 15rem, 80vw, 80vh)   
font-family: tahoma, arial, Lucida Grande, Verdana; 
line-height: 1;
min-height: 700px;
}

h1{ font-size: 1.3em; font-weight: normal; }
h2, h3{ font-size: 1em; font-weight: normal; }
h4{ font-size: 0.8em; font-weight: normal; }
h5, h6{ font-size: 0.8em; font-weight: normal; }
a{  font-weight: bold; text-decoration: none; color: rgba(0,0,102,1); }
a:hover{ text-decoration: underline; font-weight: bold; }

h2 a{ font-size: 1em; text-decoration: none; font-weight: normal; }
h3 a{ font-size: 1em; text-decoration: none; font-weight: normal; }


button{
border-radius: 3px;
}

ul li{
display: block;
}
li{
display: block;
line-height: 1.2;
}


#ocean{ clear: both; }


#page{
clear: both;
margin: 1% auto 1% auto;
padding: 1%;
border-radius: 10px;
text-align: left;  
width: 98%;
}


#BrowseButtons{
padding: 1px;
margin: 1px;
text-align: right;
}
#BrowseButtons img{
margin: 2px;
width: 25px; height: 25px;
}
#BrowseButtons a{
margin: 2px;
}


#top{  
clear: both; 
padding: 0px; margin: 0px; 
}

#bar{
height: auto;
visibility: visible;
}


#banner{
font-size: 1em;
clear: both; 
text-align: center; 
padding: 0.5%; 
margin: 0px;
}
#banner a{ 
font-size: 1em;
border: none; text-decoration: none; 
margin: 2px 5px 2px 5px;
}
#banner a:hover{ background: #800000; color: #FFFFFF; border: #FFFFFF 1px solid; }

#banner2{
font-size: 1em;
clear: both; 
text-align: center; 
margin: 0px 0px 0px 0.5%;
padding: 3px; 
}
#banner2 a{
font-size: 1em;
border: none; text-decoration: none; 
margin: 2px 5px 2px 5px;
}
#banner2 a:hover{ background: #800000; color: #FFFFFF; border: #FFFFFF 1px solid; }


#main{ clear: both; 
padding: 1%;
min-height: 500px; 
margin: 2px auto 0px auto; 
width: 100%;
}

#co{
text-align: left; 
min-height: 200px;
width: 100%;
max-width: 620px;
min-width: 380px; 
}

#side{
margin: 3px 0px 30px 0px; 
text-align: left;
width: 100%; 
min-width: 200px;
max-width: 600px;
}
#side a{ color: rgba( 0,0, 120, 1 ); 
margin-right: 1px;
}
#side a:hover{ color: rgba( 255, 255, 255, 1 ); 
background: #000066;
}

#side h4{ 
text-align: center; 
color: #FFFFFF; 
background: #00007e;
}
#side div{ 
max-width: 320px; 
min-width: 180px;
float: left;
margin: 5px; 
}


#sideNavTop {
clear: both;
margin: 1px; 
text-align: left;
}
#sideNavTop a{ 
color: rgba(  0,0,120, 1 ); 
margin-right: 5px;
}

#sideNavTop h4{ 
text-align: center; 
color: #FFFFFF; 
background: #00007e;
}
#sideNavTop div{ 
width: 100%;
max-width: 350px;
min-width: 200px;
float: left;
margin: 1px; 
}


#foot{ 
clear: both; 
margin: 20px; 
border-top: rgba( 0,0,0, 1 ) 1px solid; 
text-align: center; 
padding: 3px; 
}
#foot p a{ margin-right: 5px;  }
#foot li{ display: inline; }


ul{ margin: 4px 1px 1px 2px; }
li{ margin: 2px; }

table{ 
border-collapse: collapse; 
border: rgba( 30,30,90, 1 ) 1px solid; 
margin: 10px 1px 10px 1px; 
}
table td{ 
color: rgba( 0,0,0, 1 ); 
border: rgba( 30, 30, 90, 1 ) 1px solid; 
padding: 4px; 
text-align: center; 
}

.iconIMG{ border: none; width: 21px; height: 21px; margin: 0px 2px 0px 2px; }

.topLinksLI{
display: block;
}



.title{ float: left; }

.userIMG{
float: right;
width: 60px;
height: 60px;
border: none;
margin: 2px;
}


.userLargeIMG{
display: block;
width: auto;
height: auto;
max-width: 100%;
border: none;
margin: 10px;
}


.mm{ 
background: rgba(  225, 225, 255, 1 ); 
color: rgba( 0, 0, 0, 1 ); 
}
.mm a{ 
color: rgba( 0, 0, 100, 1 ); 
}
.mm h4{ 
background: rgba( 215, 215, 215, 1 ); 
color: rgba( 20, 75, 20, 1 ); 
padding: 1px; 
margin: 1px 1px 5px 1px; 
text-align: center; 
border: rgba( 175, 175, 175, 1 ) 1px solid; 
font-size: 0.8em; 
font-weight: normal; 
}
.mm h3{ 
background: rgba( 211, 211, 211, 1 ); 
color: rgba( 20, 75, 20, 1 ); 
padding: 1px; 
margin: 1px 1px 5px 1px; 
text-align: center; 
border: rgba( 175, 175, 175, 1 ) 1px solid; 
font-size: 1em; 
font-weight: normal; 
}

.hh{ 
color: rgba( 25, 25, 100, 1 );
padding: 2px; 
margin: 1px 1px 6px 1px; 
text-align: center; 
font-size: 0.8em; 
font-weight: normal; 
}


.share{ 
margin: 10px auto 10px auto;
width: 80%; 
font-size: 0.8em; 
padding: 5px; 
}
.share a{ 
text-decoration: none; 
font-weight: normal; 
margin: 1px 1px 1px 4px; 
}

.tags{ 
font-size: 0.8em; 
padding: 3px; 
}
.tags a{ 
text-decoration: italic;
font-weight: normal; 
margin: 2px;
}

.quickComment{ margin: 1px; padding: 1px; }

.p200{ float: left; margin:10px; height:150px; width:150px; overflow:hidden; text-align:center; }


.ratingsIndicator{
width: 20px;
height: 20px;
border: #00007e 1px solid;
border-radius: 5px;
background-image: radial-gradient( red, yellow );
}

div.item{ 
margin: 20px 1px 5px 1px; 
border-bottom: #FFFFFF 0px solid;
}

div.item form{ margin: 3px; padding: 2px; }
div.item h2, h3{ 
font-size: 1.2em; 
padding: 1px; 
margin: 1px; 
}
div.item p{ 
padding: 1px; 
margin: 2px; 
}

.paging{ 
text-align: center; 
margin: 10px; 
}
.paging a{ 
margin-right; 10px; 
}

.button{
cursor: pointer;
border-radius: 7px;
background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%); 
color: #800000;
text-decoration: none; font-weight: bold; 
padding: 3px; margin: 3px; 
border: rgba( 50,0,0, 1 ) 1px solid;
}
.button a{
cursor: pointer;
border-radius: 7px;
background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%); 
color: #000000;
text-decoration: none; font-weight: bold; 
padding: 3px; margin: 3px; 
border: rgba( 50,0,0, 1 ) 1px solid;
}


.storyButtons{
padding: 0px; margin: 0px;
cursor: pointer;
}
.storyButtons button{
margin: 5px 2px 5px 2px;
cursor: pointer;
}

.buttonsTop{
border-radius: 3px;
background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%); 
padding: 3px;
border: 1px solid #000;
color: black;
text-decoration: none;
cursor: pointer;
}



.memberInfo{ 
width: 175px; 
height: 175px; 
float: left; 
margin: 3px; 
}



.siderUL{ 
width: auto; 
margin: 10px; 
}
.siderUL li{ 
display: block;
margin: 5px; 
}

#sider{ margin: 1px; }
#sider a{ margin: 5px; }
#sider ul{ margin: 5px; }
#sider ul li{ display: inline; }


.md{
width: auto;
min-width: 200px; 
padding: 2px; 
}

.error_p{ 
background: #800000; 
color: #FFFFFF; 
padding: 3px; 
margin: 0px; 
}

smilyIMG{
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

#tabs{ 
border: none;
border-radius: 7px; 
padding: 2px; 
margin: 2px; 
}
#tabs_buttons{ 
margin: 1px 1px 1px 1px; 
border-bottom: #00007e 1px solid; 
}
#tabs_buttons a{
margin: 2px; padding: 2px; 
background: #00007e; 
color: #FFFFFF; 
text-decoration: none; 
font-weight: bold; 
font-size: 0.8em;
border: rgba( 234, 234, 234, 1 ) 1px solid; 
border-radius: 4px; 
}

#tabs_buttons button{
font-size: 0.8em;
color: #000000;
margin: 0px;
border-radius: 5px;
}


.user{
font-size: 1em;
clear: both;
}

.userFloat{
font-size: 1em;
float: left;
}

.user a{
text-decoration: underline;
font-weight: normal;
}

.userFloat a{
text-decoration: underline;
font-weight: normal;
}

.options{
font-size: 0.8em;
}

.options a{
text-decoration: underline;
font-weight: normal;
}


.memberSign{
font-size: 0.8em;
}
.memberSign a{
text-decoration: underline;
font-weight: normal;
}

.reactions{
font-size: 0.8em;
}
.reactions a{
text-decoration: underline;
font-weight: normal;
}


.sharePost{
font-size: 0.8em;
}
.sharePost a{
text-decoration: underline;
font-weight: normal;
}

.ppPlayerButtons{
margin: 5px 0px 0px 0px;
}

li.pPlayerList{
display: inline;
margin: 0px;
padding: 0px;
}

li.pPlayerList img{ border: none; }
li.pPlayerList a{ text-decoration: none; }


.manageButtons{
text-align: left;
padding: 10px;
}


.mediaFile{
text-align: center;
margin: 5px auto 5px auto;
border: none;
}

li.dinline{ display: inline; }
li.dashOptionsLI{ display: inline; }

.wideLinks{
width: 100%; max-width: 550px;
height: auto; max-height: 550px;
overflow: scroll;
}

.flLink{ float: left; margin: 5px; }

.shDIV{ visibility: hidden; height: 1px; overflow: hidden; }

#siderLinks{
visibility: hidden; height: 1px; overflow: hidden;
}

#imgChart{
width: 100%; max-width: 600px;
height: 100%; max-height: 700px;
overflow: scroll;
}
#chartIMG{
width: 100%; max-width: 600px;
height: 100%; max-height: 700px;
}




/* @media only screen and (max-width: 800px){ */

#trendingLinks{
height: 30px;
overflow: hidden;
padding: 1px;
}

#trendingLinks ul{
margin: 10px 1px 10px 1px;
display: block;
}

#trendingLinks ul li{
display: block;
margin: 3px;
}

/* } small media ends */




@media only screen and (min-width: 800px){
/* this is for larger screens */

body{ margin: 0px; line-height: 1.5;
}

#co{
border: #FFFFFF 0px solid;
width: 60%;
min-width: 600px;
max-width: 600px;
float: left;
}

#side{
width: 25%; 
min-width: 340px;
max-width: 340px;
float: left;
margin: 10px;
}

#sideNavTop div{ width: 100%; min-width: 300px; max-width: 400px; margin: 10px; float: left; }

.md{
float: left;
min-width: 250px;
padding: 2px;
}

#trendingLinks{
height: auto;
}

#trendingLinks ul{
float: left;
width: auto;
margin: 2px;
}
#trendingLinks ul li{
display: block;
margin: 2px;
}


#sider{ margin: 1px; }
#sider ul{ margin: 5px; }
#sider ul li{ display: inline; }


.topLinksUL{ float: left; }
.topLinksLI{
display: inline;
}



}/*media ends*/

