@charset "utf-8";
/* CSS Document for www.kerrykenneally.com */

/* 
 * --------------------------------------------
 * GLOBAL STYLEs
 *
 * #716854 - Dusky brown, used for plain text
 * #262117 - Dark Brown, used for links
 * #2B0036 - Purple, used for Painting styling
 * #003D4A - Teal, used for Photography styling
 * #E6E6E6 - Light Grey, used for background
 * #E1DDD8 - Light Brown, user for accents
 * --------------------------------------------
 */

/* 
 * Default Margin and Padding settings for each page
 * Default font-family, size and color for each page
 */
* {
	color: #716854;
	font-family: Verdana;
	font-size: 11px;
	line-height: 15px;
	margin : 0px;
	padding : 0px;
}

/* Global styling for links, uses the Dark Brown */
a
{
	color: #262117;
	text-decoration: none;
}

/* 
 * A bit of CSS for viewing div layouts
 * 
 * NOTE:  By enabling this you'll get wrapping etc divs as the pixels will be out by 1
 */ 
body div
{
	/* border: 1px solid; */
}

/* 
 * Container div
 *
 * margin-left: auto;   To ensure that the div is centered along the x-axis
 * margin-right: auto;  To ensure that the div is centered along the x-axis
 * width: 1024px;       To ensure that the div is centered along the x-axis & to set minimum resolution support
 */
#container
{
	margin-left: auto;
	margin-right: auto;
	width: 1024px;
}

/* This class is for images that are used as secondary headings */
.contentHeading2
{
	height: 13px;
	width: 175px;
}

/* All images should have no borders by default */
img
{
	border: none;
}

/* For quotes */
#quotation
{
	font-style: italic;
}

/* 
 * --------------------------------------------------------------------------------------
 * HEADER SECTION 
 *
 * The 3 children divs have effective widths of 237px, 550px & 237px = 1024px total width
 * --------------------------------------------------------------------------------------
 */

/* 
 * All divs in the headerSection div
 * 
 * Each div inside the headerSection must float: left; so they sit next to eachother
 * Each div inside the headerSection must be the same height as their parent
 */
#headerSection div
{
	float: left;
	height: 135px;
}

/* RH div in the #headerSection, contains the contact details */
#contactSection
{
	width: 237px;
}

/* 
 * Contact image (Contact) in the #contactSection
 *
 * Has padding applied to align it correctly to the bottom
 * The height and width are set to ensure that layout engine correctly calculates dimensions
 */
#contactSection img
{
	height: 13px;
	padding-top: 90px;
	width: 175px;
}

/* 
 * Middle div in the #headerSection, contains the heading 
 */
#headingSection
{
	padding-left: 30px;
	padding-right: 30px;
	width: 490px;
}

/* 
 * Heading image (Kerry Kenneally) in the #headingSection
 *
 * Has padding applied to align it correctly to the bottom
 * The height and width are set to ensure that layout engine correctly calculates dimensions
 */
#headingSection img
{
	height: 15px;
	padding-top: 90px;
	width: 113px;
}

/* 
 * Used in the headingSection, headingText is a one-off special case where the font is larger than normal
 * and the color is black
 */
#headingText
{
	color: #000000;
	font-size: 12px;
}

/* 
 * LH div in the #headerSection, contains the logo
 *
 * width: 237px;  To ensure a set layout of the logo relative to the rest of the page
 */
#logoSection
{
	width: 237px;
}

/*
 * Logo image in the #logoSection
 *
 * Has padding applied to align it correctly to the bottom RHC
 * The height and width are set to ensure that layout engine correctly calculates dimensions
 */
#logoSection img
{
	height: 105px;
	padding-left: 95px;
	padding-top: 30px;
	width: 142px;
}

/* 
 * ------------------
 * NAVIGATION SECTION
 * ------------------
 */

/*
 * The navigation section
 *
 * clear: both;  Ensures that this div sits below the #headerSection
 */
#navigationSection
{
	clear: both;
	background-color: #262117;
	height: 38px;
}

/*
 * The menu section
 *
 * margin-left: auto;   To ensure that the div is centered along the x-axis
 * margin-right: auto;  To ensure that the div is centered along the x-axis
 * width: 490px;        To ensure that the div is lined up with the logo above
 */
#menuSection
{
	margin-left: auto;
	margin-right: auto;
	width: 490px;
	height: 29px;
}

/* 
 * All divs in the menuSection div:
 * 
 * Each div inside the menuSection must float: left; so they sit next to eachother
 * Each div inside the menuSection must 29 pixels high and be aligned to the bottom of their parent
 * Each div is separated to it's right by 2px;
 */
#menuSection div
{
	float: left;
	margin-top: 9px;   /* Height of Parent - Height of Tab = Top Margin (38px - 29px = 9px) */
	padding-right: 2px;
}

/*
 * Portfolio image in the #menuSection
 *
 * Has padding applied to align it correctly to the text in the tabs
 * The height and width are set to ensure that layout engine correctly calculates dimensions
 */
#menuSection img
{
	height: 13px;
	padding-right: 11px;
	padding-top: 9px;       /* 29px - 13px - 9px = 7px from the bottom */
	width: 60px;
}

/*
 * Tab style links in the #menuSection
 *
 * display: block:     Means that that clickable area is a block as opposed to just the text
 * line-height: 29px;  Means that the text will be vertically aligned in the middle
 */
#menuSection a
{
    color: #FFFFFF;
    display: block;
    height: 29px;
    line-height: 29px;
    text-align: center;
    text-decoration: none;
    width: 100px;
}

/*
 * The selected tab style in the #menuSection
 *
 * display: block:     Means that that clickable area is a block as opposed to just the text
 * line-height: 29px;  Means that the text will be vertically aligned in the middle
 */
.selected
{
	/* TODO  Go from white to E6E6E6 gradiant */
	background-color: #E6E6E6;
	color: #000000;
    display: block;
    height: 29px;
    line-height: 29px;
    text-align: center;
    text-decoration: none;
    width: 100px;
}

.graphicDesignTab
{
    /* TODO */
}

.paintingTab
{
	background-color: #2B0036;
}

.photographyTab
{
	background-color: #003D4A;
}

/* 
 * ----------------------
 * MAIN & CONTENT SECTION
 * ----------------------
 */

/*
 * The navigation section
 *
 * overflow: auto;  Ensures that this parent div expands according to its children
 */
#mainSection
{
	background-color: #E6E6E6;
	overflow: auto;
}

/*
 * The content section
 *
 * margin-left: auto;   To ensure that the div is centered along the x-axis
 * margin-right: auto;  To ensure that the div is centered along the x-axis
 * margin-top: 20px;    To ensure that the div is 20px down from the #navigationSection
 * margin-top: 20px;    To ensure that the div is 10px up from the #footerSection 
 * All four border attributes have to be specified because FireFox demands it!
 */
#contentSection
{
	background-color: #FFFFFF;
	border-top-color: #E1DDD8;
	border-top-width: 3px;
	border-top-style: solid;
	border-bottom-color: #E1DDD8;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	height: 400px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 920px;
}

/* 
 * All divs in the contentSection div
 * 
 * Each div inside the contentSection must float: left; so they sit next to eachother
 * The are all 100% to ensure that they stretch to fit their parent
 * We don't apply padding via this technique in this case because the carousel jquery plugin is badly affected
 */
#contentSection div
{
	float: left;
	height: 100%;
	/* padding-top: 15px; */
}

/* 
 * --------------------
 * Left Content Section
 * --------------------
 */

/* 
 * The left colmun
 */
#leftContent
{
	padding-left: 10px;
	padding-top: 15px;
	width: 175px;        /* Total Width - padding-left = width (185 - 10 = 175) */
}

/* The left decorqation column, holds a decorative image */
#leftDecorationContent
{
	width: 30px;
}

/* 
 * The small image decoration in the #leftDecorationSection
 * 
 * We then use padding-top: 7px to shift the image down to where we want it
 */
#motifImage
{
	height: 28px;
	padding-left: 8px;   /* Width of Column - padding = width of image == (30 - 4 - 8 = 18) */
	padding-right: 4px;  
	padding-top: 7px;
	width: 18px;
}

/* 
 * ----------------------
 * Center Content Section
 * ----------------------
 */

/* The center colmun */
#centerContent
{
	width: 490px;
}

/*
 * subNavigation Section div
 */
#subNavigationSection
{
	padding-bottom: 10px;
	padding-top: 15px;
}

/* The prefix image for the navigation for the centerSection */
#graphicDesignImage
{
	height: 20px;
	width: 144px;
}

/* The Logo image in the navigation for the centerSection */
#logoImage
{
	height: 20px;
	width: 43px;
}

/* The Print image in the navigation for the centerSection */
#printImage
{
	height: 20px;
	width: 43px;
}

/* The Web & GUI image in the navigation for the centerSection */
#webGUIImage
{
	height: 20px;
	width: 83px;
}

/* The images between each navigation item for the centerSection */
#pipeImage
{
	height: 20px;
	width: 5px;
}

/* Images in the carousel are all the same height and width */
.carouselImage
{
	height: 300px;
	width: 470px;
}

/* Styling for the carousel jquery plugin as recommended by the author */
#carousel ul
{
	list-style: none;
	padding: 0;
	margin: 0;
	width: 5640px;     /* .carouselImage width * # of images */
	position: relative;
}

/* Styling for the carousel jquery plugin as recommended by the author */
#carousel li
{
	display : inline;
	float : left;
}

/* 
 * ---------------------
 * Right Content Section
 * ---------------------
 */

/* The right decorqation column, currently blank */
#rightDecorationContent
{
	width: 30px;
}

/* The right colmun */
#rightContent
{
	padding-right: 10px;
	padding-top: 15px;
	width: 175px;        /* Total Width - padding-right = width (185 - 10 = 175) */
}

/* After each paragraph in the #rightContent column we want some padding */
#rightContent p
{
	padding-bottom: 25px;
}

/* 
 * The list in the right colmun
 *
 * We take away the default list style
 * We add the same bottom padding as paragrpahs in this section
 */
#rightContent ul 
{
	list-style-type: none;
	padding-bottom: 25px;
}

/* Before each li element we add the 'bullet' that we really want, in our case a small em-dash followed by a nbsp; */
/* TODO This is unsupported in IE7? */
#rightContent ul li:before
{
	content: "\2012 \0020";
}

/* On the very last li element we remove the small em-dash and   */
/* TODO This is unsupported in IE7? */
#rightContent ul li.last:before
{
	content: "";
}

/* The Portfolio PDF V1.0 image */
#portfolioPDF
{
	height: 45px;
	width: 60px;
}

/* 
 * --------------
 * FOOTER SECTION
 * --------------
 */

/*
 * footerSection div
 *
 * margin-left: auto;   To ensure that the div is centered along the x-axis
 * margin-right: auto;  To ensure that the div is centered along the x-axis
 * width: 920px         To ensure we line up with the #contentSection above
 */
#footerSection
{
	background-image: url(../images/Decoration.png);
	background-repeat: repeat-x;
	height: 34px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width: 920px;
}