/*
      Module 7
	  Final Web Design Project
	  
      ASK Computer Solutions Website Project
      Author: Allan A. Seals III
	  Class: IT-270
      Date:   August 30, 2015

      Filename:         styles.htm
      Supporting files:  modernizr-1.5.js, game_over.mid, game_over.mp3, 
						Movie_Themes_-_Superman.mid, superman_returns.mp3, The_Imperial_March_Darth_Vaders_Theme.mid,
						ask.jpg, slogo.jpg, edgeF12.mp4, index.html, events.html, services.html, about.html, reviews.html
						hours.html, contact.html

   */





*{
	font-family: Tahoma, Arial, sans-serif;
	margin: 0px;
	padding: 0px;    								 /* resets margins and padding of over all site to 0px */
}
/* Link properties */
a:link {
	color: MidnightBlue;
}
a:visited {
	color: Indigo;
}
a:hover {
	color: Fuchsia;
}
a:active {
	color: Red;
}

h1{
	font-size: 2em;									/*  pixels/16=em */
	padding-top: 10px;
	text-shadow: rgb(110,110,110)3px 3px 5px
}

h2{
	font-size: 1.5em;
	padding-top: 5px;
	padding-bottom: 5px;
	text-shadow: rgb(110,110,110)3px 3px 5px		/* text-shadows: color offsetX offsetY blur; the offset is the right, 
													 and down, and how far to stretch the blur. To turn off, set style to: none.*/
}																		

p.article_p {
	text-align: left;
    text-indent: 25px;
	color: black;
}
div, section, iframe, aside, nav, article, hgroup {
	display:block;											/* Tells the browser that every element is a block, which forces them to be displayed one under another*/
}
/* In-line Frame Properties */
iframe{
	margin: 0 auto;
	padding: 15px;
}

body{
	width:100%;  											/* Always specifies size for all browser, and is necessary for flexible box style*/
	display:-webkit-box;    								/* Tell the body that it's a parent box, and flexible boxes are gong inside it. Implemented in 
															chrome and safari, but not a standard. necessary for using webkit tools */
	-webkit-box-pack: center;  								/* Tells the browser how do we want the boxes (children, in this case big_wrapper)inside the body?*/
}

}
#big_wrapper{
	max-width: 1000px;  									/*This is so it is not too stretched on big screens, I picked an easy number to work with */
	margin: 20px 0px;										/*0px left and right, also gives a 20px margin top and bottom*/
	display:-webkit-box;									/*This is a box, it can change in size. it also has children that can change in size*/
	-webkit-box-orient: vertical; 							/*How to arrange boxes in this parent? block(vertical) or inline(horizontal)*/
	-webkit-box-flex: 1;									/*A value of 1 means flexible, 0 means not*/	

}
#top_header {
	background: blue;										/* For browsers that won't recognize CSS3*/
	background:-webkit-linear-gradient(top, black, blue);   /* Gradient fading from the top, starting with black, into blue */
	border: 3px solid black;
	padding:10px;
}
#top_header h4{
	text-align: center;
	color: white;
	font-size: 40px;
}
#logo{
 margin-left: -15px;
 
}
#top_menu{
	
	margin-bottom: -10px;
	padding-bottom: -10px;
	margin-top: 10px;
	text-align: center;
	color: white;
	}
#top_menu a{
	text-decoration: none;														/*this is the color of they links in the top menu*/
	color: white;
	font-size: 20px;
}


#top_menu a:hover{color:black;background:white;}				/* Creates a hover effect in the top menu, when you hover on a link covers basically invert */


#top_menu li{

	margin-left: 20px;
	display:inline-block; 									/*tells it to display left to right*/
	list-style:none; /* no bullets */
	padding: 8px;
	font: bold 14px Tahoma;
}
#new_div{
	display:-webkit-box; 									/* if it has boxes inside it, the parent has to be a box*/
	-webkit-box-orient:horizontal;							/* this takes the children (#main_section and #sidebar) and displays them side by side*/
}

#main_section{		
	text-align:center;										
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-box-flex: 1;									/*setting to 1 makes it flexible. This means it changes in size dynamically depending on how big the browser is. */
	margin: 20px;
	padding: 20px;  										/* by making this flexible, we don't need to do math for fiting each section. */
	border-radius:24px;	
															/*  took out for flexible 	width: 700px  sets the total width for all the main_section box. total 740/1000 pixels. */
															/*float: left;   I have taken out my floats to instead use box layout.*/
}
#sidebar{													
	display:-webkit-box;
	-webkit-box-orient: vertical;
	text-shadow: rgb(110,110,110)3px 3px 5px;				/*shadow for text color RGB() offsetright   offset down  amount of blur  */
	text-align: center;
	border: 1px solid silver;
	width:220px;											/* if there are two flexible things in a box, the browser doesn't know how to size them. Make one fixed, let the other be dynamic */
	margin: 20px;
	margin-right: 10px;										/* moves the side bar off of the right side of the screen to give a bit of white space*/
	padding: 30px;
	background:-webkit-radial-gradient(center, circle, teal 0%, #66CCCC 50%);  /*Circle radiant, doesn't show up well in this element.  where to start, shape, a color a percent, another color a percent  */
	color: gold;
	border-radius:24px;										/* rounds the corners */
															/* float:left; taken out for use of flex box model*/
}
#sidebar h1{
	padding-bottom: 5px;
	color: yellow;
}

article {														/* my default article styles, unless an id speicfies something else*/
	color: blue;
	font-size: 1em;
	max-width: 800px;
	background-color: orange;
	margin: 15px 10px 5px 10px;
	padding: 15px;
	border-radius:24px;	 									/* rounds the corners */
	box-shadow: rgba(110, 110, 115,.6) 8px 8px 10px; 		/* color RGB() offset right   offset down  amount of blur*/
}

#article_3{
	border: 1px solid red;
}
#article_4{
	background-color: #CCFF66;
	border: 1px solid #7A993D;
}


#article_2{
	border: 1px solid orange;
	background-color:gold;
}
#article_1{
	border: 1px solid black;
	margin-top: -20px;
	background-color:gray;
														/* use box-ordinal-group:x; to set order, where x is the number in line. */
}


audio, video { 
	border-radius:24px;
	display: block; 									/* Sets it as block display.*/
	margin: 5px auto; 									/* Top and bottom margin of 5px. */
	text-align: center;									/* Centers the content of the element. */
	width: 95%; 										/* Sets width to 95% of the containing element.*/
	}

/*Toy box - section of fun, nothing serious, not even relevant */
#toybox{
	text-align: center;
	margin: 15px 10px 5px 10px;
	border:1px solid teal;
	border-radius:24px;	
	box-shadow: rgba(110, 110, 115,.6) 8px 8px 10px;
	max-width: 800px;
}


/*Superman box */
#sShield{
	margin-left:50px;
	background-image: url('Graphics/slogo.jpg');
	background-size:contain;
	background-repeat: no-repeat;
	height: 400px;
	transition: transform .5s; 								/*first, what property, in this case the transformation below,  and then how long the transition should last */
}
	
/*pseudo class  */
#sShield:hover{
	transform: rotate(90deg) translate(-200px,200px);  		/* creates a rotate on hover effect */	
}

#secret{
	text-align: center;
	float: left;
	position: relative;
	left: 360px;
	top:180px;
	font: bold 30px Tahoma;
	color: green;
	text-shadow: rgb(110,160,110)3px 3px 5px;
	z-index:-1;   											/* puts this element behind stacked elements */
}

#hov {
	float:left;
	margin-top: 40px;
	font: bold 30px Tahoma;
	color: yellow;
	text-shadow: rgb(110,160,110)3px 3px 5px;
	z-index:1;
}

#elementLinks {
	list-style-type: decimal;
	text-align: left;
	margin-left: 90px;
	margin-right: 90px;
	color: brown;
}
#nestedElementLinks{
	list-style-type: lower-alpha;
	text-align: left;
	margin-left: 110px;
	margin-right: 110px;
	color: brown;
}


.footer {
	text-align: left;
	color: black;
}


#bottom_footer{
	/* clear:both is not needed, because we aren't using float right now */
	text-align: center;
	padding: 20px;
	border-top:2px solid #00006B;
	color: #000099;
}



/* Button Design
#button{
	display: block;
	margin:150px auto;
	color:white;
	-webkit-border-radius: 10px;
	opacity:0.6;  											
	background: red;
	width:120px;
	height:75px;

}
#button:hover{	
	-
}