/***
Supplemental CSS for 2014 version of G5NR Portal, etc.

J. Gass, SSAI
***/

a:hover {
text-decoration:none;
}

body{ color:#fff;
}

#content-wrapper h2{
color: skyblue;
}

.maincontent{
    background-color:#20303b;
    background-color: #224075;
}

/******
LEFT NAVIGATION
******/
/* #leftnav{background: #fcfcfc;} */
 #leftnav a:hover, #leftnav .active{
        background:  #0657A7; 
        color:white;
}
         
#leftnav ul.subnav a.active:hover{background:steelblue; color:#000;}

#leftnav a{
        border-bottom:1px solid #ccc;
        /* color:slateblue; */
        color: white;
        display:block;
        font-size:14px;
        font-weight:bold;
        padding:8px 20px;
        text-decoration:none;
        width:180px;
        line-height:120%;
}
#leftnav ul.subnav{
        border-color:#1C1C1C #333333 #000000;
        border-right:1px solid #333333;
        border-style:solid;
        border-width:1px;
        padding:8px 0;

#leftnav ul.subnav  li{
                padding-bottom:5px;
}
#leftnav ul.subnav a{
        border:0 none;
        font-weight:normal;
        padding:3px 5px 3px 34px;
}
#leftnav ul.subnav a:hover{
background:  url(/images/smallminus_active.gif) 22px 6px no-repeat;
}


div#Homepage-2014-twocol {
margin:0px; 
position:relative; 
top:1px; 
left:5px; 
height:150px;
background-color:transparent;
}

/* Center introduction section */

div#GMAO_intro {
position:relative;
left:0px;
top:0px;
width:514px;
height:inherit;
padding:6px;
margin:0px;
border:1px solid #ccc;
background-color:#ffffff;
background-image:url(/images/wireglobe-60.png);
background-repeat:no-repeat;
background-position:0% bottom;
font-weight:100;
}

div#intro_readmore {
position:relative;
left:80%;
bottom:2px;
font-weight:900;
}


div#GMAO_intro > h2 {
font-style:normal;
color:navy;
font-weight:100;
}

/***
Highlights Section
***/

div#highlights {
clear:both; 
position:relative; 
left:0px; 
top: 5px; 
width:514px; 
height:350px; 
padding:6px; 
border:1px solid #333; 

background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.7), rgba(240, 240, 240, 0.3), rgba(255, 255, 255, 0.6));
filter: progid:DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr='#c3d8e7', endColorstr='#a7bccb' );
}

div#featured_highlight {
margin-bottom:3px; 
width:500px; 
background-color:transparent; 
color:#000;
}

div.featured_highlight_title {
margin:2px 6px -2px 0px;
color:#000;
text-indent:-0.5em; 
width:510px;
}

div#featured_highlight > div.wrapper {
width:inherit; 
height:125px;
}

div#featured_highlight  div.img_wrapper {
float:left; 
height:100px; 
width:100px; 
background-color:#fff; 
margin:0px 6px 6px 0px;
}

div#featured_highlight > div.img_wrapper  img {
box-shadow:0px 2px 2px -1px rgba(0, 0, 0, 0.75);
}

div#featured_highlight  p.brief {
line-height:97%;
text-align:justify;
font-weight:100; 
margin:0px 6px 0px 0px;
}

div#featured_highlight  div.readmore {
clear:both;
position:relative; 
top:0px;
left:80%; 
margin-top:3px;
margin-bottom:3px;
font-weight:900;
}


div#highlights div.list-wrapper {
margin-top:3px;
vertical-align:top; 
width:504px; 
height:155px; 
margin:10px auto 0px auto;
text-align:center;
}

div#highlights div.listitem {
display:inline-block; 
width:116px; 
height:155px; 
margin:2px 2px;
vertical-align:bottom;
text-align:center; 
font-weight:100;
/*background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);*//*For IE10*/
/*background: radial-gradient(rgba(141, 161, 175, 0.7), rgba(223, 244, 255, 0.9));*/
background-color: rgba( 247, 252, 255, 0.80);
border: 1px solid #8ea0b1;
border-radius:4px; 
box-shadow:0px 2px 2px -1px rgba(0, 0, 0, 0.75);
}

div#highlights div.listitem:hover {
background-color:rgba( 255, 252, 247, 1);
}

div#highlights  div.listitem_title {
margin:3px;
height:45px;
font-weight:100;
font-variant:small-caps;
}

div#highlights  div.listitem  img {
margin-bottom:3px;
}

div#highlights div.listitem div.listitem_title a {
color:#000;
font-style:normal; 
font-weight:500;
height:150px;
background-color:transparent;
text-decoration:none; 
}

div#highlights  div.archive_link a {
color:#333;
font-size:8pt;
font-weight:600;
}


/*
div#highlights img {
box-shadow:0px 2px 2px -1px rgba(0, 0, 0, 0.75);
}
*/

div#snapshots {
display:inline-block;
position:relative; 
top:-1px; 
left: 10px; 
width:200px; 
height:523px; 
color: #fff; 
background: linear-gradient(#20303b, #456980); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20303b', endColorstr='#456980', GradientType=0 );
padding:4px 4px 3px 8px; 
border: 1px solid #333;
}

div.snapshot_item {
clear:both; 
height:auto;
vertical-align:middle;
margin:2px 2px 6px 2px;
}

div.snapshot_image {
display:block;
}

div.snapshot_image img {
border:1px solid #666;
}

div.snapshot_title {
display:block;
width:200px;
margin-top:2px;
font-weight:100;
font-size:8pt;
line-height:120%;
}

div.snapshot_title  a {
font-variant:small-caps;
font-style:normal;
font-weight:500;
color:#fff;
font-size:8pt;

}

div.section_title {
margin:0px 4px 10px 0px;
color:#fff;
font-weight:100;
font-style:normal; 
font-size:11pt;
/*text-shadow:0.05em 0.02em 0.01em #666;*/
padding: 4px 4px 6px 4px; 
border-bottom:1px solid #fff;
}

div.section_title-dark {
margin:-1px 8px 10px 0px; 
color:#003;
font-weight:100;
font-style:normal; 
font-size:11pt; 
/*text-shadow:0.01em 0.2em 0.01em #d0d0d0;*/

padding: 4px 4px 6px 4px; 
border-bottom:1px solid #003;
}

div#secondrow {
clear:both;
display:block; 
box-sizing: border-box;
position:relative; 
top:4px; 
left:-728px; 
width:950px; 
height:225px; 
vertical-align:middle; 
margin-bottom: 14px;

}

div.item_divider_light {
clear:both; 
margin:8px auto; 
text-align:center; 
width:25%; 
border-top:1px solid #999;
}

div.item_divider_dark {
clear:both; 
margin:8px auto 4px 20%; 
text-align:left; 
width:10%; 
border-top:1px solid #999;
}

div#forecasts {
clear:both; 
display:inline-block; 
vertical-align:top; 
position: absolute; 
top:0px; 
left:0px;
width: 186px; 
height:inherit; 
color:#fff;
padding:6px 6px 0 6px;
border: 1px solid #333; 
background-color: #7187b3;
background: linear-gradient(to bottom, #7187b3,#506080); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7187b3', endColorstr='#506080', GradientType=0 );
line-height:110%;
}

div#forecasts p, div#forecasts p a {
padding-left:0.5em;
color:#fff;
font-size:9pt;
font-weight:600;
}

div#Homepage-2014-twocol {
margin:0px; 
position:relative; 
top:1px; 
left:5px; 
height:150px;
background-color:transparent;
}


div#gmao_news {
clear:both; 
display:inline-block; 
vertical-align:top; 
position:absolute; 
left:205px; 
top: 0px; 
width:514px; 
height:inherit; 
color:#111; 
background-color: rgba(255, 255, 255, 1);
padding:6px 6px 0 6px; 
border:1px solid #666;
}

div#gmao_news  p a {
padding-left:1.0em;
color: #000;
font-size:9pt;
font-weight:100;
}

div#gmao_news  div.archive_link a {
color:#333;
font-size:8pt;
font-weight:600;
}

div#system_news {
clear:both; 
display:inline-block; 
position:relative;
top:0px;
left:738px;
width:200px; 
height:inherit; 
padding:6px 6px 0 6px; 
color:#fff;
border: 1px solid #333; 
background:  linear-gradient(to bottom, #7187b3, #506080); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7187b3', endColorstr='#506080', GradientType=0 );
}


div#system_news p a {
padding-left:0.5em;
text-indent:-0.5em;
color:#eee;
font-size:9pt;
font-weight:600;
}

.archive_link {
color:#fff;
position:absolute;
bottom:5px;
right:10px;
width:auto;
text-align:right;
font-size:8pt;
white-space:nowrap;
padding:2px 5px 2px 2.5em;
background-color:rgba(68, 68, 68, 0.2);
box-shadow:0px 1px 2px #333;
}

div.archive_link  a {
font-size:8pt;
font-weight:600;
color: #fff;
}

div#system_news div.archive_link a {
color:#eee;
font-size:8pt;
font-weight:600;
}

div#handylinks {
margin-top:0px;
clear:both;
display:block;
position:relative;
top:0px;
left:-728px;
width:950px;
text-align:center;
padding-top:4px;
letter-spacing:0.1em;
color:#ccc; 
font-weight:600;
font-style:italic;
border:1px solid #333;
background-color:rgba(128,128,128,0.1);
}

div#handylinks a, div#handylinks span {
color:#ddd;
font-size:8pt;
vertical-align:4px;
}