/* Main CSS for OPH website */

body { 
margin:0; 
padding:0; 
background: #303B41 url(images/bg.jpg) repeat-x;
font-family: Istok Web, sans-serif;
font-weight: 400;
font-size: 16px;
color: #000000;
text-shadow: 0 0 1px rgba(0,0,0,0.2);
}

#content { 
display: block;
background: #ffffff;
margin: 20px auto 20px auto; 
padding: 0; 
width: 970px;
border: 2px solid #000000;
box-shadow: 0 0 40px rgba(255, 0, 0, 0.7);
}

/* HEADER-----------*/

#top {
display: block;
background: #000000;
margin: 0;
padding: 0;
width: 970px;
height: 8px;
}

#header {
display: block;
margin: 0;
padding: 0;
width: 970px; 
height: 149px; 
}

#slogan { 
display: block;
position: absolute;
top: 130px;
width: 970px;
font-family: Roboto, sans-serif;
color: #000000;
font-size: 30px;
letter-spacing: none;
font-weight: 900;
font-style: italic;
text-align:center;
text-shadow: none;
margin: 0;
}

/* SUBHEADER----------------------------*/

#subheader {
display: block;
background: #000;
width: 970px;
color: #ffffff;
margin: 0;
}

/* TOP BANNER AD -----------------------------------------------*/

.TopBannerA {
display: block;
max-width: 970px;
height: 125px;
padding: 0 15px 0 15px;
margin-top: -1px;
}

.TopBannerAImg { 
display: box;
width: 940px;
height: 115px;
border: none;
}

/* LOWER BODY --------------------------------------*/

#MainContainer {
position: relative;
display: block;
z-index: 5;
background: #e0e0e0;
width: 970px;
height: auto;
margin: 0;
}

#main {
position: relative;
display: block;
z-index: 10;
background: inherit;
width: 970px;
height: auto;
margin: 0;
}  

#mainB {
position: relative;
display: block;
z-index: 10;
background: #ffffff;
width: 927px;
margin: 0;
padding-left: 25px;
}  

#Left2Columns {
display: block;
float: left;
z-index: 15;
width: 745px;
background: inherit;
padding: 0 20px 0 35px;
margin: 0;
}

#LeftSideSection {
display: block;
float: left;
z-index: 15;
width: 692px;
background: inherit;
padding: 0;
margin-left: 30px;
}

#WideColumnLayout {
position: relative;
display: block;
left: 2px;
}

#LowerLeft2Columns{
position: relative;
display: block;
top: 0;
}

#Left330Column {
position: relative;
display: inline-block;
width: 330px;
top: 0;
left: 2px;
margin: 0 0 auto 0;
}

#Right330Column {
position: absolute;
display: inline-block;
width: 330px;
top: 0;
left: 361px;
margin: 0 0 auto 0;

}

/* FOOTER----------*/

#footer { 
display:block;
clear: both;
height: 15px;
color:#ccc;  
background: #1e2225; 
font-size: 12px; 
padding: 10px 0 10px 0;
margin: 0;
text-align:center; 
}

/* ----------------------------------*/
/*  Top Menu */

#menu {
background: #000;
width: 970px;
height: 30px;
margin: 0;
padding: 0;
}

#menu ul { margin:0; vertical-align:top; list-style:none; }
#menu a {
font-size: 16px;
float: none;
display: block;
color: #ffffff;
text-shadow: 0 0 1px rgba(255,255,255,1.0);
margin-top: 4px;
padding-top: 1px;
text-decoration:none;
}

#menu li { float:left; vertical-align:top; color: #FFF; background: #000; margin: 0; padding: 0; text-align: center; }

#menu a:hover { text-decoration:none;
background-color:#c3deef;
color:#000;
text-shadow: 0 0 1px rgba(0,0,0,0.3);
}  

/* ----------------------------------*/

p, li {
font-family: Istok Web, sans-serif;
font-weight: 400;
padding: 0;
font-size: 16px;
line-height: 1.3em;
margin: 0 0 10px 0;
}

.pTeaser {
margin-bottom: 2px;
}

a, a:visited {
color:#006db7;
text-decoration:none;
text-shadow: 0 0 1px rgba(0,6,219,0.3);
}

a:hover {
color:#0000ff;
}

h1 { 
font-family: Roboto, sans-serif;
color:#000000;
font-size: 28px;
letter-spacing: none; 
font-weight: 900;
font-style: italic;
line-height: normal;
margin: 20px 0 10px 0; 
}

h2 { 
background: url(images/h.gif) no-repeat left;
font-family: Roboto, sans-serif;
color: #000000;
font-size: 28px;
letter-spacing: none;
font-weight: 900;
font-style: normal;
line-height: normal;
margin: 20px 0 3px 0; 
padding: 5px 0 5px 33px;
}

h3 { 
font-family: Roboto, sans-serif;
color: #145684;
font-size: 20px;
letter-spacing: none;
font-weight: 700;
text-shadow: none;
font-style: normal;
line-height: normal;
margin: 20px 0 3px 0; 
}

h4 { 
font-family: Roboto, sans-serif;
color:#000000;
font-size: 25px;
letter-spacing: none; 
font-weight: 700;
text-shadow: none;
font-style: italic;
line-height: normal;
text-align: center;
margin: 10px 25px 10px 0; 
}

.HeadLeft { 
font-family: Roboto, sans-serif;
color: #000000;
font-size: 28px;
letter-spacing: none;
font-weight: 900;
font-style: normal;
line-height: normal;
margin: 20px 0 3px 0; 
padding: 5px 0 5px 33px;
}

.RightBox {
display: block;
width: 160px;
background-color: #ffffff;
border: 1px solid #000;
padding: 7px 10px 7px 10px;
margin: 20px 0 20px 0;
box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);	
}

.NewsBox, .NewsBoxDouble, .NewsBoxWhite, .VideoBox {
display: block;
width: 310px;
background-color: #f0f0f0;
border: 1px solid #000;
padding: 10px 10px 7px 12px;
margin: 25px 0 25px 0;
box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
}

.NewsBoxWhite {
background-color: #ffffff;
}

.NewsBoxDouble {
width: 669px;
background: #ffffff;
margin: 25px 0 5px 0;
padding-top: 7px;
}

.VideoBox {
width: 330px;
padding: 0 0 7px 0;
}

.NewsBoxHead, .NewsBoxHead a, .NewsBoxHead a:visited { 
font-family: Roboto, sans-serif;
color: #000000;
text-decoration:none;
font-size: 22px;
letter-spacing: none;
font-weight: 700;
font-style: normal;
line-height: normal;
padding: 0 0 2px 0;
}

.NewsBoxHeadRed, .NewsBoxHeadRed a, .NewsBoxHeadRed a:visited { 
font-family: Roboto, sans-serif;
color: #ee0000;
text-decoration:none;
font-size: 30px;
letter-spacing: none;
font-weight: 700;
font-style: normal;
line-height: normal;
padding: 4px 0 0 0;
}

.NewsBoxHead a:hover, .NewsBoxHeadRed a:hover {
text-decoration: underline;
color: #152a52;
} 

.NewsBoxText, .NewsBoxCaption, .VideoBoxCaption { 
padding: 4px 0 4px 0;
font-size: 16px;
line-height: 1.2em;
}

.NewsBoxCaption, .VideoBoxCaption { 
font-style: italic;
padding: 8 px 0 0 0;
}

.VideoBoxCaption { 
margin: 0 7px 0 7px;
}

.bluetext {
color:#006db7;
}

.HorzLine{
width: 220px;
margin-top: 5px;
margin-bottom: 10px;
padding: 0;
height: 1px;
border-top: 1px solid #aaaaaa;
}

.HorzLineB{
width: 920px;
margin: 12px 0 12px 0;
padding: 0;
height: 1px;
border-top: 1px solid #aaaaaa;
}

.ShortHorzLine{
width: 425px;
margin-top: 15px;
margin-bottom: 15px;
padding: 0;
height: 1px;
border-top: 1px solid #aaaaaa;
}

.TwoColHorzLine{
width: 688px;
margin-top: 20px;
margin-bottom: 0;
padding: 0;
height: 1px;
border-top: 1px solid #aaaaaa;
}

.LongHorzLine{
width: 730px;
margin-top: 15px;
margin-bottom: 15px;
padding: 0;
height: 1px;
border-top: 1px solid #aaaaaa;
}

.RColHorzLine{
width: 160px;
margin: 5px 0 5px 0;
padding: 0;
height: 1px;
border-top: 1px solid #aaaaaa;
}

.LeftSideA {
display: block;
border: none;
padding: 0;
margin: 15px 0 15px 0;
}

.A1pxBorder {
display: block;
border: 1px solid #000;
padding: 0;
margin: 15px 0 15px 0;
}

.BulletinBox {
width: 448px;
border: 1px solid #000000;
background-color: #dcecf6;
padding: 7px 7px 2px 15px;
margin: 2px 0 15px 0;
color: #000000;
}

.BulletinHead {
text-align: center;
font-size: 19px;
font-weight: bold;
text-shadow: none;
margin-bottom: 2px;
}

.HeadItalic {
font-style: italic;
}

.SmallItalic {
font-size: 13px;
font-style: italic;
}

.redtext {
color: #ee0000;
}

.redtextdark {
color: #cc0000;
}

.FormFieldHeader {
font-size: 14px;
font-weight: 700;
color: #145684;
}

.greentext {
color: #009500;
}

.graytext {
color: #707070;
}

.whitetext, .whitetext strong {
color: #ffffff;
text-shadow: none;
}

.BlackText, .BlackTextSmall {
color: #000000;
}

.BlackTextSmall {
font-size: 90%;
}

.LtBlueFill {
background: #dcecf6;
}

#CenterColumn {
display: block;
position: relative;
z-index: 20;
width:  290px;
margin: 0 0 10px 20px;
float: right;
}

#BreakNewsBox {
display: block;
position: relative;
z-index: 20;
width: 290px;
border: 1px solid #000000;
background: #dcecf6;
margin: 0 0 10px 0;
float: right;
box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.6);
}

#BreakNewsUnder {
display: block;
position: relative;
z-index: 20;
width: 290px;
border: none;
background: #ffffff;
margin-top: 0px;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 20px;
float: right;
}

.PhotoUnderBreakNews {
border: #000000 1px solid;
margin: 20px 0px 15px 0px;
float:right;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.6);
}

.PUBNcaption {
font-size:14px;
font-style:italic;
margin-bottom: 30px;
}

.BreakNewsTopHead {
text-align: center;
font-family: Roboto, sans-serif;
color:#000000;
font-size: 21px;
letter-spacing: none;
font-weight: 900;
text-shadow: none;
font-style: italic;
line-height: normal;
margin: 10px 8px 4px 8px; 
padding: 0;
}

#RightColumn {
display: block;
position: absolute;
z-index: 25;
top: 25px;
right: 33px;
background: inherit;
width: 180px;
text-align: center;
font-size: 12px;
line-height: 1.5em;
padding: 0;
margin: 0;
}

.PriceWidget {
padding: 0;
max-width: 139px;
margin: 15px 8px 15px 12px;
box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.3);
}

.LatestPricesHead {
text-align: left;
font-family: Roboto, sans-serif;
color:#145684;
font-size: 23px;
letter-spacing: none;
font-weight: 700;
text-shadow: none;
font-style: normal;
line-height: normal;
padding-top: 15px;
padding-bottom: 0;
margin-bottom: 0;
vertical-align: bottom;
}

.RigCountHead {
text-align: center;
font-family: Roboto, sans-serif;
color:#145684;
font-size: 23px;
letter-spacing: none;
font-weight: 700;
text-shadow: none;
font-style: italic;
line-height: normal;
margin-bottom: 6px;
margin-top: 3px;
}

.RColGreenHead {
margin-top: 10px;
margin-bottom: 3px;
color: #008000;
font-size:12px;
font-weight: 700;
}

.RColumnTxt {
margin-bottom: 0;
line-height: 1.5em;
}

.Price {
font-family: Roboto, sans-serif;
font-size: 1.1em;
font-weight: 700;
color: #006db7;
}

.PriceDate {
display: block;
font-family: Roboto, sans-serif;
font-size: 0.6em;
padding-bottom: 6px;
color: #000000;
line-height: 14px;
vertical-align: top;
}

.breaknews {
line-height: 1.3em;
margin-left: 14px;
margin-right: 12px;
margin-bottom: 8px;
}

.breaknewsTeaser {
margin-left: 14px;
margin-right: 12px;
margin-bottom: 0;
}

.breaknewsContinued {
margin-top: 2px;
margin-left: 14px;
margin-right: 12px;
margin-bottom: 8px;
font-style: italic;
font-size: 13px;
text-align: right;
}

.Continued {
margin: 0;
padding: 0 20px 0 0;
text-align: right;
font-style: italic;
text-shadow: none;
font-size: 14px;
}

.PhotoBoxLeft {
text-align:left;
font-style:italic;
border: 1px solid #000000;
margin: 3px 25px 3px 0px;
float: left;
}

.PhotoBoxRight {
text-align:left;
font-style:italic;
border: 1px solid #000000;
margin: 3px 0px 3px 25px;
float: right;
}

.PhotoBorder {
border: 1px solid #000000;
}

.NoBorder {
border: none;
}

.PhotoLeft {
border: #000000 2px solid;
margin: 3px 25px 3px 0px;
float:left;
}

.PhotoRight {
border: #000000 2px solid;
margin: 3px 0px 3px 20px;
float:right;
}

.OPHCover {
width: 200px;
border: 2px solid #000;
background-color: #ccc;
color: #000;
line-height: normal;
font-family: Roboto, sans-serif;
font-size:12px;
text-align:left;
font-weight: 700;
font-style:italic;
margin: 1px 0px 4px 12px;
float:right;
}

.OPHCoverImage {
border: 1px solid #000;
margin: 8px 8px 4px 8px;
}

.LColInlinePhoto {
border: 1px solid #000000;
margin-top: 3px;
margin-bottom: 1px;
}

.LColCaption {
font-size:15px;
font-style:italic;
margin-bottom: 15px;
}

.ToPay {
display: block;
position: absolute;
top: 23px;
left: 30px;
}

.ToPay p{
color: #aa0000;
margin-top: 0;
margin-bottom: 25px;
}

.dumbCrossFade { 
box-shadow: 2px 2px 15px rgba(0, 0, 0, 1.0);
}

/* BEGIN Main CSS breakpoints  */

@media screen and (max-width: 640px) {

}

@media screen and (max-width: 400px) {

}


/* END Main CSS breakpoints  */