﻿* { padding: 0; margin: 0; border: 0; }
html { overflow-y: scroll; }
body { font-family: Trebuchet MS; font-size: 62.5%; background: #3d7fbd url(../images/backgroundGradient.gif) repeat-x; }
img, div { behavior: url(css/iepngfix.htc); }

/* centering div */
#mainContainer { width: 965px; margin: 0 auto;  }
#innerwrap { float: left; width: 965px;  }

/* top heading/banner styles */
#topHeader { float: left; width: 965px; height: 98px; position: relative  }
#topHeader img { float: left; }
#topHeaderCentreWrap { float: left; width: 923px; height: 98px; }
#topHeaderCentre { float: left; width: 923px; height: 90px; background: #fff; position: relative; text-align: right }
#topHeaderCentre img#vikingEnergyLogo { float: left; padding: 27px 0 0 31px; }
#topHeaderCentre img#topHeaderShadow { float: left; }
#topHeaderCentre h1 { font-size: 1.8em; font-weight: bold; font-style: italic; color: #336699; padding-top: 50px; padding-right: 10px }

/* standard form styles */
form.form { float: left; clear: left; width: 400px; }
form.form label.standardLabel { float: left; clear: left; width: 100px; font-size: 1.2em; }
form.form label.longLabel { float: left; clear: left; width: 285px; font-size: 1.2em; margin-bottom: 7px; }
form.form input.standardInput { float: left; clear: right; width: 200px; font-size: 1.2em; border: solid 1px #ccc; margin-bottom: 7px; }
form.form input.submitButton { float: right; margin-right: 100px; clear: both; font-size: 1.2em; padding: 2px 10px; border: solid 1px #666; }
form.form input.standardCheckbox { float: left; clear: right; }
form.form select.standardSelect { float: left; clear: right; width: 150px; margin-bottom: 7px; border: solid 1px #ccc; }
span.asterix { color: #ff0505; }
span.fileentry { float: left; width: 200px; font-size: 0.9em; margin-bottom: 10px; margin-left: 130px }
/* interactive map styles */
#video_player { float: left; clear: both; margin: 0 21px 10px 21px; }

/* question/query form styles */
form.queryForm { float: left; clear: both; width: 400px; }
form.queryForm label.textareaLabel { float: left; clear: both; width: 300px; font-size: 1.2em; }
form.queryForm textarea { float: left; clear: both; width: 300px; font-size: 1.2em; border: solid 1px #ccc; font-family: Trebuchet MS; font-size: 1.2em; }
form.queryForm input.submitButton { float: right; margin-right: 98px; margin-top: 5px; clear: both; font-size: 1.2em; padding: 2px 10px; border: solid 1px #666; }

/* captcha styles */
#captchaSecondaryFormDiv { float: left; clear: both; width: 400px; font-size: 1.2em; }
#captchaSecondaryFormDiv a { float: left; clear: left; color: #336699; text-decoration: none; }
#captchaSecondaryFormDiv a:hover { text-decoration: underline; }
input#securityCode { border: solid 1px #ccc; }


/* centre content section styles */
.boxHeader { float: left; height: auto; background: #ccdfee; }
.boxHeader h3 { float: left; font-size: 1.8em; color: #336699; padding: 4px 0 4px 12px; }
.boxHeader h3 a {  color: #336699; text-decoration: none }

#middleSectionWrap { float: left; display: inline; width: 903px; margin: 0 21px 10px 21px; padding: 0 10px 25px 10px; background: #fff; min-height: 500px; height: auto !important; position: relative; }
/* min-height hack for internet explorer */
* html body #middleSectionWrap { height: 500px; }

    /* left hand (nav) column styles */
    #middleCol1 { float: left; clear: left; width: 225px; height: auto; }
    #middleCol1 ul#mainNav { float: left; clear: both; width: 225px; list-style-type: none; margin-bottom: 20px}
    #middleCol1 li.mainNav { float: left; width: 225px; }
    #middleCol1 li#doubleBordered { border-top: solid 1px #cccccc; }
    #middleCol1 li.mainNav a.mainNav, #middleCol1 li.mainNav a.mainNavOn { float: left; width: 200px; padding: 4px 0 4px 25px; font-size: 1.2em; text-decoration: none; color: #000; background: #fff;  border-bottom: solid 1px #ccc; }
    #middleCol1 li.mainNav a.mainNavOn { border-bottom: solid 1px #ccc; color: #336699; }
    #middleCol1 li.mainNav a.mainNav:hover, #middleCol1 li.mainNav a.mainNavOn { background: #ddedf8; color: #336699; }
        /* second level nav style */
        ul#secondNav { float: left; clear: both; width: 200px; margin-left: 25px; display: inline; }
        ul#secondNav li.secondNav { float: left; clear: both; width: 200px; list-style-type: none; border-bottom: solid 1px #ccc; }
        ul#secondNav li.secondNavNoBorder { float: left; clear: both; width: 200px; list-style-type: none; } 
        ul#secondNav li.secondNav a.secondNav, ul#secondNav li.secondNavNoBorder a.secondNav, ul#secondNav li.secondNav a.secondNavOn { float: left; width: 182px; padding: 4px 0 4px 18px; font-size: 1.2em; text-decoration: none; color: #000; background: #fff; }
        ul#secondNav li.secondNav a.secondNav:hover, ul#secondNav li.secondNavNoBorder a.secondNav:hover, ul#secondNav li.secondNav a.secondNavOn { background: #ddedf8; color: #336699; }
        /* third level nav style */
        ul#thirdNav { float: left; clear: both; width: 175px; margin-left: 25px; display: inline; }
        ul#thirdNav li.thirdNav { float: left; clear: both; width: 175px; list-style-type: none; border-top: solid 1px #ccc; }
        ul#thirdNav li.thirdNavNoBorder { float: left; clear: both; width: 175px; list-style-type: none; }
        ul#thirdNav li.thirdNav a.thirdNav, ul#thirdNav li.thirdNavNoBorder a.thirdNav { float: left; width: 167px; padding: 4px 0 4px 8px; font-size: 1.2em; text-decoration: none; color: #000; background: #fff; font-style: italic; }
        ul#thirdNav li.thirdNav a.thirdNav:hover, ul#thirdNav li.thirdNavNoBorder a.thirdNav:hover, ul#thirdNav li.thirdNav a.thirdNavOn { background: #ddedf8; color: #336699; float: left; width: 167px; padding: 4px 0 4px 8px; font-size: 1.2em; text-decoration: none; font-style: italic; }
        
    #loginBox { float: left; clear: both; width: 225px; height: auto; background: #ddedf8 url(../images/lightBoxCorner.gif) no-repeat bottom right; position: absolute; bottom: 25px; left: 10px; }
    #loginBox .boxHeader { width: 225px; }
    #loginBox .boxHeader h3 { width: 213px; }
    #loginBox form#loginForm { float: left; padding-bottom: 23px; }
    #loginBox label { float: left; width: 213px; font-size: 1.2em; color: #000; padding: 10px 0 8px 12px; }
    #loginBox input#username, #loginBox input#password { float: left; clear: left; width: 201px; font-size: 1.2em; line-height: 1.333em; padding: 3px 0; border: solid 1px #666; margin-left: 12px; }
    #loginBox input#password { margin-bottom: 10px; display: inline; }
    #loginBox input#submit { float: left; clear: both; margin-left: 12px; font-size: 1.2em; padding: 2px 10px; border: solid 1px #666; }
        /* form submit button re-positioning for IE6 */
        * html body #mainContainer #middleSectionWrap #middleCol1 #loginBox #loginForm input#submit { margin-top: -10px; }
    #userBox { float: left; clear: both; width: 225px; height: auto; background: #ddedf8 url(../images/lightBoxCorner.gif) no-repeat bottom right; position: absolute; bottom: 25px; left: 10px; }
    #userBox .boxHeader { width: 225px; }
    #userBox p { float: left; padding: 10px 12px; font-size: 1.2em; }
    #userBox p a { float: left; color: #336699; text-decoration: none; }
    #userBox p a:hover { text-decoration: underline; }
        
        #competitionbox { float: left; clear: both; width: 225px; height: auto; background: #ddedf8 url(../images/lightBoxCorner.gif) no-repeat bottom right; }
    #competitionbox .boxHeader { width: 225px; }
    #competitionbox .boxHeader h3 { width: 213px; }
    #competitionbox p { float: left; padding: 10px 12px; font-size: 1.2em; }
    #competitionbox a { color: #336699 }
        
    /* home page styles */    
    #middleColHome { float: left; clear: right; width: 650px; margin-left: 25px; }
    #middleColHome img#mainImage { float: left; clear: both; border-bottom: solid 1px #fff; }
    #latestNews { float: left; clear: both; width: 650px; margin-bottom: 12px; }
    span#latestNewsTitle { float: left; background: #1b4269; font-size: 1.1em; line-height: 1em; text-transform: uppercase; color: #fff; padding: 6px 7px; font-weight: bold; width: 76px; }
    span#latestNewsStory { float: left; width: 546px; background: #336699 url(../images/darkBoxCorner.gif) no-repeat bottom right; font-size: 1.1em; line-height: 1em; text-transform: capitalize; color: #fff; padding: 6px 7px; }
    span#latestNewsTitle a, span#latestNewsStory a { color: #FFF; text-decoration: none }
    #middleColHomeLeft { float: left; width: 350px; margin-right: 25px; }
    #middleColHomeLeft h2 { float: left; width: 350px; color: #336699; font-size: 1.8em; line-height: 1.3em; font-weight: bold; margin-bottom: 20px; }
    #middleColHomeLeft p { float: left; width: 350px; color: #000; font-size: 1.2em; line-height: 1.6em; }
    #middleColHomeRight { float: left; width: 275px; }
    #socialNetworkBox { float: left; width: 265px; background: #ddedf8 url(../images/lightBoxCorner.gif) no-repeat bottom right; padding: 10px 0 7px 10px; margin-bottom: 10px; }
    #socialNetworkBox img { float: left; padding-right: 7px; }
    #faqsBox { float: left; width: 275px; }
    #faqsBox .boxHeader { width: 275px; }
    #faqsBoxContent { float: left; width: 251px; padding: 12px; background: #ddedf8 url(../images/lightBoxCorner.gif) no-repeat bottom right; }
    #faqsBoxContent p { float: left; width: 200px; font-size: 1.2em; line-height: 1.6em; color: #000; }
    #faqsBoxContent span.more { float: left; clear: left; font-size: 1.2em; line-height: 1.6em; width: 150px; color: #336699; }
    #faqsBoxContent span.more a { color: #336699; }
    
    
/* standard second/third level page styles */
#middleCol2 { float: left; width: 400px; margin: 0 25px; height: auto; font-size: 1.2em; }
.h5ContentPadding { float: left; width: 400px; height: 20px; }
#middleCol3 { float: left; width: 220px; }
.pageImageRight { float: left; width: 211px; clear: both; padding: 6px 0 0 6px; background: url(../images/col3ImageBackground.gif) no-repeat top left; min-height: 219px; height: auto !important; height: 219px; }
.pageImageRight a.smoothbox img { float: left; margin-bottom: 5px; }
.pageImageRight a.smoothbox { float: left; clear: both; width: 205px; font-size: 1.1em; color: #336699; line-height: 1.6em; text-decoration: none; }
.pageImageRight a.smoothbox:hover { text-decoration: underline; }
#middleSectionWrap h2.pageTitle { float: left; width: 653px; padding: 25px 0 0 25px; font-size: 2.4em; line-height: 1em; color: #000; font-weight: normal; padding-top: 25px; }
#middleSectionWrap h3.pageSubtitle { float: left; width: 653px; font-size: 1.4em; line-height: 1em; color: #336699; font-weight: normal; padding: 10px 0 30px 25px; }
#middleCol2 p { float: left; width: 400px; font-size: 1em; color: #000; line-height: 1.6em; margin-bottom: 20px; }
#middleCol2 h3 { float: left; width: 400px; font-size: 1em; color: #000; line-height: 1.6em; margin-bottom: 20px; padding: 0; font-weight: bold }
#middleCol2 p a { color: #336699; text-decoration: underline; }
#middleCol2 p .productlink { color: #336699; text-decoration: none; }
#middleCol2 p a:hover { text-decoration: none; }
#middleCol2 p.intro { font-weight: bold; }
#middleCol2 ul { font-size: 1em; list-style-type: disc; margin: 0 0 1.1em 20px; clear: left  }
#middleCol2 li { list-style-type: disc }
#middleCol2 ul li a { color: #336699; text-decoration: none; }
#middleCol2 ul li a:hover { text-decoration: underline; }
#middleCol2 ul ul { font-size: 1em; list-style-type: disc; margin: 0 0 0 20px; clear: left; list-style-type: circle  }
#middleCol2 ul ul li { list-style-type: circle  }
#middleCol2 ul ul ul { font-size: 1em; list-style-type: disc; margin: 0 0 0 20px; clear: left  }
#pagenumbers { float: left; font-size: 1.1em; margin-bottom: 11px }
#pagenumbers a { color: #336699; }


/* news page styles */
.newsStory { float: left; clear: both; width: 400px; height: auto; padding-bottom: 5px; margin-bottom: 15px; border-bottom: solid 1px #ccc; font-size: 1.2em; }
.newsLink a { float: left; clear: both; width: 400px; color: #336699; text-decoration: none; }
.newsLink a:hover { text-decoration: underline; }

/* Your Questions Answered page styles */
#faqsContainer { float: left; clear: both; width: 400px; font-size: 1em; }
#faqsContainer ol { list-style-type: decimal;  }
#faqsContainer ol li  { list-style-type: decimal; margin-left: 10px }
#faqsContainer li a { color: #336699; text-decoration: none; }
#faqsContainer li a:hover { text-decoration: underline; }
#middleCol2 #faqsContainer ol { font-size: 1em; list-style-type: decimal; margin: 0 0 1.1em 20px; clear: left  }
#middleCol2 #faqsContainer li { list-style-type: decimal }
#faqsContainer h4 { float: left; clear: both; width: 400px; font-size: 1em; font-weight: bold; color: #000; }
#faqsContainer p { float: left; width: 400px; font-size: 1em; font-weight: normal; color: #000; }
#faqsContainer .right a { color: #336699; text-decoration: underline; }
#faqsContainer .right a:hover { text-decoration: none; }

/* Register page styles */
#middleCol2 .form { float: left; margin-bottom: 20px }
#middleCol2 .form .standardLabel { float: left; width: 130px; font-size: 1em }
#middleCol2 .form br { clear: left;  }
#middleCol2 .form .longLabel { float: left; width: 230px; font-size: 1em }
#middleCol2 #captchaSecondaryFormDiv { float: left; width: 300px; padding: 10px 0 }
#middleCol2 #captchaSecondaryFormDiv label { font-size: 1em }
#middleCol2 .form .submitButton { float: left; clear: left; margin: 10px 0; font-size: 1.1em }

/* timeline page styles */
#timeline { float: left; clear: both; width: 400px; padding-bottom: 15px; }
#timeline #timeline1 { float: left; clear: left; width: 148px; }
#timeline #timeline2 { float: left; clear: none; width: 104px; }
#timeline #timeline3 { float: left; clear: right; width: 148px; }
#timeline #timeline1 #timelineTopSpacer1 { float: left; clear: both; width: 148px; height: 31px; }
#timeline #timeline3 #timelineTopSpacer2 { float: left; clear: both; width: 148px; height: 110px; }
#timeline .timelineBox { float: left; width: 148px; height: 148px; }
#timeline #timelineBox1 { margin-bottom: 19px; }
#timeline #timelineBox2 { margin-bottom: 27px; }
#timeline #timelineBox3 { margin-bottom: 15px; }
#timeline #timelineBox5 { margin-bottom: 19px; }
#timeline #timelineBox6 { margin-bottom: 22px; }
#timeline #timelineBox7 { margin-bottom: 18px; }
#timeline .timelineBox .timelineBoxHeader { float: left; clear: both; width: 148px; height: 30px; background: #ccdfee; }
#timeline .timelineBox .timelineBoxHeader h4 { float: left; clear: both; width: 128px; font-size: 1.2em; line-height: 1em; font-weight: bold; height: 12px; padding: 9px 10px; color: #336699; }
#timeline .timelineBox .timelineBoxContent { float: left; clear: both; width: 148px; height: 118px; background: #ddedf8 url(../images/lightboxcorner.gif) no-repeat bottom right; }
#timeline .timelineBox .timelineBoxContent p { float: left; clear: both; width: 128px; height: 98px; margin: 10px; display: inline; }

/* footer section styles */
#bottomFooter { float: left; clear: both; width: 923px; height: 31px; margin: 0 21px 10px 21px; display: inline; }
#bottomFooter img { float: left; clear: left; }
#bottomFooter span#footerLeft { float: left; margin-left: 8px; font-size: 1em; line-height: 1.2em; padding-top: 3px; color: #fff; }
#bottomFooter span#footerRight { float: right; font-size: 1em; line-height: 1.2em; padding-top: 3px; color: #fff; }
#bottomFooter span#footerRight a { color: #fff; text-decoration: none; }
#bottomFooter span#footerRight a:hover { text-decoration: underline; }
#bottomFooter span#footerRight a#left { margin-right: 7px; }
#bottomFooter span#footerRight a#right { margin-left: 7px; }
#bottomFooter a { color: #FFF; text-decoration: none }
#bottomFooter a:hover { color: #FFF; text-decoration: underline }
