@font-face {
    font-family: 'OpenSansLight';
    src: url('/Content/Fonts/OpenSans-Light.eot');
    src: url('/Content/Fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
         url('/Content/Fonts/OpenSans-Light.woff') format('woff'),
         url('/Content/Fonts/OpenSans-Light.ttf') format('truetype'),
         url('/Content/Fonts/OpenSans-Light.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/Content/Fonts/OpenSans-Regular-webfont.eot');
    src: url('/Content/Fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Content/Fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('/Content/Fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('/Content/Fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSans';
    src: url('/Content/Fonts/OpenSans-Light.eot');
    src: url('/Content/Fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
         url('/Content/Fonts/OpenSans-Light.woff') format('woff'),
         url('/Content/Fonts/OpenSans-Light.ttf') format('truetype'),
         url('/Content/Fonts/OpenSans-Light.svg#OpenSansLight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/Content/Fonts/OpenSans-Bold-webfont.eot');
    src: url('/Content/Fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Content/Fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('/Content/Fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('/Content/Fonts/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/Content/Fonts/OpenSans-BoldItalic-webfont.eot');
    src: url('/Content/Fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Content/Fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('/Content/Fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('/Content/Fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/Content/Fonts/OpenSans-Semibold-webfont.eot');
    src: url('/Content/Fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Content/Fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('/Content/Fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('/Content/Fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src: url('/Content/Fonts/OpenSans-SemiboldItalic-webfont.eot');
    src: url('/Content/Fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Content/Fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('/Content/Fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('/Content/Fonts/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg');
    font-weight: 600;
    font-style: italic;
}

/* TILES */
.commonbrick {
    padding: 15px;
}
.commonbrick > table,
    .brick > table,
    .smallbrick > table,
    .bigbrick > table
{
    width: 100%;
}

.brick {
    padding: 15px;
    height: 140px;
}
.smallbrick {
    padding: 15px;
    height: 100px; 
}
.bigbrick {
    padding: 15px;
    min-height: 215px; 
}

.brickTitle {
    font-family: 'OpenSans';
    font-size: 22px;
    font-weight: 300;
    white-space: nowrap;
    padding: 0px 20px 8px 33px !important;
    background-position: left top;
    background-repeat: no-repeat;
    border: 0 none;
    vertical-align: middle;
}

.brickTitle span 
{
    position: relative;
    top: -4px;
}

.brickTitle a 
{
    position: relative;
    top: -4px;
    color: inherit;
}

.brickTitle img 
{
    padding-left: 12px;
    border: 0 none;
}

.three-brick-table tr td {
    padding: 0 3.333px 0 3.333px;
}

.three-brick-table tr td:first-child {
    padding: 0 6.666px 0 0;
}

.three-brick-table tr td:last-child {
    padding: 0 0 0 6.666px;
}

.mini2brick {
    width: 66.6666%;
    height: 120px;
}

.mini2brick > div {
    padding: 10px 0 0 20px;
    height: 110px;
}

.minibrick {
    width: 33.3333%;
}

.minibrick a {
    width: 100%;
    height: 120px; 
    background-position: center center;
    background-repeat: no-repeat;
    display: inline-block;
}

.minibrick a > span {
    padding-left: 10px;
    position: relative;
    top: 97px;
}

.two-brick-table > tbody > tr > td:first-child {
    padding-right: 5px;
}

.two-brick-table > tbody > tr > td:last-child {
    padding-left: 5px;
}

/* Brick Panel */

.brickPanelContainer-right
{
    width: 33%;
    min-width: 300px;
    max-width: 500px;
    padding-left: 10px;
}
.brickPanelContainer-left
{
    width: 30%;
    min-width: 300px;
    max-width: 500px;
    padding-right: 10px;
}
.brickPanel
{
    padding: 10px 15px;
    margin-bottom: 10px;
}
.brickPanel .brickTitle
{
    font-size: 17px;
    padding: 0 0 10px 0!important;
}
.brickPanel .collapsible-panel.collapsed .brickTitle
{
    padding: 0!important;
}
.brickPanel .brickTitle span 
{
    top: 0;
}
.brickPanel .brickTitle a 
{
    top: 0;
}
.brickPanel .collapsible-panel-header.brickTitle .collapseImage,
    .brickPanel .collapsible-panel-header.brickTitle .expandImage
{
    width: 24px;
    height: 24px;
    left: -4px;
    top: -2px;
}
.brickPanel .collapsible-panel-header.brickTitle .title
{
    left: -3px;
}
.brickPanel .collapsible-panel-header.brickTitle .collapseImage
{
    background-image: Url('Images/x24/PortletCollapseGray.png');
}
.brickPanel .collapsible-panel-header.brickTitle .expandImage
{
    background-image: Url('Images/x24/PortletExpandGray.png');
}

/* ELEMENTS */
ul.portletList li {
    line-height: 20px;
}
ul.portletList li a, a.portletLink
{
    padding-top: 10px;
    font-weight: normal;
    text-decoration: none;
    color: #034af3;
}

ul.portletList li a:hover, a.portletLink:hover
{
    text-decoration: underline;
}

.portletList .column {
    float: left;
    width: 30%;
    margin-left: 7px;
}

.portletList.two_cols .column {
    float: left;
    width: 45%;
    margin-left: 7px;
}

.portletList .column li {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* COLORS */
.metroGreen {
    background-color: #d2eab5;
}

.metroRed {
    background-color: #eccbc6;
}

.metroBlue {
    background-color: #c7e5f8;
}

.metroYellow {
    background-color: #fff1c1;
}

.metroGray {
    background-color: #e1dede;
}

.metroWhite 
{
    background-color: #fff;
}

a.metroGreen:hover{
    background-color: #C8E3A9;
}

a.metroGray:hover
{
    background-color: #D7D4D4;
}

.metroGreenLight {
    background-color: #e8f2d8;
}

.metroRedLight {
    background-color: #f3e4e0;
}

.metroBlueLight {
    background-color: #e4f1fb;
}

.metroYellowLight {
    background-color: #fff5d7;
}

.metroGrayLight {
    background-color: #f3f3f3;
}

.brickTitle .important
{
    color: #fff;
    font-weight: normal;
    padding: 3px 10px;
}

.metroGreen .brickTitle .important, 
    .metroGreenLight .brickTitle .important
{
    background: #73c312;
}

.metroRed .brickTitle .important, 
    .metroRedLight .brickTitle .important
{
    background: #d14530;
}

.metroBlue .brickTitle .important, 
    .metroBlueLight .brickTitle .important
{
    background: #469fd7;
}

.metroYellow .brickTitle .important, 
    .metroYellowLight .brickTitle .important
{
    background: #d3a401;
}

.metroGray .brickTitle .important, 
    .metroGrayLight .brickTitle .important
{
    background: #7e7e7e;
}