/**********************************************************************************/
/*      Styles to extend the Micorsoft standard styles for a ASP.Net MVC proj     */
/*                                                                                */
/*      EI CASHES THE CSS FILES - THUS AFTER ANY CHANGE TO MAKE THE CHANGE        */
/*      ACTIVE YOU MUST PRESS  CTRL+F5 IN IE!!!                                   */
/*                                                                                */
/*                                                                                */
/**********************************************************************************/

/* LKB - make editor inputs multi line - remember that text field must have [DataType(DataType.MultilineText)] decoration*/
.form-control-high {
  height: 200px !important;
  line-break:loose !important;
}

.form-control-Screen169 {
  height: 30em !important;
  width: 320em !important;
  line-break:loose !important;
  background-color:yellow;
}

.form-control-ScreenHeader {
  height:unset;
  height:1em;
  max-width:inherit !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
  background-color:yellow;
}

.form-control-text-right {
  text-align:right !important;
}

/* This should mimic the table header format and used when writing help/documentation*/
.blueHeaderText {
  color: #428bca;
  text-decoration: none;
  font-weight:bold;
}

/* This should mimic the table format and used when writing help/documentation*/
.blueText {
  color: #428bca;
  text-decoration: none;
}

.heavyText {
  font-weight:bold;
}

.notAvailable {
  color:gainsboro;
}

/* For some reasons this only kicks in for firefox */
.table {
  margin-right: 10px;
  max-width:100%;
}

/* Mini version of the jombotron */
.minitron { 
  padding: 10px;
  margin-bottom: 10px;
  font-size: 21px;
  font-weight: 200;
  line-height: 2.1428571435;
  color: inherit;
  background-color: #eeeeee;
}

.minitron h1 {
  line-height: 1;
  color: inherit;
}

.minitron p {
  line-height: 1.4;
}

.container .minitron {
  border-radius: 6px;
}

@media screen and (min-width: 768px) {
  .minitron {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .container .minitron {
    padding-right: 6px;
    padding-left: 6px;
  }
 
}

/* popUp dialog styling */
.popUp-dialog {
    width:60%;
}

/* Parallax scrolling */
.parallax {
    /* The image used */
    background-image:url('../Images/SpeakerImage1.jpg'); 

    /* Full height */
    width: 100vw; 
    min-height:50vh;    /* lkb*/
    height:50vh;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;           /* Ensure pictures matches when scrolled up/down*/
    background-position: center;            /* Center vertically the part of the image that can be seen*/
    background-repeat: no-repeat;
    background-size: cover;
}

.parallaxH {
    /* The image used */
    background-image:url('../Images/SpeakerImage1.jpg'); 

    /* Full height */
    height: 100%; 
    min-height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;           /* Ensure pictures matches when scrolled up/down*/
    background-position: center;            /* Center vertically the part of the image that can be seen*/
    background-repeat: no-repeat;
    background-size: cover;
}

.parallaxFont {
    padding-top:0px;
    padding-left:5vw;
    padding-right:1vw;
    padding-bottom:0px;
	font-family: Verdana;
	font-size: medium;
	color: white; /* #E1E1E1; */
    /*font-weight:bolder;*/
} 

.half-width {
    max-width:50vw;
}

/* Force a div to fill the entire page no matter what the parrent size */
.full-width {
   width: 101vw;
   position: relative;
   left: 49%;
   right: 49%;
   margin-left: -50vw;
   margin-right: -50vw;
}

/* fit in page - all text in the inner div will be resized to fit this div */
.fitin {
    /*height: -moz-calc(100% - 50px);
    height: -webkit-calc(100% - 50px);*/
    height: 95vh;                   /* Note the javascript changes the size to be fullpage - navbar */
    font-size:1.5em;
    x_background-color:yellow;
    margin-top:2px;
    margin-bottom:2px;
}

.InfoP {
    /*background-color:powderblue;*/
    /*margin: 5px 0px 5px 0px;*/
    line-height:1em;                /* Make space between automatic line breaks smaller */
}

.InfoL {
    display:inline;
    font-family:Verdana;
    font-weight:normal;
}

.DeviceFontSize {
    font-size:medium;
}

.DeviceFontSizeLarge {
    font-size:x-large;
}

.headerLabel {
    width:100vw;
    height:25vh;
    padding-left:10vh;
    color:white;
}

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1024px) {
 .popUp-dialog {
    width:75%;
  }

 .parallax .parallaxH {
        background-attachment: scroll;
  }
}

/* All handheld devices with small browser width in current rotation */
@media only screen and (min-width: 1px) and (max-width: 768px) {
    .popUp-dialog {
        width:90%;
    }

    .parallax {
        min-height:100%;    /* Make parallax image full page due to small screen */
        height:100%
    }

    .half-width {
        max-width:100vw;                    /* Allow text on span entire screen due to small screen */
    }
 
}

/* All handheld devices with small browser width in current rotation */
@media only screen and (min-width: 1px) and (max-width: 320px) , (max-height: 320px) {
    .popUp-dialog {
        width:90%;
    }

    .parallaxFont {
        font-size:small;
    }

    .DeviceFontSize {
        font-size:small;
    }
    .DeviceFontSizeLarge {
        font-size:larger;
    }
}

.backgroundImage {
  /* The image used */
    background-image:url('../Images/SpeakerImage1.jpg'); 

    /* Full height */
    width: 100vw; 
    min-height:50vh;    /* lkb*/
    height:50vh;

    background-position: center;            /* Center vertically the part of the image that can be seen*/
    background-repeat: no-repeat;
    background-size: cover;
}

/* full page css extention - ensure fullpage starts AFTER the navigation bar */
.fullpage-wrapper {
    margin-top:49px;            /* lkb 51 */
}
/* full page css extention - ensure fullpage starts AFTER the navigation bar */
.fp-tableCell {
    vertical-align: top !important; /* lkb - we want to show data at the top of the page - orig value:middle; */
}



/* 
Not sure the motivation behind this, but until you change this or overrride this by assigning the form controls to some other CSS class, 
your controls will never be able to be wider than 280px.

The Fix

Okay, so here’s the deal: I hope to become very competent in all things Bootstrap in the near future, 
but I don’t think you should have to become a Bootstrap guru in order to modify some scaffolded control widths. 
And you don’t. Here is the solution I came up with:

Because the @Html.EditorFor html helper doesn’t support the passing of HTML attributes, you will need to repalce 
any @Html.EditorFor() helpers with @Html.TextboxFor(), @Html.TextAreaFor, @Html.CheckBoxFor, etc. helpers, and then 
add a custom width attribute to each control you wish to modify. Thus, the earlier stretch of code might end up looking like this: 

Ex:    <div class="form-group">
            @Html.LabelFor(model => model.Title, 
               new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Title, 
                 new { style = "width: 400px" })
                @Html.ValidationMessageFor(model => model.Title)
            </div>
        </div>
*/

/* Set width on the form input elements since they're 100% wide by default */
.form-control-wide input,
.form-control-wide select,
.form-control-wide textarea {
    max-width: 100% !important;
}

.form-control input,
.form-control select,
.form-control textarea {
    max-width: 280px !important;
}

/* Allow wider screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1370px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1570px;
    }
}

@media (min-width: 1800px) {
    .container {
        max-width: 1770px;
    }
}