/* Learning CSS Stylesheet- styles.css- Ron Lakin */

/* Elements */
body {
	width:100%;
	margin:0px auto 0px auto;
	padding:0px;
	max-width:1600px;
	min-width:320px;
	position:relative;
	background: rgb(149,149,149); /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	
}

header {
	width:50%;
	margin:15px auto 35px auto;
	text-align:center;
	padding:0px 0px 3px 0px;
}

main {
	width:98%;
	max-width:1000px;
	min-width:320px;
	text-align:center;
	margin:0px auto 0px auto;
	border:1px solid #343434;
	border-radius:80%;
	background-color:#BCBCBC;
	padding: 100px 0px 100px 0px;
	background-image:url(marble1.jpg);
	box-shadow:1px 1px 40px #FFFFFF;
}

section {
	width:100%;
	max-width:1400px;
	margin:20px auto 20px auto;
	text-align:center;
	display:block;
}

footer {
	text-align:center;
	margin:10px 0px 10px 0px;
	padding:5px 0px 0px 0px;
}

a {
	color:#565656;
	text-decoration:none;
	font-size:14px;
	border:3px ridge #487D8C;
	background-color:#CBCBCB;
	padding:1px;
}

a:hover {
	background-color:#487D8C;
	border-color:#FFFFFF;
	color:#FFFFFF;
}

footer a {
	border:none;
	background-color:transparent;
}

h1 {
	text-shadow:1px 1px 10px #343434;
	font-size:36px;
	color:#FDFDFD;
	margin:0px;
	padding:0px;
}

h1:before {
	content: "\261E";
	padding:15px;
	color:#FAA403;
}

h1:after {
	content: "\261C";
	padding:15px;
	color:#FAA403;
}

h3 {
	margin-top:30px;
	font-family: 'Orbitron', sans-serif;
	font-size:16px;
}

h5 {
	margin-top:15px;
	text-shadow:1px 1px 1px #FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	padding:2px;
	font-size:18px
}

h6 {
	font-size:18px;
	margin-top:33px;
}

figure {
	width:90px;
	height:90px;
	display:inline-block;
	margin:5px 8% 5px 8%;
	color:#FFFFFF;
}

figcaption {
	width:90px;
	color:#FFFFFF;
}

img { width:100%; }

span {
	font-variant:small-caps;
	vertical-align:text-top;
	font-size:28px;
	border-bottom:5px solid #FAA403;
}

/* classes */

.hide { display:none; }

.float {
	position:absolute;
	bottom:130px;
	width:100%;
	text-align:center;
}

.rSquareL {
	width:90px;
	height:90px;
	border:1px solid #FFFFFF;
	background-color:#990000;
	border-radius:30px;
	display:inline-block;
	box-shadow:1px 1px 20px #343434;
	float:left;
	margin: 5px 0px 5px 12%;
	text-align:center;
}

.rSquareR {
	width:90px;
	height:90px;
	border:1px solid #FFFFFF;
	background-color:#900000;
	border-radius:30px;
	display:inline-block;
	box-shadow:1px 1px 20px #343434;
	float:right;
	margin:5px 12% 5px 0px;
	text-align:center;
}

.centerCircle {
	width:90px;
	height:90px;
	color:#275583;
	display:inline-block;
	box-shadow:1px 1px 100px #343434;
	margin:5px auto 5px auto;
	text-align:center;
}

.imageReplace {
	background: url("sun90px.png") 0 0 no-repeat;
	text-indent: 100%;
	white-space:nowrap;
	overflow: hidden;
}

/* ids */

section#circle div {
	background-color:#39A897;
	border:2px solid #000000;
	text-shadow:1px 1px 1px #010101;
	width:90px;
	height:90px;
	display:inline-block;
	text-align:center;
	margin:5px 5% 5px 5%;
	text-align:center;
	border-radius:50%;
	box-shadow:1px 2px 40px #000000;
	color:#cdcdcd;
	/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #000000 0%, #00A3EF 100%);
	/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #000000 0%, #00A3EF 100%);
	/* Opera */ 
background-image: -o-linear-gradient(bottom, #000000 0%, #00A3EF 100%);
	/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #00A3EF));
	/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #000000 0%, #00A3EF 100%);
	/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #000000 0%, #00A3EF 100%);
}

section#square li {
	width:60px;
	height:20px;
	font-size:12px;
	background-color:#66CC99;
	display:inline-block;
	box-shadow:1px 1px 30px #121212;
	margin:5px 7% 5px 7%;
	text-align:center;
	padding:20px 2px 20px 2px;
	color:#FFFFFF;
	/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #40941C 0%, #092905 100%);
	/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #40941C 0%, #092905 100%);
	/* Opera */ 
background-image: -o-linear-gradient(top, #40941C 0%, #092905 100%);
	/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #40941C), color-stop(1, #092905));
	/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #40941C 0%, #092905 100%);
	/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #40941C 0%, #092905 100%);
}

section#square ul {
	height:60px;
	padding:0px;
}

section#oval div {
	background-color:#FFFF00;
	width:50px;
	height:90px;
	display:inline-block;
	text-align:center;
	margin:5px 4% 5px 4%;
	text-align:center;
	border-radius:50%;
	box-shadow:2px 3px 40px #343434;
}

section#oval div:nth-child(2) { opacity:.80 }

section#oval div:nth-child(3) { opacity:.60 }

section#oval div:nth-child(4) { opacity:.40 }

section#oval div:nth-child(5) { opacity:.20 }

/* -------Tablet Screen-------------*/
 @media only screen and (max-width:1023px) {

body { width:92%; }

main { width:98%; }

figure {
	width:80px;
	height:80px;
	margin:5px 6% 5px 6%;
}

h1 { font-size:31px; }

h1:before { padding:5px; }

h1:after { padding:5px; }

figcaption { width:80px; }

h5 { font-size:19px; }

h6 {
	margin-top:25px;
	font-size:16px;
}

.rSquareL {
	width:100px;
	height:100px;
	margin-left: 10%;
}

.rSquareR {
	width:100px;
	height:100px;
	margin-right: 10%;
}

section#circle div {
	width:75px;
	height:75px;
	margin:10px 3% 10px 3%;
}
}
/* -------Phone Screen-------------*/
 @media only screen and (max-width:599px) {

main {
	border-radius:0px;
	margin-top:-150px;
	box-shadow:none;
	border:none;
}

figure {
	width:60%;
	height:60%;
	margin:10px auto 10px auto;
	padding:0px;
	text-align:center;
}

figcaption {
	width:100%;
	font-size:22px;
	padding:0px;
	color:#FFFFFF;
}

header { width:90%; }

a {
	font-size:16px;
	padding:3px;
}

h3 {
	margin-top:130px;
	font-size:20px;
}

h5 {
	margin-top:100px;
	font-size:28px;
}

h6 {
	font-size:38px;
	margin-top:100px;
}

.rSquareR, .rSquareL {
	width:260px;
	height:260px;
	float:none;
	margin: 10px 3% 10px 3%;
}

.centerCircle {
	width:260px;
	height:260px;
	text-align:center;
	margin:15px 2% 15px 2%;
}

.imageReplace {
	background: url("sunLarge.png") 0 0 no-repeat;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

section#circle div {
	width:250px;
	height:250px;
	margin:15px 3% 15px 3%;
	text-align:center;
}

section#square li {
	width:180px;
	height:80px;
	margin:20px auto 20px auto;
	padding:60px 0px 20px 0px;
	display:block;
	font-size:28px;
}

section#square ul {
	width:100%;
	height:550px;
	padding:0px;
	text-align:center;
	margin:20px auto 20px auto;
	font-size:36px;
}

section#oval div {
	width:140px;
	height:280px;
	display:inline-block;
	margin:20px 10% 20px 10%;
}
}