/*CSS file for Final Project*/
html
{
background-color: #333;
}
/* CSS rules applied to the element */
body
{
color: #666;
background-color: #fff;
font-family: Arial, Verdena, Geneva, Helvetica, sans-serif;
font-size: 10.0pt;
text-align: left;
line-height: 1.5em;
border-style: solid;
border-width: 10px;
border-color: #bbb;
margin: 30px 10% 20px 10%;
overflow: scroll;
}
#outer-wrap {
margin: 0% auto;
width: 100%;
overflow: hidden;
}
/*CSS rules for masthead*/
#header-wrap {
position: relative;
float: left;
clear: both;
width: 94%;
margin-top: 0.4%;
margin-left: 3%;
margin-right: 3%;
}
#header {
position: relative;
float: left;
width: 98.5%;
margin-top: 1%;
padding-left: 1.5%;
background-color:#f5f5f5;
background-image: -moz-linear-gradient(170deg, #f5f5f5, #999999 120px,#0099cc 500px);
background-image: -webkit-linear-gradient(170deg, #f5f5f5, #999999 120px,#0099cc 500px);
background-image: -o-linear-gradient(170deg, #f5f5f5, #999999 120px,#0099cc 500px);
background-image: -ms-linear-gradient(170deg, #f5f5f5, #999999 120px,#0099cc 500px);
background-image: linear-gradient(170deg, #f5f5f5, #999999 120px,#0099cc 500px);
}
h1.website-title {
font-weight: bold;
color: #333;
text-align: left;
line-height: 1.5em;
margin-bottom: 0;
padding-top: 5px;
padding-bottom: 0;
}
h1.website-title a {
text-decoration: none;
color: #333;
}
#r-letter {
color: #f05a28;
}
p.website-subtitle {
font-weight: normal;
color: #666;
text-align: left;
margin-top: 0;
padding-bottom: 1.4em;
line-height: 0.5em;
}
/* CSS rules for the main navigation menu */
#nav {
position: relative;
float: left;
clear: both;
width: 100%;
padding: 1% 0% 0% 0%;
line-height: 50%;
background-color: #808080;
}
#nav li {
float: left;
position: relative;
list-style: none;
margin: 0 5px;
padding: 0 0 9px;
}
/* link element */
#nav a {
font-weight: bold;
color: #f5f3f3;
text-decoration: none;
display: block;
padding: 8px 18px;
margin: 0;
border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
}
/* link hover */
#nav .in-use a, #nav li:hover > a {
background: #e3e3e3; /* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#d1d1d1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #e6e6e6, #d1d1d1); /* for firefox 3.6+ */
color: #333;
border: solid 1px #737373;
}
/* CSS rules for applying all five states to mail links and outgoing links */
a.outgoing-link {
color: #f05a28; /*same color as the letter R*/
text-decoration: none;
}
a:link.outgoing-link {
color: #f05a28;
}
a:visited.outgoing-link {
color: #9a4e41; /*800080 light brown*/
}
a:focus.outgoing-link {
color: #9a4e41; /*light brown*/
}
a:hover.outgoing-link {
color: #0099cc; /*sky blue*/
}
a:active.outgoing-link {
color: #000000; /*black*/
}
/* CSS rules for applying all five states to internal links */
a.internal-link {
color: #f05a28; /*same color as the letter R*/
text-decoration: none;
}
a:link.internal-link {
color: #f05a28;
}
a:visited.internal-link {
color: #f05a28;
}
a:focus.internal-link {
color: #9a4e41; /*light brown*/
}
a:hover.internal-link {
color: #0099cc; /*sky blue*/
}
a:active.internal-link {
color: #000000; /*black*/
}
/* Style rule for horizontal ruler */
hr
{
border: 0;
width: 100%;
height: 0;
border-top: medium double #d9d9d9;
color: #d9d9d9;
}
/* CSS style rules for the sidebar */
#sidebar-content-outer-wrap {
float: left;
width: 30%;
margin: 0% 0% 1% 3%;
}
h1.sidebar-heading {
font-weight: bold;
color: #333;
text-align: left;
font-size: 1.2em;
line-height: 1.5em;
margin-top: 0.5em;
margin-bottom: 0.4em;
}
#sidebar-short-paragraph {
background-color: #f5f5f5;
padding-top: 0;
padding-right: 1.2em;
padding-bottom: 0;
padding-left: 1.2em;
margin-bottom: 1.2em;
border: 1px solid #e5e5e5;
}
.sidebar-navigation {
background-color: #f5f5f5;
padding-top: 0;
padding-right: 1.2em;
padding-bottom: 0;
padding-left: 1.2em;
margin-bottom: 1.2em;
border: 1px solid #e5e5e5;
}
.sidebar-navigation ul { /*Reset the default padding/margin and set it as required*/
padding:0;
margin:0;
margin-bottom: 0.75em;
list-style: none;
}
.sidebar-navigation ul li a { /*Change color of link text and remove underline*/
font-weight: normal;
text-decoration:none;
color: #f05a28; /*same color as the letter R*/
margin: 0px;
padding: 0px 0px;
display: block;
}
.sidebar-navigation ul li a:hover {
color: #0099cc;
}
/* CSS style rules for the main content */
#main-content-outer-wrap {
float: left;
width: 62.5%;
margin: 0% 3% 1% 1.5%;
}
#main-content-inner-wrap {
padding-top: 0;
padding-right: 1.1em;
padding-bottom: 0;
padding-left: 1.1em;
margin-top: 0;
margin-bottom: 1.2em;
border: 1px solid #e5e5e5;
}
h1.page-heading {
font-weight: bold;
color: #333;
text-align: left;
font-size: 1.5em;
line-height: 1.em;
margin-top: 0.5em;
margin-bottom: 0.4em;
}
h1.content-heading-1 {
font-weight: bold;
color: #333;
text-align: left;
font-size: 1.4em;
line-height: 1.2em;
margin-top: 0.6em;
margin-bottom: 0.4em;
}
h2.content-heading-2 {
font-weight: bold;
color: #333;
text-align: left;
font-size: 1.35em;
line-height: 1.2em;
margin-top: 0.5em;
margin-bottom: 0.4em;
}
/*CSS style rule to create a centered gallery of three images*/
.center {
display: block;
text-align: center;
}
div.image-left {
float: left;
width: 32%;
margin: 0;
padding-right: 1%;
}
div.image-center {
float: left;
width: 32%;
margin: 0;
padding-left: 1%;
padding-right: 1%;
}
div.image-right {
float: left;
width: 32%;
margin: 0;
padding-left: 1%;
}
img.flexible-image {
border: 2px solid #666;
border-radius: 12px;
box-shadow: 3px 3px 5px rgba(50, 50, 50, .5);
max-width: 100%;
max-height: 100%;
}
img.flexible-image2 {
border: 1px none #333;
background: #fff;
max-width: 100%;
max-height: 100%;
}
figure {
display: block;
margin: 0;
}
figcaption {
display: block;
margin: 0;
font-size: 1em;
font-weight: 600;
border: none;
background: transparent;
word-wrap:normal;
text-align: center;
font-size: 0.85em;
}
/********** Style for the R lesson page **********/
/* Style to make a rollover pop-up image. */
.thumbnail {
position: relative;
z-index: 0;
}
.thumbnail:hover {
background-color: transparent;
z-index: 50;
}
.thumbnail span { /*CSS for enlarged image*/
position: absolute;
background-color: #919191;
padding: 2px;
left: -1000px;
border: 1px solid #000000;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img { /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
top: -10em;
left: -16em; /*position where enlarged image should offset horizontally */
}
/* CSS style rules for the contact form*/
/* Style rule for the form-wrapper */
.form-wrapper {
position: relative;
width: 96%;
padding: 2%;
background-color: #f5f5f5;
overflow: hidden;
border: 1px solid #e5e5e5;
}
/* Center the page */
.form-body {
margin:0;
margin-right: 1%;
padding-left: 5%;
padding-right: 5%;
float: left;
width: 46%;
overflow: hidden;
}
.form-body-padding {
float: left;
width: 42%;
margin: 0;
margin-left: 1%;
}
/*Style rule to make the form read top to bottom rather than left to right.*/
label {
color: #333;
display:block;
margin-top:1em;
}
/* Style rule to center the form within the page */
form {
margin:0 auto;
}
/* Style the text boxes */
input, textarea, select {
width: 98%;
background: #fff;
border:1px solid #dedede;
padding: 1%;
margin-top:3px;
font-size:0.9em;
line-height: 1.5em;
color:#666;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
select {
width: 75%;
color: #666;
}
/* Style rule to increase the height and include a background image */
textarea {
height:150px;
}
/* Styling the submit button */
#submit {
width: 50%;
background-color: #808080;
color: #dcdcdc;
border: 1px solid #dedede;
border-radius: 5px;
cursor: pointer;
margin-top: 1.2em;
padding: 8px;
}
#submit:hover {
background-color: #f05a28;
color: #333;
font-weight: bold;
opacity: 0.8;
}
input, textarea, select {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
}
/* CSS style rules for the footer */
footer {
float: left;
clear: both;
width: 98%;
padding: 1%;
font-size: 0.98em;
text-align: center;
color: #0099cc;
}
footer p {
margin-bottom: 0;
}