/*Fonts*/
@font-face {
	font-family: "open sans";
	src: url('../fonts/open_sans/opensans.otf');
}

@font-face {
	font-family: "open sans";
	src: url('../fonts/open_sans/opensans-bold.otf');
	font-weight: bold;
}

@font-face {
	font-family: "open sans";
	src: url('../fonts/open_sans/opensans-italic.otf');
	font-style: italic;
}

@font-face {
	font-family: "open sans";
	src: url('../fonts/open_sans/opensans-bolditalic.otf');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: "open sans bold";
	src: url('../fonts/open_sans/opensans-bold.otf');
}

@font-face {
	font-family: "lato";
	src: url('../fonts/lato/Lato-Regular.otf');
}

@font-face {
	font-family: "lato";
	src: url('../fonts/lato/Lato-Bold.otf');
	font-weight: bold;
}

@font-face {
	font-family: "lato";
	src: url('../fonts/lato/Lato-Italic.otf');
	font-style: italic;
}

@font-face {
	font-family: "lato";
	src: url('../fonts/lato/Lato-BoldItalic.otf');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: "montserrat";
	src: url('../fonts/montserrat/Montserrat-Regular.otf');
}

@font-face {
	font-family: "montserrat";
	src: url('../fonts/montserrat/Montserrat-Bold.otf');
	font-weight: bold;
}

@font-face {
	font-family: "montserrat";
	src: url('../fonts/montserrat/Montserrat-RegularItalic.otf');
	font-style: italic;
}

@font-face {
	font-family: "montserrat";
	src: url('../fonts/montserrat/Montserrat-BoldItalic.otf');
	font-weight: bold;
	font-style: italic;
}

body{
    background-color: rgb(230, 234, 239);
    background-repeat: repeat-x;
    margin: 0px 0px 0px 0px;
    font: 12px arial;
    color: rgb(81, 89, 96);
    width: 97%;
}


a{
    color: rgb(106, 127, 145);
}


div#MainContainerWithShadow{
    margin: 0px auto 0px auto;
    padding: 0px 0px 10px 0px;
    width: 973px;
    background-image: url(/images/mkt/background-page-container.jpg);
    background-repeat: repeat-y;
    border: none;
    overflow: auto;
    display: inline-block;
    clear: both;
}


div#GradientContainer{
    background-image: url(/images/mkt/background-main-fade.jpg);
    background-repeat: no-repeat;
    padding: 30px 10px 0px 10px;
    overflow: auto;
    display: inline-block;
    clear: both;
}


div#TitleArea{
    width: 973px;
    height: 134px;
    background-image: url(/images/mkt/title.jpg);
    background-repeat: no-repeat;
    border: none;
    margin: 0px auto 0px auto;
}


div#MainArea{
    margin-left: 74px;
    margin-right: 74px;
    background: transparent;
}


div#MainAreaLogin{
    margin-left: 79px;
    margin-right: 19px;
}


div#LoginTextContent{
    float: left;
    width: 500px;
}

div#LoginTextContentRight{
    float: right;
    width: 280px;
    margin-top: 20px;
    margin-right: 5px;
}

div#LoginForm{
    width: 300px;
    height: 127px;
    float: right;
    background-image: url(/images/mkt/login-background.jpg);
    background-repeat: no-repeat;
    font-weight: bold;
    /*line-height: 180%;*/
}

div#LoginFormMessage
{
	clear: both; 
	width: 300px;
	margin-left: 5px;
}

div#LoginFormCaptions{
    float: left;
    width: 90px;
    text-align: right;
    margin-top: 5px;
}


div#LoginFormControls{
    float: right;
    margin-right: 20px;
    margin-top: 5px;
}


input#LoginSubmit{
    position: relative;
    top: 4px;
}

.LoginSubmit{
    position: relative;
    top: 4px;
}

div#FooterArea{
    clear: both;
    width: 973px;
    margin: 0px auto 0px auto;
    background-image: url(/images/mkt/background-footer.jpg);
    background-repeat: no-repeat;
}


div#FooterLinks{
    margin-left: 20px;
    margin-top: 10px;
    width: 400px;
    float: left;
}


div#FooterCopyright{
    float: right;
    width: 300px;
    margin-top: 10px;
    color: rgb(121, 143, 162);
}


div#FooterCopyright img{
    vertical-align: middle;
    margin-left: 5px;
}


div#FooterLinks span{
    margin-left: 12px;
    margin-right: 12px;
}

h1{
    font: 14px helvetica;
    color: rgb(0, 94, 168);
    font-weight: bold;
}


div#MainMenu{
    width: 800px;
    height: 29px;
    overflow: hidden;
    padding: 0px 0px 0px 0px;
    margin: 100px 0px 0px 40px;
    border: 0px;
    float: left;
}


div#MainMenu ul{
    list-style-type: none;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

li.TabActive, li.TabInactive{
    width: 76px;
    height: 29px;
    float: left;
    margin-right: 5px;
    text-align: center;
    padding-top: 10px;
}


li.TabActive{
    background-image: url(/images/mkt/tab-active.gif);
    background-repeat: no-repeat;
}


li.TabInactive{
    background-image: url(/images/mkt/tab-inactive.gif);
}


li.TabActive a{
    color: rgb(93, 79, 23);
}


li.TabInactive a{
    color: rgb(237, 235, 236);
}


li.TabActive a, li.TabInactive a{
    text-decoration: none;
}


li.TabActive a:hover, li.TabInactive a:hover{
    color: rgb(255, 220, 147);
}


div#SubMenuPublisher{
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    border: 0px;
}


div#SubMenuPublisher ul{
    list-style-type: none;
}


div#SubMenuPublisher ul li{
    float: left;
    margin-right: 10px;
}


div#SubMenuPublisher ul li a:hover{
    color: rgb(200,150,80);
}
.siteContainer
{
	background-color: White;
}
.siteHeader
{
	background-color: #fffce8;
	text-align: center;
}

.siteHeaderSelected
{
	background-color: #bfefbc;
	text-align: center;
}
.siteContent
{
	background-color: White;
	text-align: center;
}
.stagingContainer
{
	background-color:White;
	margin-left: 100px;
}
.stagingHeader
{
	background-color: #a9c7e2;
	text-align: left;
}
.stagingHeaderSelected
{
	background-color: #a9c7e2 ;
	text-align: left;
}
.stagingContent
{
	background-color: White;
	text-align: center;
}
div#sourceSite
{
	float: left;
}
div#targetSite
{
	float: right;
}
.copySiteLabel
{
	text-align: right;
}
.copySiteValue
{
	text-align: left;
	font-weight: bold;
}
div#copyButtons
{
	clear: both;
	text-align: center;
}
.popupSiteMenu
{
	border: solid 1px gray;
}
.popupStagingMenu
{
	border: solid 1px gray;
}
.siteLabel
{
	text-align: right;
}
.siteValue
{
	text-align: left;
	font-weight: bold;
}
td.label
{
	text-align: right;
}
td.value
{
	text-align: left;
	font-weight: bold;
}
div.label
{
	background-image: url(/images/mkt/spacer.gif);
	background-repeat:repeat-y;
	text-align: right;
	white-space: nowrap;
	clear: none;
	display: inline;
	width: 180px;
}
div.value
{
	text-align: right;
	font-weight: bold;
	clear:none;
	display: inline;

}


/* Responsive Design */
.modalPopupDesigner
{
    background-color: #FFF;
    border-width: 3px;
    border-style: solid;
    border-color: #333;
    padding: 5px;
    height: 480px;
    width: 550px;
    text-align: center;
    vertical-align: middle;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}        
.popupLabel
{
    font-weight: bold;
    white-space: nowrap;
    text-align: left;
}      
.popupTextCentered
{
    white-space: normal;
    font-weight: normal;
    text-align: center;
    width: 350px;
}
.popupText
{
    white-space: normal;
    font-weight: normal;
    text-align: left;
    width: 350px;
}


.catClassSubText {
    display:none;
}

#pnlDetails
{
    height:350px;
}
#divDetailsBody
{
    height:300px;        
}

#divPopup
{
    display:none;
}

@media screen and (max-width: 500px) {
    .doseStrengthCol, .therapClassCol {
        display:none;
        width:0;
        height:0;
        opacity:0;
        visibility: collapse;
    } 
    .catClassSubText{
        display:block;
        margin-top:5px;
    }
    .modalPopupDesigner
    {
        height: 355px;
        width: 275px;
    }
    .popupTextCentered
    {
        width: 200px;
    }
    .popupText
    {
        width: 200px;
    }
    #divDetailsBody
    {
        height:150px;        
    }
    #pnlDetails
    {
        height:200px;
    }
}

/* added for phones in landscape */
@media screen and (max-height: 400px)
{
    .modalPopupDesigner
    {
        height: 220px;
    }
    #divDetailsBody
    {
        height:75px;        
    }
    #pnlDetails
    {
        height:100px;
    }

}