@charset "UTF-8";

/*
+------------------------------------------------------------------------------+
|	FarmNow                                                                    |
|	Version 4.0.0                                                              |
|	CSS-Document (Media: All)                                                  |
+------------------------------------------------------------------------------+
*/


/*
	BASICS
*/

body {
	margin: 0;
	background: #e8e8e8;
	font-family: 'Roboto', sans-serif;
	font-size: 105%;
	width: 100%;
	height: 100%;
}

h1, h2 {
	font-family: 'Fauna One', serif;
}

header {
	padding-left: 1%;
}

section {
	width: 95%;
	margin: 0 auto;
}

section h1, div h1 {
	font-size: 160%;
	margin: 0;
}

section input, section textarea {
	display: block;
	margin: 0.5em auto;
	padding: 0.2em;
	border: 1px solid #aaaaaa;
	border-radius: 5px;
}

section textarea {
	width: 80%;
	height: 10em;
	font-size: 100%;
}

section input:focus, section textarea:focus {
	box-shadow: 0 0 1em #0099cc;
}

section .inputSubmit {
	background: #0099cc;
	color: #ffffff;
	margin-top: 2em;
	font-weight: bold;
	padding: 0.5em;
	box-shadow: 0 0 15px #aaaaaa;
	border-radius: 0;
	transition: background 0.3s ease-in;
	}

section .inputSubmit:hover {
	background: #00baf8;
}

#userData {
	width: 70%;
	margin: 3% auto 0 auto;
	padding-bottom: 0.5%;
	text-align: center;
	font-size: 80%;
	clear: both;
}

#userData p {
	font-weight: bold;
	display: inline;
}

#userData img {
	height: 1em;
	width: auto;
	margin: 0;
	padding: 0;
}

footer {
	margin: 0 auto 2% auto;
	border-top: 1px solid #333333;
	width: 70%;
	padding-top: 0.5%;
	color: #333333;
	text-align: center;
	font-size: 80%;
	font-style: italic;
	clear: both;
}

a:link, a:visited {
	text-decoration: none;
	color: #000000;
}

a:hover, a:active {
	color: #000000;
}

.content {
	width: 96%;
	height: 100%;
	float: right;
	margin: 0;
	padding-top: 1em;
	background: #e8e8e8;
	z-index: 1;
}


/*
	NAVIGATION
*/

nav {
	width: 4%;
	height: 100%;
	margin: 0;
	padding-top: 1em;
	float: left;
	background: #0099cc;
	position: fixed;
	box-shadow: inset -1em 0 1em -1em;
	z-index: 1;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

nav li {
	display: block;
}

nav img {
	width: 70%;
	height: auto;
	margin: 0;
	padding: 0 0 0 0.5em;
}

nav a:link, nav a:visited {
	display: block;
	margin: 0.5em auto;
	padding: 5% 3% 1.5% 3%;
	text-decoration: none;
	transition: background 0.5s ease-in, box-shadow 0.5s ease-in;
}

nav a:hover, nav a:active, nav #navActivePage a {
	background: #00baf8;
	box-shadow: inset -1em 0 1em -1em;
}

.header {
	margin-bottom: 1em;
}

.header a:hover, .header a:active {
	background: none;
	box-shadow: none;
}

nav h1 {
	display: none;
}


/*
	MAIN PAGE
*/

.mainPage {
	width: 80%;
	text-align: center;
}

.mainPage img {
	width: 3em;
	height: auto;
	margin: 1%;
	padding: 1em;
	border: 3px solid #000000;
	border-radius: 50%;
	transition: background 0.5s ease-in;
}

.mainPage a:hover img, .mainPage a:active img {
	background: #00baf8;
}

.mainPage h2 {
	margin: 0;
	padding: 0;
}

.notificationError, .notificationNotification, .notificationService, .notificationWelcome {
	border-radius: 10px;
	margin: 0.5em;
	padding: 0.5em;
	text-align: left;
}

.notificationError p, .notificationNotification p, .notificationService p, .notificationWelcome p {
	margin: 0;
}

.notificationError a:link, .notificationNotification a:link, .notificationService a:link, .notificationWelcome a:link, .notificationError a:visited, .notificationNotification a:visited, .notificationService a:visited, .notificationWelcome a:visited {
	display: inline;
	background: none;
	margin: 0;
	padding: 0;
	color: #000000;
	font-style: italic;
}

.notificationError a:hover, .notificationNotification a:hover, .notificationService a:hover, .notificationWelcome a:hover, .notificationError a:active, .notificationNotification a:active, .notificationService a:active, .notificationWelcome a:active {
	text-decoration: underline;
}

.notificationError {
	background-color: #ffadad;
}

.notificationNotification {
	background-color: #E5F8FE;
}

.notificationService {
	background-color: #ffffcc;
}

.notificationWelcome {
	background-color: #C8FFA9;
}

.notificationDelete {
	text-align: right;
	display: inline-block;
	float: right;
	margin: 0;
}

.notificationDelete img {
	height: 1em;
	width: auto;
	margin: 0;
	padding: 0;
	border: none;
}


/*
	STATISTICS
*/

.statistics {
	text-align: center;
	width: 45%;
	float: left;
	margin: 2% 2% 5% 2%;
}

.statistics_table {
	width: 100%;
}

.statistics_table_row {
	border-bottom: 1px solid #666666;
	padding: 1.25%;
	background: #ffffff;
	transition: background 0.3s ease-in;
}

.statistics_table_row:hover {
	background: #E5F8FE;
}

.statistics_table_cell_left {
	display: inline-block;
	width: 58%;
	text-align: left;
}

.statistics_table_cell_right {
	display: inline-block;
	width: 40%;
	font-weight: bold;
}

.statistics_table_title {
	font-weight: bold;
	border-bottom: 1px solid #666666;
	padding: 1.5%;
	background: #666666;
	color: #ffffff;
	text-align: left;
}

.statistics_table_row canvas {
	margin: 0.5em;
}


/*
	LOGIN PAGE
*/

.loginPage {
	text-align: center;
}

.loginPage h1 {
	text-align: left;
}
	
.loginPage input {
	font-size: 1em;
}


/*
	LISTS
*/

.list ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.list li {
	display: inline-block;
	width: 100%;
	border-top: 1px solid #666666;
}

.list li div {
	display: inline-block;
	padding: 0.5%;
	vertical-align: top;
}

.list .listHeader {
	background: #666666;
	font-weight: bold;
	color: #ffffff;
}

.list .listItemOk {
	background: #ffffff;
}

.list .listItemAlert {
	background: #ffffcc;
}

.list .listItemAlertToday {
	background: #ffadad;
}

.list .listItemTop, .list .listItemBottom, .list .listItemBottomActive {
	display: inline;
}

.list .sidCell, .list .statusCell {
	width: 6%;
}

.list .bdateCell {
	width: 9%;
}

.list .infoCell {
	width: 2%;
	text-align: center;
}

.list .nameCell, .list .lidCell {
	width: 16%;
}

.list .nameCell a {
	display: block;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

.list img {
	height: 1em;
	width: auto;
}

.list .actionCell {
	width: 25%;
}

.list .actionComment {
	display: block;
	width: 100%;
	font-style: italic;
	font-size: 80%;
	margin: 0;
}

.list .detailCell {
	width: 8%;
	text-align: center;
	float: right;
}

.list .detailCell img {
	margin: 0 0.3em;
	height: 1.1em;
}

.list .detailCell a:link, .list .detailCell a:visited {
	padding: 0.25em 0.1em 0.05em 0.1em;
	filter: brightness(0%);
	-webkit-filter: brightness(0%);
	transition: filter 0.3s ease-in;
	-webkit-transition: -webkit-filter 0.3s ease-in;
}

.list .detailCell a:hover, .list .detailCell a:active {
	filter: brightness(100%);
	-webkit-filter: brightness(100%);
}

.list .mobileTag, .list .mobileCommentNew {
	display: none;
}

.list .search {
	font-size: 1em;
}


/*
	DETAIL PAGE
*/

.detailPage div {
	padding: 0.5%;
	margin: 1%;
}

#detailInfoSectionOk, #detailInfoSectionAlert, #detailInfoSectionAlertToday {
	float: left;
	width: 35%;
}

#detailInfoSectionOk {
	background: #ffffff;
}

#detailInfoSectionAlert {
	background: #ffffcc;
}

#detailInfoSectionAlertToday {
	background: #ffadad;
}

.detailPage .topCell {
	border-bottom: 1px solid #666666;
	width: 98%;
	margin: 0 auto 1% auto;
}

.detailPage .infoCell, .detailPage .sidCell, .detailPage .nameCell {
	display: inline-block;
	margin: 0;
}

.detailPage .infoCell {
	width: 5%;
}

.detailPage .infoCell img {
	height: 0.8em;
	width: auto;
}

.detailPage .sidCell {
	width: 18%;
}

.detailPage .nameCell {
	width: 70%;
}

.detailPage .lidCell, .detailPage .bdateCell, .detailPage .actionCell, .detailPage .statusCell, .detailPage .raceCell {
	width: 98%;
	margin: 0 auto;
	font-weight: bold;
}

.detailPage .lidCell p, .detailPage .bdateCell p, .detailPage .actionCell p, .detailPage .statusCell p, .detailPage .raceCell p {
	display: inline-block;
	width: 27%;
	font-weight: normal;
	font-size: 90%;
	margin: 0;
}

.detailPage .detailCell {
	text-align: right;
	font-size: 200%;
	margin-top: 10%;
}

.detailPage .detailCell img {
	height: 1em;
	width: auto;
	margin: 0 0.2em;
}

.detailPage .detailCell a:link, .detailPage .detailCell a:visited {
	padding: 0.25em 0.1em 0.05em 0.1em;
	filter: brightness(0%);
	-webkit-filter: brightness(0%);
	transition: filter 0.3s ease-in;
	-webkit-transition: -webkit-filter 0.3s ease-in;
}

.detailPage .detailCell a:hover, .detailPage .detailCell a:active {
	filter: brightness(100%);
	-webkit-filter: brightness(100%);
}

#detailHistorySection, #detailCommentSection, #detailMilkFeedingSection {
	float: right;
	width: 59%;
	background: #ffffff;
}

#detailHistorySection h1, #detailCommentSection h1, #detailMilkFeedingSection h1 {
	border-bottom: 1px solid #666666;
	width: 98%;
	margin: 0 auto 1% auto;
	padding: 0.5%;
}

#detailHistorySection ul, #detailCommentSection ul, #detailMilkFeedingSection ul {
	list-style-type: none;
	width: 96%;
	margin: 0 auto;
	padding: 0;
}

#detailHistorySection li, #detailCommentSection li, #detailMilkFeedingSection li {
	transition: background 0.3s ease-in;
	border-radius: 3px;
	border: 1px solid #AAAAAA;
	margin-bottom: 1%;
	padding: 0.5%;
}

#detailHistorySection .historyDateCell {
	display: inline-block;
	width: 25%;
	margin: 0;
}

#detailHistorySection .historyActionCell {
	display: inline-block;
	width: 67%;
	margin: 0;
	font-weight: bold;
}

#detailCommentSection .commentText {
	width: 98%;
	margin: 0 auto;
}

#detailCommentSection .commentInfo {
	width: 90%;
	margin: 0 auto;
	padding: 0;
}

#detailCommentSection .commentNameInfo, #detailCommentSection .commentDateInfo {
	display: inline-block;
	width: 45%;
	font-size: 90%;
	font-style: italic;
	color: #666666;
	margin: 0;
}

#detailCommentSection .commentDateInfo {
	text-align: right;
}

#detailMilkFeedingSection .milkFeedingDayCell {
	display: inline-block;
	width: 30%;
	margin: 0;
}

#detailMilkFeedingSection .milkFeedingDateCell {
	display: inline-block;
	width: 40%;
	margin: 0;
	font-weight: bold;
}

#detailMilkFeedingSection .milkFeedingAmountCell {
	display: inline-block;
	width: 22%;
	margin: 0;
	font-weight: bold;
}

#detailMilkFeedingSection .floatClear {
	display: none;
}

.commentInfo .commentDelete {
	display: inline;
}

.commentDelete img {
	height: 1em;
	width: auto;
}

.commentDelete a:link, .commentDelete a:visited, .commentDelete a:hover, .commentDelete a:active {
	transition: background  0.3s ease-in;
	padding: 0.2em 0.2em 0 0.2em;
	border-radius: 3px;
}

.commentDelete a:hover, .commentDelete a:active {
	background: #ffadad;
}


/*
	REPRODUCTION PAGE
*/

.reproductionPage #container {
	width: 100%;
	margin: 0;
	padding: 0;
}

.reproductionPage .reproductionGraphSegment {
	border-left-style: solid;
	border-left-width: 5px;
}

.reproductionPage #birthToday, .reproductionPage #inseminatedToday, .reproductionPage #pregnancyTest, .reproductionPage #dryTreatment, .reproductionPage #expectedBirthToday {
	padding: 14px 8px 0 0;
	height: 20px;
	text-align: right;
	font-weight: bold;
}

.reproductionPage #birthToday, .reproductionPage #expectedBirthToday {
	background: #D8484B;
	border-left-color: #960E12;
	color: #960E12;
}

.reproductionPage #inseminatedToday {
	background: #A34CA3;
	border-left-color: #620962;
	color: #620962;
}

.reproductionPage #pregnancyTest {
	background: #2B9C1F;
	border-left-color: #095E00;
	color: #095E00;
}

.reproductionPage #dryTreatment {
	background: #3B5592;
	border-left-color: #132C65;
	color: #132C65;
}

.reproductionPage #afterBirth, .reproductionPage #afterInsemination, .reproductionPage #afterPregnancyTest, .reproductionPage #afterDryTreatment, .reproductionPage #afterDueDate {
	border-left-color: #999999;
}

.reproductionPage #afterBirth {
	height: 300px;
}

.reproductionPage #afterInsemination {
	height: 280px;
}

.reproductionPage #afterPregnancyTest {
	height: 760px;
}

.reproductionPage #afterDryTreatment {
	height: 300px;
}

.reproductionPage #afterDueDate {
	height: 280px;
}

.reproductionPage .elem {
	border: 1px solid #999999;
	display: block;
	position: absolute;
	margin-left: 5px;
	background: #FFFFFF;
}

.reproductionPage .elem a {
	padding: 2px 6px;
	display: block;
}

.reproductionPage .stateReady {
	border-left: 4px solid #960E12;
}

.reproductionPage .stateInseminated {
	border-left: 4px solid #620962;
}

.reproductionPage .statePregnant {
	border-left: 4px solid #095E00;
}

.reproductionPage .stateDry {
	border-left: 4px solid #132C65;
}

/*
	TRACKING PAGE
 */

.trackingPage .mapContainer {
	z-index: 0;
}

.groupCattleIcon {
	text-align: center;
}

.groupCattleIcon div {
	width: 48px;
	height: 48px;
	margin-bottom: -10px;
	background-image: url("../images/leaflet/marker-cattle.png");
	background-size: contain;
}

.groupCattleIcon span {
	padding: 4px 6px;
	border-radius: 8px;
	text-align: center;
	font-weight: bold;
	background: #0099cc;
}


/*
	SETTINGS PAGE
*/

.settingsPage {
	width: 80%;
	text-align: center;
}


/*
	DESKTOP DEVICES
*/

@media only screen and (min-width: 1081px) {
	
	
	/*
		NAVIGATION
	*/
	
	nav a {
		position: relative;
	}
	
	nav a:after {
		opacity: 0;
		background: rgba(0, 0, 0, 0.7);
	    border-radius: 5px;
		font-family: 'Fauna One', serif;
		font-size: 120%;
    	color: #ffffff;
    	content: attr(title);
    	left: 110%;
    	padding: 5px 15px;
    	position: absolute;
    	z-index: 1;
		margin: 0.35em 0;
		transition: opacity 0.25s ease-in, visibility 0.25s ease-in;
		visibility: hidden;
	}

	nav a:hover:after {
		opacity: 1;
		visibility: visible;
	}
	
	.header a:after {
		left: 135%;
	}

	
	/*
		LISTS
	*/
	
	.list .listItemOk, .list .listItemAlert, .list .listItemAlertToday, .list .listItemOk:hover, .list .listItemAlert:hover,.list .listItemAlertToday:hover  {
		transition: background 0.3s ease-in;
	}

	.list .listItemOk:hover {
		background: #E5F8FE;
	}

	.list .listItemAlert:hover {
		background: #ffff88;
	}

	.list .listItemAlertToday:hover {
		background: #ff6969;
	}
	
	.list li:last-child {
		border-bottom: 1px solid #666666;
	}

	.list .search {
		float: right;
		margin-top: -2em;
		width: 25%;
	}

	
	/*
		DETAIL PAGE
	*/
	
	#detailInfoSectionOk, #detailInfoSectionAlert, #detailInfoSectionAlertToday, #detailInfoSectionOk:hover, #detailInfoSectionAlert:hover, #detailInfoSectionAlertToday:hover  {
		transition: background 0.3s ease-in;
	}
	
	#detailInfoSectionOk:hover {
		background: #E5F8FE;
	}
	
	#detailInfoSectionAlert:hover {
		background: #ffff88;
	}
	
	#detailInfoSectionAlertToday:hover {
		background: #ff6969;
	}
		
	#detailHistorySection li:hover, #detailCommentSection li:hover, #detailMilkFeedingSection li:hover {
		background: #E5F8FE;
		transition: background 0.3s ease-in;
	}
	
	#detailMilkFeedingSection li {
		width: 47%;
		float: left;
		margin-left: 0.5%;
		margin-right: 0.5%;
	}
	
	#detailMilkFeedingSection .floatClear {
		display: inline;
		clear: both;
	}
	
	
	/*
		REPRODUCTION PAGE
	*/
	
	.reproductionPage .stateReady, .reproductionPage .stateInseminated, .reproductionPage .statePregnant, .reproductionPage .stateDry {
		transition: background 0.3s ease-in;
	}
	
	.reproductionPage .stateReady:hover {
		background: #D8484B;
	}
	
	.reproductionPage .stateInseminated:hover {
		background: #A34CA3;
	}
	
	.reproductionPage .statePregnant:hover {
		background: #2B9C1F;
	}
	
	.reproductionPage .stateDry:hover {
		background: #3B5592;
	}

	/*
		TRACKING PAGE
 	*/

	.trackingPage .mapContainer {
		height: 80vh;
	}
}


/*
	MOBILE DEVICES
*/

@media only screen and (max-width: 1080px) {
	
	/*
		BASICS
	*/
	
	body {
		font-size: 100%;
	}
	
	section {
		width: 98%;
	}
	
	section h1 {
		text-align: center;
	}
	
	.content {
		width: 100%;
		height: auto;
		padding-top: 6em;
		float: none;
		position: static;
		z-index: 0;
	}
	
	
	/*
		NAVIGATION
	*/
	
	nav {
		width: 100%;
		height: 4em;
		float: none;
		box-shadow: inset 0 -1em 1em -1em;
		overflow: hidden;
		transition: height 0.5s ease-in;
	}
	
	nav:hover {
		height: 60%;
		overflow: scroll;
	}
	
	nav ul {
		z-index: 2;
	}
	
	nav li {
		display: inline-block;
		margin: 0.5em;
	}
	
	nav img {
		width: 3em;
		margin: 1em;
		padding: 0;
	}
	
	nav a:link, nav a:visited {
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 5em;
		height: 5em;
		border-radius: 50%;
	}
	
	nav #navActivePage a {
		background: #00baf8;
		box-shadow: none;
		display: inline-block;
		width: 5em;
	}
	
	nav #navActivePage img {
		width: 3em;
	}
	
	nav a:hover, nav a:active {
		box-shadow: none;
	}
	
	.header {
		margin: 0 0 1em 0;
		height: 3em;
		display: block;
	}
	
	.header img {
		padding: 0 0.5em;
		margin: 0;
	}
	
	nav h1 {
		display: inline;
	}

	
	/*
		MAIN PAGE
	*/
	
	.mainPage {
		width: 90%;
	}
	
	.mainPage li {
		display: block;
	}
	
	.mainPage a:link, .mainPage a:visited {
		display: block;
		width: 85%;
	}
	
	.notificationError a:link, .notificationNotification a:link, .notificationService a:link, .notificationWelcome a:link, .notificationError a:visited, .notificationNotification a:visited, .notificationService a:visited, .notificationWelcome a:visited {
		display: inline;
	}
	
	
	/*
		STATISTICS
	*/

	.statistics {
		width: 100%;
		float: none;
		margin: 2% 0 2% 0;
	}
	
	
	/*
		LOGIN PAGE
	*/
	
	.loginPage h1 {
		text-align: center;
	}
	
	
	/*
		LISTS
	*/
	
	.list ul, .list li {
		border: none;
	}
	
	.list .listHeader {
		display: none;
	}
	
	.list .listItemOk, .list .listItemAlert, .list .listItemAlertToday {
		margin-bottom: 1%;
	}
	
	.list .listItemTop, .list .listItemBottom {
		display: block;
		width: 98%;
		margin: 0 auto;
	}
	
	.list .listItemTop {
		border-bottom: 1px solid #666666;
	}
	
	.list .listItemBottom {
		height: 0;
		overflow: hidden;
		transition: height 1s ease;
	}
	
	.list li:hover .listItemBottom, .list li:active .listItemBottom, .listItemAlertToday .listItemBottom {
		height: 8em;
	}
	
	.list .detailCell {
		display: block;
		float: right;
		text-align: right;
		width: 100%;
		margin-top: 2%;
		font-size: 180%;
	}

	.list .bdateCell, .list .lidCell, .list .actionCell {
		display: block;
		width: 100%;
		font-weight: bold;
	}

	.list .infoCell {
		width: 5%;
		text-align: center;
	}
	
	.list .nameCell {
		width: 45%;
		font-weight: bold;
	}
	
	.list .nameCell img {
		display: none;
	}
	
	.list .sidCell {
		width: 15%;
	}
	
	.list .statusCell {
		width: 23%;
		float: right;
		text-align: right;
	}
	
	.listItemOk .statusCell, .listItemAlert .statusCell {
		background: url(../images/arrowDown.png) no-repeat right;
		background-size: 0.9em 0.9em;
		padding-right: 1em;
	}
	
	.listItemOk:hover .statusCell, .listItemAlert:hover .statusCell {
		background: none;
	}
	
	.list .actionComment {
		display: none;
	}
	
	.list .mobileTag {
		display: inline-block;
		width: 35%;
		padding: 0;
		margin: 0;
		font-weight: normal;
	}
	
	.list .mobileCommentNew {
		display: inline-block;
		margin: 0 0.5em 0 0;
		padding: 0;
	}
	
	.mobileCommentNew img {
		width: 0.9em;
		height: auto;
	}

	.list .detailCell a:link, .list .detailCell a:visited {
		padding: 0.2em 0 0 0;
	}
	
	.list .search {
		width: 80%;
		margin: 0.5em auto;
	}
	
	
	/*
		DETAIL PAGE
	*/

	#detailInfoSectionOk, #detailInfoSectionAlert, #detailInfoSectionAlertToday, #detailInfoSectionOk:hover, #detailInfoSectionAlert:hover,#detailInfoSectionAlertToday:hover, #detailHistorySection, #detailCommentSection, #detailMilkFeedingSection  {
		float: none;
		width: 98%;
	}
	
	.detailPage .lidCell p, .detailPage .bdateCell p, .detailPage .actionCell p, .detailPage .statusCell p, .detailPage .raceCell p {
		width: 35%;
	}
	
	.detailPage .nameCell img {
		display: none;
	}

	/*
		TRACKING PAGE
 	*/

	.trackingPage .mapContainer {
		height: 60vh;
	}
}