@charset "utf-8";
/* CSS Document */



/*
	Theme Name: A Timely Error
	Author: James & Simon Duquenoy
	Author URI: http://themeforest.net/user/Septimus_Fossett
	Version: 1.0

	Designed & Developed by James and Simon Duquenoy for ThemeForest.net
*/




/* === General Styles === */

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);					/* Imports font "Droid Sans" from Google */

body {
	font-family: 'Droid Sans', sans-serif;												/* Makes all page text use font "Droid Sans" from Google */
	background-image: url("images/job.jpg");									/* Defines the Background image to be used */
}

h1 {
	font-family: 'Droid Sans', sans-serif;												/* Makes all page text use font "Droid Sans" from Google */
	font-size: 36px;																	/* Sets the font size to 36px */
	margin-top: 0px;																	/* Makes the top margin of the h1 0px, so takes up less space */
	margin-bottom: 10px;																/* Adds some space below the h1 */
	line-height: normal;																/* Ensures h1 text has enough gap above and below */
	color: black;																		/* Sets the font color of the h1 to black */
}

a {
	color: black;																		/* Makes all links (like in sitelinks) black in an inactive state */
	text-decoration: none;																/* Removes unerline from links */
}

a:hover {
	text-decoration: underline;															/* When a link is hovered, make the underline return */
	color: #8da4c4;																		/* Change the colour to blue */
}

input::-webkit-input-placeholder {														/* Sets the color of the placeholder for text input elements (Safari/Chrome) */
    color: #999;
}
input:-moz-placeholder {																/* Sets the color of the placeholder for text input elements (Firefox) */
    color: #999;
}
input:-ms-input-placeholder {															/* Sets the color of the placeholder for text input elements (IE) */
    color: #999;
}

.sub-link {
	color: #999;																		/* Sets the color of refresh links to grey */
	text-decoration: none;																/* Removes underline */
	border-bottom: 1px dotted #999;														/* Replaces underline with a bottom border which is dotted */
}

.sub-link:hover {
	color: #8da4c4;																		/* Changes color to blue again when hovered */
	text-decoration: none;																/* Keeps removal of underline */
	border-bottom: 1px dotted #8da4c4;													/* Changes border color to same blue */
}




/* === Wrap === */

#wrap {
	width: 900px;																		/* Sets width of main page wrapper */
	height: 400px;																		/* Sets height of main page wrapper */
	position: fixed;																	/* Makes it stay in the same place */
	top: 50%;																			/* Makes wrap in center of page */
	left: 50%;																			/* Makes wrap in center of page */
	margin-left: -450px;																/* Makes wrap in center of page */
	margin-top: -200px;																	/* Makes wrap in center of page */
}


/* === Main Content === */

#main-content-wrap {
	width: 760px;																		/* Sets a smaller width for the actual content part */
	height: 260px;																		/* Sets the height */
	margin-left: 100px;																	/* Adds a margin to the left, so does not overlap clock */
	background-color: #E9E9E9;															/* Provides a backup background color */
	background-image: url("images/content-background.png");								/* Defines the aluminium background */
	margin-top: 20px;																	/* Some margin above to make centralised with clock */
	border-radius: 40px;																/* Curvy corners */
	border: 1px solid #999;																/* A thin grey border around box */
	padding: 20px;																		/* Some padding space inside box so text does not touch edges */
	line-height: 25px;																	/* Sets the height of each line, so text is not so cramped together */
	box-shadow: 0px 5px 10px #222;														/* Adds a shadow to the box */
	color: #666;																		/* Changes text color to a lighter grey */
}

#main-content {
	width: 490px;																		/* A second div to contain text - sets the width */
	height: 260px;																		/* Sets the height */
	float: right;																		/* Makes this div stay on the right of the parent element */
}




/* === Search Styles === */

#search { float: left; }																/* Makes search bar stay as far left as possible */

.search-text {
	width: 200px;																		/* Sets the width */
	height: 10px;																		/* Sets the height */
	padding: 10px;																		/* Sets the padding, which adds to the width and height */
	font-family: 'Droid Sans', sans-serif;												/* Uses Droid Sans from Google again */
	font-size: 13px;																	/* Sets the font-size, matching with other sitelinks and buttons */
	border: 1px solid #CCC;																/* A thin, solid light grey border */
	background-color: white;															/* Sets background color to white */
	border-bottom-left-radius: 5px;														/* Curvy corners for bottom left corner */
	border-top-left-radius: 5px;														/* Curvy corners for top left corner */
	outline: none;																		/* No glowing outine on browsers like Chrome or IE */
	float: left;																		/* Makes search box stay as far left as possible */
}

.search-text:focus {
	box-shadow: 0px 2px 5px #CCC inset;													/* Sets another box-shadow, but inside the box not outside (inset) */
}

.search-submit {
	width: 30px;																		/* Styles for the submit button, sets the width */
	height: 32px;																		/* Sets the height */
	font-family: 'Droid Sans', sans-serif;												/* Uses Droid Sans for inputs again */
	border: 1px solid #CCC;																/* Thin light grey border */
	background-color: white;															/* Sets background color to white */
	background-image: url("images/magnify.png");										/* Adds background image of magnifying glass */
	border-top-right-radius: 5px;														/* Curvy corners for top right corner */
	border-bottom-right-radius: 5px;													/* Curvy corners for bottom right corner */
	outline: none;																		/* No glowing outline on browsers like Chrome or IE */
	margin-left: -1px;																	/* Aligns submit button with search box, so no gap between them */
	cursor: pointer;																	/* Makes the cursor the hand symbol */
	position: absolute;																	/* Makes the button be positioned anywhere - nothing else matters */
}

.search-submit:active {
	box-shadow: 0px 2px 5px #CCC inset;													/* Another inset box shadow */
}



/* === Sitelinks Styles === */


.sitelinks1, .sitelinks2 p {
	width: 80px;																		/* Styles for homepage button and sitelinks 2 button, sets the width */
	height: 30px;																		/* Sets the height */
	font-family: 'Droid Sans', sans-serif;												/* Droid Sans font from Google again */
	border: 1px solid #CCC;																/* A thin light grey border */
	background-color: white;															/* A white background color */
	border-radius: 5px;																	/* Curvy corners all round */
	margin-left: 261px;																	/* Aligns with rest of boxes */
	font-size: 13px;																	/* Small 13px font size to match inputs */
	color: #999;																		/* Matching color as rest of inputs */
	text-align: center;																	/* Text is centrally aligned */
	cursor: pointer;																	/* Hand/link cursor again */
	line-height: 30px;																	/* Each line is 30px high, more spacious - less cramped together text (also vertically centralises) */
	margin-bottom: -5px;																/* Makes whole boxes go up 5px to match rest */
	
	transition: border 1s ease, color 1s ease;											/* Adds a transition (smooth) to the border and color properties, of 1s time and eases in and out */
	-moz-transition: border 1s ease, color 1s ease;										/* Firefox 4 */	
	-webkit-transition:  border 1s ease, color 1s ease;									/* Safari and Chrome */	
	-o-transition:  border 1s ease, color 1s ease;										/* Opera */
}

.sitelinks1:hover {
	border: 1px solid black;															/* Sitelinks box has a black border on hover */
	color: black;																		/* Also has black text on hover */
}

.sitelinks1:active {
	box-shadow: 0px 5px 10px #CCC inset;												/* When clicked has a small inset shadow to give button press illusion */
}

.sitelinks2 { width: 433px; }															/* Sets width of whole sitelinks2 box containing links */
.sitelinks2:hover p {
	border: 1px solid black;															/* More styles for sitelinks2 button on hover - black border */
	border-bottom: 1px solid white;														/* However bottom border is white to now show up against background */
	color: black;																		/* Black text again */
}

.sitelinks2 p {
	float: right;																		/* Button is as far right as possible */
	margin-top: -32px;																	/* Aligns with other buttons */
	z-index: 1;																			/* Keeps button above and visible */
}

#sitelinks-content-wrap {
	width: 433px;																		/* Wrap for content in sitelinks - sets width */
	height: 0px;																		/* Has 0 height at start */
	overflow: hidden;																	/* Nothing outside the dimensions is visible */
	float: right;																		/* Far right as possible */
	margin-top: -5px;																	/* Aligns to same level with other buttons */
	opacity: 0;																			/* Completely transparent */
	color: white;																		/* White text so does not show up */
	
	transition: height 1s ease, width 1s ease, opacity 1s ease, color 1s ease;			/* Adds transitions for height, width, opacity and color, all for 1s time with easing on */
	-moz-transition: height 1s ease, width 1s ease, opacity 1s ease, color 1s ease; 	/* Firefox 4 */
	-webkit-transition: height 1s ease, width 1s ease, opacity 1s ease, color 1s ease;  /* Safari and Chrome */
	-o-transition: height 1s ease, width 1s ease, opacity 1s ease, color 1s ease; 		/* Opera */
}

.sitelinks2:hover #sitelinks-content-wrap { opacity: 1; height: 120px; color: #999; }								/* When the sitelinks2 button is hovered it expands the content div, making it taller, fully visible and the text grey so also visible */
.sitelinks2:hover #sitelinks-content-join { border-left: 1px solid black; border-right: 1px solid black; }			/*  Makes the joining div show up with black borders (left and right only) so joins two divs together */

.sitelinks2:active #sitelinks-content-wrap { opacity: 1; height: 120px; color: #999; }								/* Same effect as above but on button click, useful for mobile devices */
.sitelinks2:active #sitelinks-content-join { border-left: 1px solid black; border-right: 1px solid black; }			/* Same effect as above but on button click, useful for mobile devices */


#sitelinks-content-join {
	width: 80px;																		/* Styles for the joining div, sets the width */
	height: 17px;																		/* Height */
	float: right;																		/* As far right as possible */
	background-color: white;															/* A white background */
	border-left: 1px solid black;														/* Border left, thin black */
	border-right: 1px solid black;														/* Border right, thin black */
	
	transition: height 1s ease, width 1s ease, opacity 1s ease, color 1s ease;			/* Transitions for joiners height, width, opacity, and color all 1s ease */
	-moz-transition: height 1s ease, width 1s ease, opacity 1s ease, color 1s ease; 	/* Firefox 4 */
	-webkit-transition: height 1s ease, width 1s ease, opacity 1s ease, color 1s ease;  /* Safari and Chrome */
	-o-transition: height 1s ease, width 1s ease, opacity 1s ease, color 1s ease; 		/* Opera */
}

#sitelinks-content-join p {
	width: 10px;																		/* More styles for joining p element - height */
	height: 10px;																		/* Width */
	background-image: url("images/corner.png");											/* Adds the corner image (border radius does not work in reverse) */
	background-repeat: no-repeat;														/* Background image will not repeat - only visible once */
	background-position: center;														/* Background image is centralised */
	background-color: white;															/* A white background color */
	margin-right: 78px;																	/* A margin right to lign up */
	margin-top: 9px;																	/* More alignment */
	border: none;																		/* No border for this */
	border-radius: 0px;																	/* No border-radius either */
}

#sitelinks-content {
	width: 431px;																		/* Finally, actual content for sitelinks - width */
	height: 100px;																		/* Height */
	background-color: white;															/* White background color */
	border-radius: 5px;																	/* Curvy corners all round */
	border-top-right-radius: 0px;														/* However, top right corner is not curved */
	border: 1px solid black;															/* Thin black border */
	margin-top: 16px;																	/* More alignment and padding */
	color: #999;																		/* Grey text color */
	font-size: 13px;																	/* Small text size matching other inputs */
}

#sitelinks-content ul {
	list-style: none;																	/* Styles for list-links - no bullet points */
	margin-left: -20px;																	/* Gets rid of margin to the left, so no big gaps */
	margin-right: 8px;																	/* Adding some gaps between columns */
	float: left;																		/* Everything wraps to the left, not below each other */
	max-height: 100px;																	/* Sitelinks will never go higher than 100px */
	overflow: hidden;																	/* Any content outside the dimensions will not be displayed */
}

#sitelinks-content li:before {
	content: "\00bb\00a0\00a0";															/* Adds the double arrow symbol to each list element, before rest of content */
}