/*
 * development.css
 *
 * Standard Colours: Orange #FD9905, Blue: #000080
 *
 * 20Sep17: Created
 */

* {
    margin: 0px;
    padding: 0px;
    outline: none;
    border: none;
}

.notscreen { display: none;}
.notphone { display: inline;}

#wavingflag {
    position:absolute;
    top:0px;
    right:0px;
}

#wavingflag img {
      width:220px;
}

body  {
    color: #000080;
    font-family: "Trebuchet MS", Arial, Helvetica, 'sans serif';
    font-size: 11pt;
    margin: 0px;
    padding: 0px;
    background-image: url("../images/0D0A3140.jpg");
    background-attachment: fixed;
    background-size: cover;
}

article   {
    display: inline-block;
    vertical-align: top;
    height: auto;
    width: 300px; /* this parameter often altered */
    overflow: hidden;
    text-align: justify;
    border: 1px solid white;
    border-radius: 15px;
    padding: 10px;
    margin: 10px;
    background-color: #FD9905; /* Illabunda Orange */
    box-shadow: 7px 7px 7px #252525; /* Grey: Blue looks unrealistic */
}

/* Common webpage main heading */
h1    {
    color: #FF9905; /* Illabunda Orange */
    text-shadow: 4px 4px #000080; /* Illabunda Blue */
    font-size: 6em;
    font-style: italic;
    position: relative;
    top: 0px;
    right: -100px;
    animation: slide-left 5s;
    overflow: hidden;
    height: 100px; /* stops text scrolling if window is smaller */
}

/* animator to bring main page header in from left */
@keyframes slide-left {
    from {margin-left: 100%; width: 200%;}
    to {margin-left: 0%; width: 100%;}
}

/* Unique page heading */
h2  {
    color: #FF9905; /* Illabunda Orange */
    text-shadow: 2px 2px #000080; /* Illabunda Blue */
    font-size: 3em;
    font-style: italic;
    position: relative;
    left: 50px;
}

/* Article headings */
h3    {
    font-size: 1.5em;
    font-style: italic;
    text-align: right;
}

p, ul, ol{
    margin: 10px;
}

p.warning, span.warning {
    font-size: 1.5em;
    color: red;
    text-shadow: 1px 1px #000080; /* Illabunda Blue */
}

p.success {
    font-size: 1.2em;
    color: green;
    text-shadow: 1px 1px #000080; /* Illabunda Blue */
}

li{
    margin: 5px;
}

.breadcrumb{
    position: absolute;
    top: 115px;
    left: 5px;
    right: 0px;
    margin: 0px;
    padding-left: 2px;
    border: 1px solid white;
    background-color: #FD9905 ; 
    text-align: left;
}

.breadcrumb a {
    color: #000080;
    background: #FD9905;
    height: 20px;
    line-height: 20px;
    text-decoration: none;
}
.breadcrumb a:hover {
    background: #000080;
    color: #FD9905;
}



div#content {
    position: absolute;
    top: 180px;
    left: 0px;
    vertical-align: top;
}

footer {
    position:fixed;
    bottom: 2px;
    right: 25px;
    margin: 0 35px 0 35px;
    padding: 0 10px 0 10px;
    font-size: 0.8em;
    text-align: center;
    border: 1px solid white;
    border-radius: 15px;
    background-color: #FD9905;
}

table.pretty     {
    border-collapse: collapse;
    width: auto;
}

table.pretty tr:nth-child(even)   {
    background-color: #FDC168; /* lighter, same tint https://www.w3schools.com/colors/colors_picker.asp */
}

table.pretty th{
    background-color: #CA7A02; /* tad darker */
}

table.pretty th,  table.pretty td  {
    border: 1px solid white;
    padding: 0px 5px ;
}

.updateStatus     {
    font-size: larger;
    color: silver;
}

iframe.video {
    width:854px;
    height:480px;
}

/* 17Oct17: Hides and displays Image Credit on hover */
.imagecredit { display: none; }
article:hover .imagecredit {
    display: inline;
    /* position: absolute; top: 0px; */
}

/* horizontal rule */
hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

/* Form styling */
input[type=text], input[type=number], input[type=password], input[type=email], input[type=date], select {
    width: auto;
    padding: 4px 5px;
    margin: 2px 0;
    box-sizing: border-box;
    border: 2px solid #555;
    border-radius: 4px;
    background-color: white;
}

input[type=text]:focus, input[type=number]:focus, input[type=password]:focus, input[type=email]:focus, input[type=date]:focus {
    background-color: lightblue;
    border: 2px solid red;
}

input[type=text]:invalid, input[type=number]:invalid, input[type=password]:invalid, input[type=email]:invalid, input[type=date]:invalid   {
    background-color: hsla(0, 90%, 70%, 1);
}

input[type=submit], input[type=button]  {
    padding: 10px 24px;
    border-radius: 8px;
    border: 2px solid #000080;
}

input[type=submit]:hover  {
    background-color: lightblue;
}

input.readonly   {
    background-color: #CCCCCC;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: both;
}

textarea:focus{
    background-color: lightblue;
}

/*
.whiteboxleft {
    background-image: url("../images/whiteLine.jpg");
    background-repeat: repeat-y;
}
*/