/********************************************************************/
/* Website Developed by : Blue Sombrero 							*/
/* Skin 033 (Canton Soccer Club)									*/
/* Created: 15 April 2015 by Anita									*/
/* Updated: 05 May 2015 by Krunal									*/
/********************************************************************/

@import url(//fonts.googleapis.com/css?family=Lato:300,400,700,900|BenchNine:300,400,700|Oswald:300,400,700);

/* Comman CSS */
/********************************************************************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,
strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,
caption,tbody,tfoot,thead,tr,th,td			{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%;
										background: transparent; }
blockquote,q								{ quotes: none; }
blockquote:before,
blockquote:after,
q:before,q:after						{ content:''; content: none; }
:focus									{ outline:none; }
ins										{ text-decoration:none; }
del										{ text-decoration:line-through; }
form										{ height: 100%; }
img										{ border: 0; padding: 0; margin: 0; }
html, body								{ text-align: left; font-size: 14px; margin: 0; padding: 0;
										font-family: 'Lato',Arial,Helvetica,sans-serif; height: 100%;
										background: #fff; color: #112839; line-height: 20px; 
										font-weight: normal; }
.AlertText a,
.AlertText a:link,
.AlertText a:visited				{color: #eabc01;}
.AlertText a:hover,
.AlertText a:focus,
.AlertText a:active				{color: #ebeaea;}
/* Text CSS */
/********************************************************************/
h1, h2, h3, h4, h5, h6					{ font-family: 'BenchNine',Arial,Helvetica,sans-serif; 
										font-weight: bold; color: #429538; padding: 0 0 18px 0; }
h1										{ font-size: 52px; line-height: 62px; }
h2										{ font-size: 32px; line-height: 36px; }
h3										{ font-size: 26px; line-height: 32px; }
h4										{ font-size: 20px; line-height: 22px; }
h5	 									{ font-size: 18px; line-height: 20px; }
h6										{ font-size: 16px; line-height: 20px; }
p										{ padding: 0 0 18px 0; }
ul, ol									{ padding: 0 0 18px 0; margin: 0 0 0 24px;}
sup										{ vertical-align: top; font-size: 8px; }
small									{ font-size: 8px; }
td[valign=middle]						{ vertical-align: middle; }
td[valign=top]							{ vertical-align: top; }
td[valign=bottom]						{ vertical-align: bottom; }
.Normal, 
.NormalDisabled,
.BoldText,
.NormalRed,
.SubHead,
.SkinObject								{ font-family: 'Lato',Arial,Helvetica,sans-serif; font-weight:normal;
										font-size: 14px; line-height: 20px; text-align: left; }

.Normal, .NormalDisabled				{ color:#112839; }
.BoldText								{ color:#112839; font-weight:bold;}
.NormalRed								{ color:#cd0000; font-weight:bold; }
.SubHead								{ color:#2a8bd1; }
.SkinObject								{ color:#9e1d1b; }

/* Link CSS */
/********************************************************************/
a, a:link, a:visited,
a.CommandButton, 
a.CommandButton:link, 
a.CommandButton:visited,
a.SkinObject, 
a.SkinObject:link,
a.SkinObject:visited					{ font-family: 'Lato',Arial,Helvetica,sans-serif;
										font-weight: normal; font-size: inherit; text-decoration: none;
										line-height: inherit; color: #429538; }
a:active, a:hover, a:focus,
a.CommandButton:active, 
a.CommandButton:hover, 
a.CommandButton:focus,
a.SkinObject:hover , 
a.SkinObject:focus,
a.SkinObject:active						{ color: #000; }
.paneOutline							{ outline: 1px dotted #000; border: none; }
.paneOutline center						{ text-align: center; }
.paneOutline .SubHead					{ color: #000; }

/* DNN Empty Pane CSS For IE */
/********************************************************************/
.DNNEmptyPane							{ font-size: 0px; line-height: 0px; display: none; }

/* Input CSS */
/********************************************************************/
input.NormalTextBox,
textarea.NormalTextBox,
select.NormalTextBox						{ font-family: 'Lato',Arial,Helvetica,sans-serif;
										font-weight:normal; font-size: 14px; line-height: 22px;
										height: 22px; background: #f6f6f6; border: 1px solid #acacac; 
										padding: 2px 8px; margin: 2px 0px; color:#222; }
select.NormalTextBox						{ padding: 2px 2px 2px 8px; }
input.NormalTextBox:focus, 
input.NormalTextBox:hover,
textarea.NormalTextBox:focus,
textarea.NormalTextBox:hover,
select.NormalTextBox:focus,
select.NormalTextBox:hover				{ border-color:#222; }
textarea.NormalTextBox, select.NormalTextBox
										{ height: auto; }

/* Button CSS */
/********************************************************************/
.StandardButton							{ background: #1763a2; color: #fff; display: inline-block; border: 1px solid #115592;
										font-size: 14px; line-height: 20px; margin: 12px 0; padding: 8px 12px; }
.StandardButton:hover, 
.StandardButton:focus					{ background: #b42120; border-color: #741413; outline: none; text-decoration: none; 
										color: #fff; }

/* Float CSS */
/********************************************************************/
.float-left								{ float:left; }
.float-right							{ float:right; }
.clear:after							{ clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.clear-both								{ clear:both; font-size: 0px; line-height: 0px; height: 0px; }

/* DNN Overwrite CSS */
/********************************************************************/
.textAlignRight							{ text-align: right; }
.textAlignCenter						{ text-align: center; }
.FileManager_FileList 					{ margin: 2px 0 0 0; }
.rgMasterTable							{ width: 100%; }
.rgCurrentPage span						{ line-height: 22px; }
input.rgPagerTextBox						{ width: 24px!important; }
.termsContainer, 
.privacyContainer						{ padding: 12px; }
.FileManager_FileList 					{ margin: 2px 0 0 0; }
.rgMasterTable							{ width: 100%; }
.rgCurrentPage span						{ line-height: 22px; }
input.rgPagerTextBox						{ width: 24px!important; }

/* DNN 6 Fix */
/********************************************************************/
#dnnCPWrap a,
#dnnCPWrap a:link,
#dnnCPWrap a:visited						{ text-decoration: none; }
#dnnCPWrap a:hover span, #dnnCPWrap a:active span,
#dnnCPWrap a:focus span, #dnnCommonTasks a:hover, 
#dnnCommonTasks a:active, #dnnCommonTasks a:focus, 
#dnnCurrentPage a:hover, #dnnCurrentPage a:active, 
#dnnCurrentPage a:focus, #dnnOtherTools a:hover, 
#dnnOtherTools a:active, #dnnOtherTools a:focus
										{ text-decoration: underline; }

/* Skin CSS */
/********************************************************************/
.spArea									{ background: #005030 url(images/splash-bg.jpg) center center no-repeat; min-height: 100%; _height: 100%; text-align: center; }
.spArea h1.spHead						{ font-family: 'Lato',Arial,Helvetica,sans-serif; color: #fff; margin: 18px 0 18px 0; padding: 0; font-size: 40px; }
.spRow									{ width: 1400px; margin: auto; }
.spCol									{ float: left; width: 33.33%; }
.spBlue									{ background: #00395a; }
.spYellow								{ background: #e8ad0f; }
.spGreen								{ background: #419639; }
.spArea a.spLink,
.spArea a.spLink:link,
.spArea a.spLink:visited					{ color: #fff; display: block; padding: 10px 60px 22px; 
										transition: all .2s ease-in-out; text-align: center; }
.spBlue,
.spYellow,
.spGreen								{ transition: all .2s ease-in-out; position: relative; }
.spBlue:hover, 
.spBlue:focus, 
.spBlue:active,
.spYellow:hover, 
.spYellow:focus, 
.spYellow:active,
.spGreen:hover, 
.spGreen:focus, 
.spGreen:active							{ -webkit-box-shadow: 0 0 10px #49d338, inset 0 0 0 10px rgba(0,0,0,0.5); 
										-moz-box-shadow: 0 0 10px #49d338, inset 0 0 0 10px rgba(0,0,0,0.5); 
										box-shadow: 0 0 10px #49d338, inset 0 0 0 10px rgba(0,0,0,0.5); 
										z-index: 1; }
.spArea a.spLink:hover img,
.spArea a.spLink:focus img,
.spArea a.spLink:active img				{ transform: scale(1.05); }
.spArea .spLink .title,
.spArea .spLink .detail					{ display: block; }
.spWrapper								{ padding: 12px 0; margin: auto; }
.spArea .spLink .title					{ font-size: 30px; line-height: 42px; font-weight: bold; margin: 0 0 12px 0; }
.spArea .spLink .detail					{ font-size: 18px; line-height: 24px; min-height: 48px; }
.spWrapper > img 						{ max-width: 200px; }
.spLink > img 							{ max-width: 150px; }

/* Skin CSS */
/********************************************************************/
.skWidth							{ width: 940px; margin: auto; }
.skCntArea							{ width: 970px; margin: auto; background: #fff; }
.skInner							{ padding: 0 0 24px 0; }
.skContent							{ background: #fff url(images/sk-bg.jpg) top center repeat-y; padding: 24px 0 0 0; }
.inner-width						{ display: table; max-width: 100%; }
.inner-table						{ display: table; width: 100%; }
.inner-cell							{ display: table-cell; }
#Body .LeftPane						{ width: 620px; padding: 0 20px 0 0; }
#Body .RightPane						{ width: 300px; }

.skGray								{ background: #e1e1e1; text-align: center; padding: 8px 0; }
ul.banner							{ margin: 0 6px; padding: 0; display: inline-block; *display: inline; zoom: 1; vertical-align: middle; }
ul.banner li							{ display: inline-block; *display: inline; zoom: 1; list-style: none; margin: 0 6px 0 0; padding: 0; }
.skAction a.link,
.skAction a.link:link,
.skAction a.link:visited				{ font-size: 16px; line-height: 20px; text-transform: uppercase;
									text-decoration: none; display: inline-block; *display: inline; *zoom: 1;
									padding: 6px 14px; color: #fff; background: #429538; margin: 0 6px;
									float: left; font-weight: bold; vertical-align: middle; -webkit-transition: all 0.5s; 
									-o-transition: all 0.5s; transition: all 0.5s; }
.skAction a.link:hover,
.skAction a.link:focus,
.skAction a.link:active				{ background: #000; color: #fff; }
.skAction,
.skSocial							{ display: inline-block; *display: inline; zoom: 1; vertical-align: middle; }
.skSocial a.link,
.skSocial a.link:link,
.skSocial a.link:visited				{ float: left; display: block; text-indent: -9999px; height: 30px; width: 30px; 
									margin: 0 0 0 10px; background: transparent url(images/social-icon.png) 0 0 no-repeat; 
									-webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.skSocial a.facebook,
.skSocial a.facebook:link,
.skSocial a.facebook:visited			{ background-position: 0 0; }
.skSocial a.facebook:hover,
.skSocial a.facebook:active,
.skSocial a.facebook:focus			{ background-position: 0 -30px; }
.skSocial a.twitter,
.skSocial a.twitter:link,
.skSocial a.twitter:visited			{ background-position: -30px 0; }
.skSocial a.twitter:hover,
.skSocial a.twitter:active,
.skSocial a.twitter:focus			{ background-position: -30px -30px; }
.skSocial a.youtube,
.skSocial a.youtube:link,
.skSocial a.youtube:visited			{ background-position: -60px 0; }
.skSocial a.youtube:hover,
.skSocial a.youtube:focus			{ background-position: -60px -30px; }
.skSocial a.instagram,
.skSocial a.instagram:link,
.skSocial a.instagram:visited		{ background-position: -90px 0; }
.skSocial a.instagram:hover,
.skSocial a.instagram:focus			{ background-position: -90px -30px; }
.skSocial a.google,
.skSocial a.google:link,
.skSocial a.google:visited			{ background-position: -120px 0; }
.skSocial a.google:hover,
.skSocial a.google:focus				{ background-position: -120px -30px; }
.skSocial a.pinterest,
.skSocial a.pinterest:link,
.skSocial a.pinterest:visited		{ background-position: -150px 0; }
.skSocial a.pinterest:hover,
.skSocial a.pinterest:focus			{ background-position: -150px -30px; }
.skHeader							{ background: #429538; border-bottom: 1px solid #fff; text-align: center; padding: 8px 0; }
.skHeader *							{ vertical-align: middle; }
.skLogo,
.skBanner							{ display: inline-block; *display: inline; zoom: 1; }
.skLogo a img							{ -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.skLogo a:hover img					{ -moz-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95);
									-ms-transform: scale(0.95); transform: scale(0.95); }
.skBanner							{ padding: 0 18px; }
.skNav								{ background: #000; }

/* Club Home */
/********************************************************************/
.skNews								{ width: 300px; float: right; }
.skRow								{ padding: 0 0 48px 0; }

/* Field Status:  */
/********************************************************************/
.skFieldDirectory					{ background-color: #000; color: #fff; font-size: 16px; line-height: 20px; padding: 4px 0; vertical-align: middle; text-align: center; }
.skFieldDirectory * 					{ vertical-align: middle; }
.skFieldDirectory .head				{ color: #d9bf10; text-transform: uppercase; font-weight: bold; margin: 0 8px; display: inline-block; *display: inline; zoom: 1; }
.skFieldDirectory a.link,
.skFieldDirectory a.link:link,
.skFieldDirectory a.link:visited		{ font-size: 14px; line-height: 18px; color: #d9bf10; text-transform: uppercase; text-decoration: underline; margin: 0 8px; 
									display: inline-block; *display: inline; zoom: 1; }
.skFieldDirectory a.link:hover,
.skFieldDirectory a.link:focus,
.skFieldDirectory a.link:active		{ color: #fff; }

/* Container Home */
/********************************************************************/
.skContainer h2.head					{ background: #000; color: #fff; font-family: 'BenchNine',Arial,Helvetica,sans-serif; 
									padding: 2px 12px; font-size: 30px; line-height: 42px; }

/* Button */
/********************************************************************/
a.btnGreen,
a.btnGreen:link,
a.btnGreen:visited					{ background: #429538; font-size: 16px; line-height: 20px; color: #fff; 
									text-transform: uppercase; padding: 6px 14px; display: block; font-weight: bold;
									display: inline-block; *display: inline; zoom: 1; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
a.btnGreen:hover,
a.btnGreen:focus,
a.btnGreen:active					{ background: #000; color: #fff; }

/* Sponsors */
/********************************************************************/
.skSponsor							{ position: relative; padding: 0 60px; }
.skSponsor ul.list					{ margin: 0; padding: 0; }
.skSponsor ul.list li.item				{ margin: 0; padding: 0 12px; list-style: none; float: left; }
.skSponsor ul.list a img				{ -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.skSponsor ul.list a:hover img			{ -moz-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95);
									-ms-transform: scale(0.95); transform: scale(0.95); }
.skSponsor .prev,
.skSponsor .next						{ top: 50%; height: 60px; width: 35px; margin: -30px 0 0 0; position: absolute;
									background: transparent url(images/sponsor-arrow.png) left top no-repeat;
									z-index: 1; text-indent: -999px; overflow: hidden; }
.skSponsor .prev						{ left: 0; }
.skSponsor .next						{ right: 0; background-position: right top; }
.skSponsor .prev:hover				{ background-position: left bottom; }
.skSponsor .next:hover				{ background-position: right bottom; }

/* News */
/********************************************************************/
ul.news								{ padding: 0; margin: 0;}
ul.news li.item						{ list-style: none; margin: 0; padding: 2px 0; }
ul.news li.alt							{ background: #e1e1e1; }
ul.news li.item:after					{ clear: both; content: "."; display: block; height: 0; visibility: hidden; }
ul.news img							{ float: left; width: 100px; height: 75px; margin: 0 12px 0 0; }
ul.news .summary						{ padding: 12px 0; font-size: 16px; line-height: 20px; }
ul.news a,
ul.news a:link,
ul.news a:visited						{ font-size: 16px; line-height: 20px; text-decoration: underline; }

/* Announcement */
/********************************************************************/
ul.announcement						{ margin: -10px; padding: 0; }
ul.announcement li.item 				{ float: left; width: 300px; margin: 0; padding: 10px; list-style: none; }
ul.announcement .detail				{ position: relative; overflow: hidden; height: 300px; width: 300px; display: block; }
ul.announcement .popup				{ position: absolute; top: 100%; left: 0; height: 100%; width: 100%; background: #000; background-color: rgba(66,149,56,0.8); }
ul.announcement .summary				{ padding: 18px; color: #fff; text-shadow: 0 0 6px #000; display: block; }
ul.announcement .title				{ margin: 0; padding: 0; display: block; background: #e1e1e1; border-bottom: 9px solid transparent; 
									color: #000; font-size: 20px; line-height: 26px; padding: 8px; }
ul.announcement a.link,
ul.announcement a.link:link,
ul.announcement a.link:visited		{ display: block; }
ul.announcement a.link:hover .title,
ul.announcement a.link:focus .title,
ul.announcement a.link:active	 .title	{ border-bottom-color: #429538; }

/* Footer */
/********************************************************************/
.skFooter							{ background: #429538; padding: 34px 0; }
.ftLinks							{ float: left; width: 156px; }
.skFooter ul.skLink					{ margin: 0; padding: 0; }
.skFooter ul.skLink li					{ list-style: none; margin: 0; padding: 2px 0; }
.skFooter ul.skLink li a,
.skFooter ul.skLink li a:link,
.skFooter ul.skLink li a:visited		{ font-size: 16px; line-height: 20px; color: #fff; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.skFooter ul.skLink li a:hover,
.skFooter ul.skLink li a:focus,
.skFooter ul.skLink li a:active			{ color: #000; }
h2.ftHead							{ font-family: 'Lato',Arial,Helvetica,sans-serif; font-size: 16px; line-height: 20px; color: #fff; text-transform: uppercase; padding: 0 0 18px 0; }
.skInfo								{ background: #e1e1e1; padding: 25px 0; color: #157108; line-height: 30px; }
.skInfo .SkinObject,
.skInfo a.SkinObject,
.skInfo a.SkinObject:link,
.skInfo a.SkinObject:visited			{ line-height: 30px; color: #157108; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.skInfo a.SkinObject:hover			{ color: #000; }
.skInfo .left						{ float: left; }
.skInfo .right						{ float: right; }
.skInfo .right a img					{ -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.skInfo .right a:hover img			{ -moz-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95);
									-ms-transform: scale(0.95); transform: scale(0.95); }

/* Slider */
/********************************************************************/
.skSlider							{ width: 620px; float: left; }

/* Events */
/********************************************************************/
.skEvents							{ float: right; width: 300px; }
.skEvents ul.list					{ margin: 0; padding: 0; }
.skEvents li.item						{ margin: 0; padding: 6px 12px; list-style: none; font-size: 16px; line-height: 24px; color: #404040; }
.skEvents li.item.alt					{ background: #e1e1e1; }
.skEvents li.item:after				{ clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.skEvents .date						{ float: right; }

/* Slider */
/********************************************************************/
.skSocialMedia						{ width: 620px; float: left; }
ul.skTabs							{ float: left; width: 220px; margin: 0; padding: 0; }
ul.skTabs li							{ margin: 0; padding: 0; list-style: none; }
ul.skTabs li:nth-child(odd)			{ background: #e1e1e1; }
ul.skTabs li a,
ul.skTabs li a:link,
ul.skTabs li a:visited					{ display: block; font-size: 20px; line-height: 36px; color: #157108; padding: 10px 20px; position: relative;
									-webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
ul.skTabs li a:hover					{ background: #c2c2c2; }
ul.skTabs li.ui-tabs-active a			{ background: #429538; color: #fff; }
ul.skTabs li.ui-tabs-active a:after	{ position: absolute; content: ""; height: 0; width: 0; font-size: 0; line-height: 0; 
									border-right: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
									border-left: 10px solid #429538; right: -10px; top: 50%; margin: -10px 0 0 0; z-index: 1; }
ul.skTabs li .icon						{ display: inline-block; *display: inline; zoom: 1; height: 36px; width: 36px;
									background: transparent url(images/tabs-social-icn.png) 0 0 no-repeat; margin: 0 12px 0 0; }
ul.skTabs .facebook .icon				{ background-position: 0 0; }
ul.skTabs .twitter .icon				{ background-position: -36px 0; }
ul.skTabs .instagram .icon			{ background-position: -72px 0; }
ul.skTabs li.ui-tabs-active a.facebook .icon
									{ background-position: 0 -36px; }
ul.skTabs li.ui-tabs-active a.twitter .icon
									{ background-position: -36px -36px; }
ul.skTabs li.ui-tabs-active a.instagram .icon
									{ background-position: -72px -36px; }
.skSocialMedia .feeds				{ float: left; width: 357px; padding: 0 20px; height: 385px; overflow-x: auto; }
.skSocialMedia .content:after		{ position: absolute; content: ""; top: 0; left: 220px; height: 100%; width: 1px; background: #c7c7c7; }
.skSocialMedia .content				{ background: #fff; border: 1px solid #c7c7c7; position: relative; }

/* Facebook */
/********************************************************************/
.fb-wall-box						{ padding: 12px 0; border-bottom: 1px solid #157108; position: relative; }
.fb-wall-box > a,
.fb-wall-box .fb-wall-media,
.fb-wall-box .fb-wall-icon,
.fb-wall-box .fb-wall-likes			{ display: none; }
.fb-wall-date						{ position: absolute; top: 10px; right: 0; text-align: right; font-size: 12px; font-style: italic; color: #6b6b6b; }
.fb-wall-message-from				{ display: block; margin: 0 130px 0 0; }

/* Twitter */
/********************************************************************/
ul.tweet_list						{ margin: 0; padding: 0; }
ul.tweet_list li						{ margin: 0; padding: 12px 0; list-style: none; border-bottom: 1px solid #157108; position: relative; }
ul.tweet_list .tweet_time			{ display: block; }

/* Instagram */
/********************************************************************/
ul.instagram							{ margin: 0; padding: 0; }
ul.instagram li:after					{ clear: both; content: "."; display: block; height: 0; visibility: hidden; }
ul.instagram li						{ margin: 0; padding: 12px 0; list-style: none; border-bottom: 1px solid #157108; position: relative; }
ul.instagram .link					{ float: left; margin: 0 12px 0 0; }
ul.instagram h4.title					{ font-family: 'Lato',Arial,Helvetica,sans-serif; padding: 0 0 6px 0; }

/* Player Of The Week */
/********************************************************************/
.skPlayerOfWeek,
.respPlayerOfWeek					{ background: #e1e1e1; }
.respPlayerOfWeek					{ display: none; }
.skPlayerOfWeek .content				{ padding: 18px; }
.skPlayerOfWeek h1 					{ font-family: 'Lato',Arial,Helvetica,sans-serif; font-size: 36px; line-height: 42px; margin: 0; padding: 0; }
.skPlayerOfWeek h2 					{ font-family: 'Lato',Arial,Helvetica,sans-serif; font-size: 18px; line-height: 24px; margin: 0; padding: 0; color: #000; }
.skPlayerOfWeek a.link				{ display: inline-block; *display: inline; zoom: 1; margin: 6px 0 0 0; }
.skPlayerOfWeek .banner				{ background: #000; }