/*
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/

reset*/
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, DL, DT, DD, OL, NAV UL, NAV LI, FIELDSET, FORM, LABEL, LEGEND, TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD, ARTICLE, ASIDE, CANVAS, DETAILS, EMBED, FIGURE, FIGCAPTION, FOOTER, HEADER, HGROUP, MENU, NAV, OUTPUT, RUBY, SECTION, SUMMARY, TIME, MARK, AUDIO, VIDEO
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-size: 1em;
	color: #FFFFFF;
}
ARTICLE, ASIDE, DETAILS, FIGCAPTION, FIGURE, FOOTER, HEADER, HGROUP, MENU, NAV, SECTION
{
	display: block;
}
OL, UL
{
	list-style: none;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	font-size: 1em;
}
BLOCKQUOTE, Q
{
	quotes: none;
}
BLOCKQUOTE:before, BLOCKQUOTE:after, Q:before, Q:after
{
	content: '';
	content: none;
}
TABLE
{
	border-collapse: collapse;
	border-spacing: 0;
}
/*start editing from here*/
A
{
	text-decoration: none;
}
.txt-rt
{
	text-align: right;
}
/*text align right*/
.txt-lt
{
	text-align: left;
}
/*text align left*/
.txt-center
{
	text-align: center;
}
/*text align center*/
.float-rt
{
	float: right;
}
/*float right*/
.float-lt
{
	float: left;
}
/*float left*/
.clear
{
	clear: both;
}
/*clear float*/
.pos-relative
{
	position: relative;
}
/*Position Relative*/
.pos-absolute
{
	position: absolute;
}
/*Position Absolute*/
.vertical-base
{
	vertical-align: baseline;
}
/*vertical align baseline*/
.vertical-top
{
	vertical-align: top;
}
/*vertical align top*/
.underline
{
	padding-bottom: 5px;
	border-bottom: 1px solid #EEE;
	margin: 0 0 20px;
}
/*Add 5px bottom padding and a underline*/
NAV.vertical UL LI
{
	display: block;
}
/*vertical menu*/
NAV.horizontal UL LI
{
	display: inline-block;
}
/*horizontal menu*/
IMG
{
	max-width: 100%;
}
@font-face
{
	font-family: ambleregular;
	src: url(../fonts/Amble-Regular-webfont.ttf) format('truetype');
}
BODY
{
	font-family: ambleregular;
	background: #1F253D;
	margin-top: 30px;
}
.wrap
{
	width: 80%;
	margin: 0 auto;
	transition: all .2s linear;
	-moz-transition: all .2s linear;
	/*firefox*/
	-webkit-transition: all .2s linear;
	/*safari and chrome*/
	-o-transition: all .2s linear;
	/*opera*/
	-ms-transition: all .2s linear;
}
.header_top
{
	background: #394264;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	position: relative;
    margin-bottom: 30px;
}
/********* profile details **********/
.profile_details
{
	float: right;
	margin: 15px 25px;
}
/*-------LOGIN STARTS HERE -------*/
#loginContainer
{
	position: relative;
	float: left;
	padding-right: 10px;
	padding-top: 15px;
}
/*Login Button*/
#loginButton
{
	display: inline-block;
	position: relative;
	z-index: 30;
	cursor: pointer;
}
/*Login Button Text*/
#loginButton SPAN
{
	color: #FFF;
	font-size: 1em;
	background: url(../images/loginArrow.png) no-repeat 26px 8px;
	display: block;
	padding: 0 30px 0 0;
	font-family: ambleregular;
}
#loginButton.active SPAN
{
	background-position: 26px -20px;
}
/*Login Box*/
#loginBox
{
	position: absolute;
	top: 53px;
	right: 10px;
	display: none;
	z-index: 29;
}
/*Login Form*/
#loginForm
{
	width: 200px;
	background: #1F253D;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border-radius: 5px;
	position: relative;
}
#loginForm:after
{
	content: '';
	position: absolute;
	right: 40px;
	top: -6px;
	border-left: 6px solid rgba(0, 0, 0, 0);
	border-right: 6px solid rgba(0, 0, 0, 0);
	border-bottom: 6px solid #1F253D;
}
FIELDSET#body
{
	padding: 15px;
}
.user-info H4
{
	font-size: 1em;
	color: #FFF;
	padding-bottom: 15px;
	text-align: center;
}
.user-info H4 A
{
	color: #11A8AB;
}
.user-info UL LI.profile
{
	float: left;
}
.user-info UL LI.logout
{
	float: right;
}
.user-info UL LI
{
	display: inline-block;
}
.user-info UL LI A
{
	padding: 8px 15px;
	color: #FFF;
	font-size: 0.85em;
	border: none;
	display: block;
	background: #50597B;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.user-info UL LI A:hover, .user-info UL LI.active A
{
	background: #E64C65;
}
.profile_img
{
	float: right;
}
.profile_img IMG
{
	display: block;
	border-radius: 3em;
	-webkit-border-radius: 3em;
	-moz-border-radius: 3em;
	-o-border-radius: 3em;
	border: 3px solid #50597B;
}
.icon
{
	font-size: 20px;
	margin-bottom: -10px;
	margin-right: 10px;
}
.icon_light
{
	color: #9099B7;
	font-size: 20px;
	margin-bottom: -10px;
	margin-right: 10px;
}
.icon_today
{
	color: #FFFFFF;
	font-size: 90px;
}
.icon_fcast
{
	color: #9099B7;
	font-size: 1.7em;
}
/********* Main ************/
.main
{
	//padding: 30px 0;
}
.column_left, .column_middle, .column_right
{
	float: left;
	width: 31.3%;
}
.column_middle
{
	margin: 0 3%;
}
.column_middle_right
{
	float: left;
	margin: 0 0 0 3%;
	width: 65.6%;
}
/******** Colunm Left *************/
.header H3
{
	color: #FFF;
	font-size: 1.2em;
	text-transform: uppercase;
	padding: 20px 0;
	text-align: center;
	background: #11A8AB;
	border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
}
.menu_box_list
{
	background: #394264;
	border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-o-border-radius: 0px 0px 5px 5px;
}
.menu_box_list LI A
{
	display: block;
	color: #FFF;
	font-size: 1em;
	border-bottom: 1px solid #1F253D;
	padding: 20px 30px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.menu_box_list LI A:hover, .menu_box_list LI.active A
{
	background: #50597B;
}
.menu_box_list LI A SPAN
{
	padding-left: 45px;
}
.menu_box_list LI A LABEL
{
	background: #50597B;
	color: #FFF;
	font-size: 1em;
	float: right;
	padding: 3px 15px;
	border-radius: 1em;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.menu_box_list LI A LABEL.active, .menu_box_list LI A:hover LABEL
{
	background: #E64C65;
}
.menu_box_list LI A.messages
{
	background-image: url(../images/mail.png);
	background-repeat: no-repeat;
	background-position: 30px 13px;
}
.menu_box_list LI A.messages:hover
{
	background-image: url(../images/mail-hover.png);
}
.menu_box_list LI A.invites
{
	background-image: url(../images/invites.png);
	background-repeat: no-repeat;
	background-position: 30px 13px;
}
.menu_box_list LI A.invites:hover, .menu_box_list LI.active A
{
	background-image: url(../images/invites-hover.png);
}
.menu_box_list LI A.events
{
	background-image: url(../images/events.png);
	background-repeat: no-repeat;
	background-position: 30px 13px;
}
.menu_box_list LI A.events:hover
{
	background-image: url(../images/events-hover.png);
}
.menu_box_list LI A.account_settings
{
	background-image: url(../images/settings.png);
	background-repeat: no-repeat;
	background-position: 30px 13px;
}
.menu_box_list LI A.account_settings:hover
{
	background-image: url(../images/settings-hover.png);
}
.menu_box_list LI A.statistics
{
	background-image: url(../images/statistics.png);
	background-repeat: no-repeat;
	background-position: 30px 13px;
}
.menu_box_list LI A.statistics:hover
{
	background-image: url(../images/statistics-hover.png);
}
/******* Charts *********/
.chart
{
	margin-bottom: 30px;
	background: #394264;
	text-align: center;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}
.chart H4
{
	font-size: 1.6em;
	color: #9099B7;
	margin-top: -6.5em;
}
.chart H4 SPAN
{
	color: #FFF;
}
.chart H3
{
	color: #FFF;
	font-size: 1.2em;
	text-transform: uppercase;
	background: #50597B repeat 0 0;
	border-radius: 5px 5px 0 0;
	padding: 15px 0;
}
.diagram
{
	min-height: 270px;
}
.chart CANVAS
{
	padding: 2em 0;
	display: block;
	margin: 0 auto;
	position: relative;
}
.chart_list
{
	background: #3F4663;
	text-align: center;
	border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-o-border-radius: 0px 0px 5px 5px;
}
.chart_list LI
{
	float: left;
	width: 24.8%;
	border-right: 1px solid #1F253D;
}
.chart_list LI
{
	display: block;
	color: #9099B7;
	font-size: 1em;
	padding: 10px 0;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	cursor: pointer;
}
.chart_list LI.active
{
	background: #4F587B;
}
.chart_list LI:hover, .chart_list LI.active:hover
{
	background: #FCB150;
}
.chart_list LI:last-child
{
	border-right: none;
}
.chart_list LI.red
{
	border-top: 5px solid #E64C65;
}
.chart_list LI.purple
{
	border-top: 5px solid #11A8AB;
}
.chart_list LI.yellow
{
	border-top: 5px solid #FCB150;
}
.chart_list LI.blue
{
	border-top: 5px solid #4FC4F6;
}
.chart_list P
{
	font-size: 1.5em;
	color: #FFF;
	padding-top: 5px;
}
.chart_list EM
{
	font-size: 0.7em;
	vertical-align: top;
}
.spacer
{
	clear: both;
	border-bottom: 1px solid #1F253D;
}
/********* Graph ************/
.wind
{
	float: left;
	min-width: 50%;
	margin-bottom: 5px;
	margin-top: 5px;
}
.graph
{
	margin-top: 30px;
}
.graph CANVAS
{
	padding: 20px 48px;
	display: block;
	background: #11A8AB;
	border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
}
.graph IMG
{
	display: block;
	width: 100%;
	border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
}
.graph_list
{
	padding: 25px;
	background: #394264;
	border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-o-border-radius: 0px 0px 5px 5px;
}
.week-month-year
{
	text-align: center;
	margin-bottom: 20px;
}
.week-month-year P
{
	display: inline-block;
	margin-left: 5px;
}
.week-month-year P:first-child
{
	margin-left: 0;
}
.week-month-year P A
{
	padding: 8px 15px;
	color: #FFF;
	font-size: 0.85em;
	border: none;
	display: block;
	background: #50597B;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.week-month-year P A:hover, .week-month-year P A.active
{
	background: #E64C65;
}
.graph_list LI A
{
	display: block;
	color: #9099B7;
	font-size: 1em;
	text-transform: uppercase;
	padding: 10px 0;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.graph_list LI A SPAN
{
	color: #FFF;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.graph_list LI A LABEL
{
	color: #FFF;
	font-size: 1em;
	float: right;
	letter-spacing: 1px;
}
.graph_list LI A LABEL SPAN
{
	color: #E64C65;
}
.graph_list LI A LABEL EM
{
	font-size: 0.7em;
	vertical-align: 0.8em;
}
/****** video Player *******/
.video_palyer
{
	margin-top: 30px;
}
.video_palyer IFRAME
{
	height: 290px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}
/***** Social Likes **********/
.social_network_likes
{
	margin-top: 30px;
	text-align: center;
}
.social_network_likes LI
{
	float: left;
	width: 25%;
}
.social_network_likes LI A
{
	display: block;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.social_network_likes LI A > I
{
	display: block;
	background: #1A4E95;
	padding: 20px 0;
}
.social_network_likes LI A SPAN
{
	display: block;
	font-size: 1em;
	color: #FFF;
	text-transform: uppercase;
	padding: 10px 0;
}
.social_network_likes LI A.facebook
{
	background: #1A4E95;
	border-radius: 5px 0px 0px 5px;
}
.social_network_likes LI A.facebook:hover
{
	background: #094291;
}
.social_network_likes LI A.facebook > I
{
	background: #3468AF;
	border-radius: 5px 0px 0px 0px;
}
.social_network_likes LI A.twitter
{
	background: #35AADC;
}
.social_network_likes LI A.twitter:hover
{
	background: #0C94CE;
}
.social_network_likes LI A.twitter > I
{
	background: #4FC4F6;
}
.social_network_likes LI A.googleplus
{
	background: #CC324B;
}
.social_network_likes LI A.googleplus:hover
{
	background: #CA2540;
}
.social_network_likes LI A.googleplus > I
{
	background: #E64C65;
}
.social_network_likes LI A.mail
{
	background: #363F61;
	border-radius: 0px 5px 5px 0px;
}
.social_network_likes LI A.mail:hover
{
	background: #30395A;
}
.social_network_likes LI A.mail > I
{
	background: #50597B;
	border-radius: 0px 5px 0px 0px;
}
/********* Column Middle ***********/
.webcam
{
	padding: 0.6em;
	text-align: center;
	position: relative;
}
.webcam SPAN
{
	background: #9099B7 repeat 0 0;
	border: 5px solid #50597B;
	border-radius: 0.6em;
	font-size: 16px;
	font-weight: bold;
	padding: 5px;
	position: absolute;
	right: 8px;
	top: 10px;
}
.webcam A
{
	display: block;
}
.webcam > A > IMG
{
	display: block;
	margin: 0 auto;
	border: 5px solid #50597B;
	border-radius: 0.6em;
	-webkit-border-radius: 0.6em;
	-moz-border-radius: 0.6em;
	-o-border-radius: 0.6em;
	width: 97%;
}
.profile_picture_name
{
	padding-top: 2em;
}
.profile_picture_name H2
{
	font-size: 1.5em;
	color: #FFF;
	margin-bottom: 15px;
}
.profile_picture_name P
{
	font-size: 1em;
	color: #9099B7;
	line-height: 1.6em;
}
.articles_list
{
	background: #50597B;
	text-align: center;
	border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-o-border-radius: 0px 0px 5px 5px;
}
.articles_list LI
{
	float: left;
	width: 33.1%;
	border-right: 1px solid #1F253D;
}
.articles_list LI A
{
	display: block;
	color: #FFF;
	font-size: 1em;
	padding: 20px 0;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.articles_list LI A:hover
{
	background: #3F4663;
}
.articles_list LI A IMG
{
	vertical-align: middle;
	padding-right: 5px;
}
.articles_list LI:nth-child(3)
{
	border-right: none;
}
.articles_list LI A.red
{
	border-top: 5px solid #E64C65;
}
.articles_list LI A.purple
{
	border-top: 5px solid #11A8AB;
}
.articles_list LI A.yellow
{
	border-top: 5px solid #FCB150;
}
/*** Weather *******/
.weather
{
	margin-bottom:  30px;
}
.weather H3, .tweets H3
{
	color: #FFF;
	font-size: 1.2em;
	text-transform: uppercase;
	padding: 15px 0;
	text-align: center;
	background: #CC324B;
	border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
}
H3 IMG
{
	vertical-align: middle;
}
.today_temp
{
	padding: 1em 0;
	background: #E64C65;
	text-align: center;
}
.today_temp > FIGURE
{
	float: left;
	width: 30%;
	font-size: 1.2em;
	color: #FFF;
	text-align: center;
	padding: 0;
}
.today_temp > FIGURE .digit
{
	float: left;
	font-size: 2.8em;
	text-align: right;
	width: 60%;
}
.today_temp > FIGURE .marker
{
	float: right;
	font-size: 0.8em;
	margin-left: 0.2em;
	margin-right: 0.4em;
	text-align: left;
	text-transform: none;
	width: 30%;
}
.today_temp FIGURE SPAN
{
	font-size: 4em;
	color: #FFF;
	display: block;
	margin-top: -5px;
}
.today_temp FIGURE SPAN EM
{
	font-size: 0.3em;
	vertical-align: 1.7em;
}
.temp_list, .sun_list
{
	background: #394264;
	border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-o-border-radius: 0px 0px 5px 5px;
}
.temp_list LI, .sun_list LI
{
	border-bottom: 1px solid #1F253D;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.sun_list LI .left
{
	color: #9099B7;
}
.temp_list LI A
{
	padding: 20px 25px 15px;
	display: block;
	text-transform: uppercase;
	color: #9099B7;
}
.temp_list LI A SPAN
{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.temp_list LI A:hover SPAN, .temp_list LI.active A .day_name
{
	color: #E64C65;
}
.temp_list LI A:hover, .temp_list LI.active A
{
	background: #50597B;
}
.temp_list LI A .date
{
	margin-left: 0.4em;
	margin-right: 0.4em;
}
.temp_list LI A .label
{
	color: #FFF;
	font-size: 1em;
	float: right;
	letter-spacing: 1px;
	position: relative;
	top: -3px;
}
.temp_list LI A .label .wind_disp
{
	float: left;
}
.temp_list LI A .label .wind_disp .digits
{
	float: left;
	font-size: 1.4em;
}
.temp_list LI A .label .wind_disp .marker
{
	float: right;
	font-size: 0.6em;
	text-transform: none;
	margin-right: 0.4em;
	margin-left: 0.2em;
}
.forecast_summary
{
	color: #9099B7;
	font-size: 0.8em;
	text-transform: none;
}
/******* Tweets *******/
.tweets H3
{
	background: #35AADC;
}
.tweets_list
{
	background: #394264;
	border-radius: 0px 0px 5px 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-o-border-radius: 0px 0px 5px 5px;
}
.tweets_list LI
{
	color: #FFF;
	font-size: 1em;
	line-height: 1.6em;
	padding: 2em 2em 1em;
	border-bottom: 1px solid #1F253D;
}
.tweets_list LI:last-child
{
	border-bottom: none;
}
.tweets_list LI A
{
	color: #4FC4F6;
}
.tweets_list LI SPAN
{
	display: block;
	color: #9099B7;
	padding: 10px 0;
}
/********* Social Networks **********/
.social_networks
{
	margin-top: 30px;
}
.social_networks LI A
{
	display: block;
	margin-bottom: 15px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.social_networks LI A > I
{
	background: #1A4E95;
	float: left;
	padding: 14px;
	border-radius: 5px 0px 0px 5px;
	-webkit-border-radius: 5px 0px 0px 5px;
	-moz-border-radius: 5px 0px 0px 5px;
	-o-border-radius: 5px 0px 0px 5px;
}
.social_networks LI A SPAN
{
	float: left;
	font-size: 1.2em;
	color: #FFF;
	text-transform: uppercase;
	padding: 20px;
}
.social_networks LI A.facebook
{
	background: #3468AF;
}
.social_networks LI A.facebook:hover
{
	background: #0D4797;
}
.social_networks LI A.facebook > I
{
	background: #1A4E95;
}
.social_networks LI A.twitter
{
	background: #4FC4F6;
}
.social_networks LI A.twitter:hover
{
	background: #0C94CE;
}
.social_networks LI A.twitter > I
{
	background: #35AADC;
}
.social_networks LI A.googleplus
{
	background: #E64C65;
	margin-bottom: 0;
}
.social_networks LI A.googleplus:hover
{
	background: #CA2540;
}
.social_networks LI A.googleplus > I
{
	background: #CC324B;
}
/*********** Colunm Right ***********/
.column_right_grid
{
	background: #394264;
	text-align: center;
	padding: 2em 0;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}
.column_right_grid H3
{
	color: #FFF;
	font-size: 1.2em;
	text-transform: uppercase;
}
.column_right_grid SPAN
{
	background: #50597B;
	border: 1px solid #1F253D;
	padding: 5px 0;
	margin: 25px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	display: block;
	outline: none;
	transition: border-color 0.3s;
	-o-transition: border-color 0.3s;
	-ms-transition: border-color 0.3s;
	-moz-transition: border-color 0.3s;
	-webkit-transition: border-color 0.3s;
}
.column_right_grid SPAN:hover
{
	border: 1px solid #11A8AB;
}
.column_right_grid SPAN I IMG
{
	vertical-align: middle;
}
.column_right_grid INPUT[type="text"], .column_right_grid INPUT[type="password"]
{
	padding: 10px;
	color: #FFF;
	font-size: 1em;
	background: none;
	outline: none;
	border: none;
	margin: 0px auto;
	width: 75%;
	font-family: ambleregular;
}
.newsletter INPUT[type="submit"], .sign_in INPUT[type="submit"]
{
	padding: 15px 2.5em;
	color: #FFF;
	font-size: 1em;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	outline: none;
	background: #11A8AB;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	font-family: ambleregular;
}
.newsletter INPUT[type="submit"]:hover
{
	background: #0D9092;
}
/********** Sign In to your account *********/
.sign-in
{
	margin-top: 30px;
	padding: 2em 0 0;
}
.sign_in
{
	padding-bottom: 1em;
	border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
}
.sign_in INPUT[type="submit"]
{
	background: #E64C65;
}
.sign_in INPUT[type="submit"]:hover
{
	background: #D4465D;
}
.sign_in H4
{
	margin-top: 20px;
}
.sign_in H4 A
{
	font-size: 1.1em;
	color: #9099B7;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.sign_in H4 A:hover
{
	color: #FFF;
	text-decoration: underline;
}
.signin_facebook
{
	background: #3468AF;
	padding: 10px 0 15px;
	text-align: center;
	border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-o-border-radius: 0 0 5px 5px;
}
.signin_facebook P A
{
	font-size: 1em;
	color: #FFF;
}
.signin_facebook A > I > IMG
{
	margin: 0 5px -10px 0;
}
/******** Downloading And Uploading Status bar ***********/
.klima
{
	padding: 2em 25px;
}
.klima P
{
	color: #FFF;
	font-size: 1em;
}
.klima P IMG
{
	vertical-align: middle;
}
.klima P.downloading
{
	float: left;
}
.klima P.percentage
{
	float: right;
}
.left
{
	float: left;
	padding: 20px 12px 15px 25px;
}
.right
{
	float: right;
	padding: 20px 25px 15px 12px;
}
.klima EM
{
	font-size: 0.7em;
	vertical-align: top;
}
.progress
{
	margin: 20px 0;
	background: #50597B;
	height: 20px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}
.progress-bar
{
	background: #11A8AB;
	height: 20px;
	border-radius: 5px 0px 0px 5px;
	-webkit-border-radius: 5px 0px 0px 5px;
	-moz-border-radius: 5px 0px 0px 5px;
	-o-border-radius: 5px 0px 0px 5px;
}
.uploading
{
	background: #4FC4F6;
}
/********* Events Date ******/
.date_events
{
	margin-top: 30px;
	padding: 0 0 2em;
	background: #3468AF;
}
.date_events H3
{
	color: #FFF;
	font-size: 1.2em;
	text-transform: uppercase;
	padding: 20px;
	text-align: center;
	background: #1A4E95;
	border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-o-border-radius: 5px 5px 0 0;
}
.date_events H3 A#slide_prev
{
	float: left;
}
.date_events H3 A#slide_next
{
	float: right;
}
.event_dates LI
{
	font-size: 10em;
	color: #FFF;
}
.button A
{
	display: inline-block;
	background: #4FC4F6;
	padding: 15px 2.5em;
	color: #FFF;
	font-size: 1em;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.button A:hover
{
	background: #48B2DF;
}
/***** Calender *****/
.calender
{
	margin-top: 30px;
	padding: 0 0px 1em;
}
/**** Responsice Layout *****/
@media only screen and (max-width: 1680px)
{
	.graph CANVAS
	{
		padding: 20px 58px;
	}
}
@media only screen and (max-width: 1600px)
{
	.graph CANVAS
	{
		padding: 20px 48px;
	}
}
@media only screen and (max-width: 1366px)
{
	.wrap
	{
		width: 90%;
	}
	.graph CANVAS
	{
		padding: 20px 38px;
	}
}
@media only screen and (max-width: 1280px)
{
	.wrap
	{
		width: 90%;
	}
	.chart_list LI
	{
		width: 24.75%;
	}
	.graph CANVAS
	{
		padding: 20px 27px;
	}
}
@media all and (max-width: 1024px)
{
	.wrap
	{
		width: 95%;
	}
	.chart_list LI
	{
		width: 24.6%;
	}
	.graph CANVAS
	{
		padding: 20px 0;
	}
}
@media all and (max-width: 800px)
{
	.wrap
	{
		width: 95%;
	}
	BODY
	{
		margin: 30px 0;
	}
	.column_left, .column_middle, .column_right, .column_middle_right
	{
		float: none;
		width: 100%;
	}
	.column_left
	{
		margin-bottom: 30px;
	}
	.column_middle, .column_middle_right
	{
		margin: 15px 0;
	}
	.graph CANVAS
	{
		padding: 20px 13.57em;
	}
	.profile_details
	{
		margin: 15px;
	}
	#loginContainer
	{
		padding-right: 0;
	}
	#loginBox
	{
		right: -10px;
	}
}
@media all and (max-width: 640px)
{
	.wrap
	{
		width: 95%;
	}
	.graph CANVAS
	{
		padding: 20px 8.8em;
	}
}
@media all and (max-width: 480px)
{
	.wrap
	{
		width: 95%;
	}
	.graph CANVAS
	{
		padding: 20px 0em;
	}
}
@media all and (max-width: 320px)
{
	.wrap
	{
		width: 95%;
	}
	.chart_list LI
	{
		width: 24.6%;
	}
	.tweets_list LI
	{
		padding: 1em;
	}
	.webcam
	{
		padding: 2em;
	}
	.graph CANVAS
	{
		padding: 20px 0em;
	}
	.main
	{
		padding: 15px 0;
	}
	.chart, .graph, .video_palyer, .social_network_likes, .weather, .tweets, .social_networks, .sign-in, .downloading_uploading, .date_events, .calender
	{
		margin-top: 15px;
	}
	.video_palyer IFRAME
	{
		height: 160px;
	}
}
