website really messed up on older version of safari

Hi. I created website, it uses a child theme of Word Presses standard twentytwelve theme. I used a lot of CSS. I have chrome, firefox, safari, IE, and Opera installed on my computer. It works great on all, exept safari it is completely broken. I noticed my version of safari was out of date (5.17), so I tried it on my moms Imac, and it works great on the new version. Even if you don’t know it would be usefull to know if any other versions are broken. Here is the link: https://adrianhoulewebprojects.com/
Here is a link to a picture of the broken version: https://adrianhoulewebprojects.com/wp-content/uploads/2014/03/wtf.png

Completely messed up. I used a lot of shading, so I will show my CSS as maybe I need to add some support for safar for shading. But according to this it should be fine: https://dev.opera.com/articles/view/cross-browser-box-shadows/

Just skip down through my code past the global stuff and you will see were I used a ton of shading, no need to look at it start to finish.

/*
 Theme Name:   Twenty Twelve Child
 Theme URI:    https://adrianhoulewebprojects.com/public_html/wp-content/themes/twenty-twelve-child/
 Description:  Twenty Twelve Child Theme
 Author:       Adrian Houle
 Author URI:   https://adrianhoulewebprojects.com
 Template:     twentytwelve
 Version:      1.0.0
 Tags:         responsive-layout, accessibility-ready, e-portfolio, right sidebar
 Text Domain:  twenty-twelve-child
*/

@import url("../twentytwelve/style.css");

/* =Theme customization starts here
---------------------------------------------------------------------- */
/*Warning: Do not change the ordering of this style sheet!*/

/*Global****************************************************************/

/*italasize tagline*/
#masthead > hgroup > h2 {
	font-style: italic;
}

/*change font size and colour of page links*/
.main-navigation li a {
	color: #000000; /*black*/
	font-size: 1.2em;
}

/*FUNCTION - Hack, slash, resize, and unclick*************/
/*Replace name of home page tab, make current page tab larger and avoid clicks*/
/*first add on new name of tab, specify size in pixels only*/
#site-navigation > div > ul > li:nth-child(1) > a:before {
	content: "Creations";
	font-size: 14px;
	color: #000000; /*black*/
}
/*If it is current page replace the previouse command with a larger text version*/
#site-navigation > div > ul > li.current_page_item:first-child > a:before {
	content: "Creations";
	font-size: 20px;
	color: #000000; /*black*/
}
/*Make sure all page tabs are large when selected and avoid clicks*/
#site-navigation > div > ul > li.current_page_item > a {
	font-size: 20px;
	pointer-events: none;

}
/*Hide the old name of the home page tab and shrink it to nothing*/
#site-navigation > div > ul > li:nth-child(1) > a {
	font-size: 0.01px;
	color: transparent;
}
/*End of function************************************/

/*add a hover effect to all page tabs exept the creations tab, remember hover effects do not apply to elements with no pointer effect*/
#site-navigation > div > ul > li.page_item.page-item-3 > a:hover , #site-navigation > div > ul > li.page_item.page-item-5 > a:hover, #site-navigation > div > ul > li.page_item.page-item-7 > a:hover, #site-navigation > div > ul > li.page_item.page-item-53 > a:hover, #site-navigation > div > ul > li.page_item.page-item-57 > a:hover {
	font-size: 15px;
}
/*In order for the hover effect over the creations tab to not change the hidden text back to full size, recreate the content but at a larger size*/
#site-navigation > div > ul > li:nth-child(1) > a:hover:before {
	content: "Creations";
	font-size: 15px;
	color: #000000; /*black*/
}

/*Creations Page*********************************************************/

/*Color and shade posts and corisponding page tab*/
.post, #site-navigation > div > ul > li:nth-child(1) {
	background-color: #FFFFF0; /*Ivory*/
	border-width: 1px;
	border-style: solid;
	border-color: #FFFFF0; /*Ivory*/
	border-radius: 10px;
	padding: 5px;
	-moz-box-shadow:    3px 3px 5px 6px #ccc;
  	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
  	box-shadow:         3px 3px 5px 6px #ccc;

}

/*sidebar border*/
#secondary {
	background-color: #FF9494; /*salmon*/
	border-width: 1px;
	border-style: solid;
	border-color: #FF9494; /*salmon*/
	border-radius: 10px;
	padding: 5px;
	-moz-box-shadow:    3px 3px 5px 6px #ccc;
  	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
  	box-shadow:         3px 3px 5px 6px #ccc;
}

/*disable visited color change for links in sidebar*/
#secondary a:visited {
	color: #757575; /*dark grey*/
}
/*change date colors in sidebar to be more visible*/
#recent-posts-2 > ul li span {
	color: #000000; /*black*/
}

/*hide the first item in recent creations, because my sticky post is not a creation*/
#recent-posts-2 > ul > li:first-child {
	display: none;
}

/*change color of live links only*/
#post-22 > div > p:nth-child(1) > a, #post-20 > div > p:nth-child(1) > a, #post-18 > div > p:nth-child(1) > a, #post-14 > div > p:nth-child(1) > a {
	color: #0066FF; /*light blue*/
}

/*About Me Page************************************************************/

/*Color and shade posts and corisponding page tab*/
#post-3, #site-navigation > div > ul > li.page_item.page-item-3 {
	background-color: #8DC68D; /*light green*/
	border-width: 1px;
	border-style: solid;
	border-color: #8DC68D; /*light green*/
	border-radius: 10px;
	padding: 5px;
	-moz-box-shadow:    3px 3px 5px 6px #ccc;
  	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
  	box-shadow:         3px 3px 5px 6px #ccc;
}
/*change the code academy link colour to be more visible*/
#post-3 > div > p:nth-child(6) > a {
	color: #0066FF; /*light blue*/
}

/*Services Page*************************************************************/

/*Color and shade posts and corisponding page tab*/
#post-5, #site-navigation > div > ul > li.page_item.page-item-5 {
	background-color: #FFB585; /*light orange*/
	border-width: 1px;
	border-style: solid;
	border-color: #FFB585; /*light orange*/
	border-radius: 10px;
	padding: 5px;
	-moz-box-shadow:    3px 3px 5px 6px #ccc;
  	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
  	box-shadow:         3px 3px 5px 6px #ccc;
}

/*Resume Page***************************************************************/

#post-7, #site-navigation > div > ul > li.page_item.page-item-7 {
	background-color: #E6E6E6; /*light grey*/
	border-width: 1px;
	border-style: solid;
	border-color: #E6E6E6; /*light grey*/
	border-radius: 10px;
	padding: 5px;
	-moz-box-shadow:    3px 3px 5px 6px #ccc;
  	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
  	box-shadow:         3px 3px 5px 6px #ccc;
}

/*Contact Page**************************************************************/

#post-53, #site-navigation > div > ul > li.page_item.page-item-53 {
	background-color: #80B2FF; /*light blue*/
	border-width: 1px;
	border-style: solid;
	border-color: #80B2FF; /*light blue*/
	border-radius: 10px;
	padding: 5px;
	-moz-box-shadow:    3px 3px 5px 6px #ccc;
  	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
  	box-shadow:         3px 3px 5px 6px #ccc;
}

/*Learn To Code Page********************************************************/

#post-57, #site-navigation > div > ul > li.page_item.page-item-57 {
	background-color: #FFB2FF; /*light pink*/
	border-width: 1px;
	border-style: solid;
	border-color: #FFB2FF; /*light pink*/
	border-radius: 10px;
	padding: 5px;
	-moz-box-shadow:    3px 3px 5px 6px #ccc;
  	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
  	box-shadow:         3px 3px 5px 6px #ccc;
}
/*Other*/

/*comment clone*/
/**/