/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
body { 
	margin:0px; 
	padding:0px;
	background:#000000 url(../images/body_bg_top.png) repeat-x top;
	font-family:Arial, Helvetica, sans-serif;
}

h1, h2, h3 { 
/*	font-family:Trajan Pro, Georgia, "Times New Roman", Times, serif;*/
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}


#header {
	padding:10px 0;	
	width:auto;
}

/**
 * Wrapper styles
 */
#wrapper { 
	width:900px; 
	margin:15px auto;
	background-color:transparent;  
}

/**
 * Search styles
 */
#search {
   float:right;
   margin: 0;
}

#search-form {
    height: 25px;
    border: 1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: inset 0 0 5px #bbb;
    -moz-box-shadow: inset 0 0 5px #bbb;
    box-shadow: inset 0 0 5px #bbb;
    overflow: hidden;
}

#search-space{
	font-size:13px;
    color:#333;
    border-width:0px;
    background: transparent;
}

#search-space:focus, input:focus {
	outline:0px;	/* gets rid of outline around search box */
}

#search-box input[type="text"] {
    width: 90%;
    padding: 11px 0 12px 1em;
    color: #333;
    outline: none;
}

#search-button {
    height: 25px;
    width: 79px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 25px;
    border-width: 0;
    border-left: 1px solid #aaa;
    -webkit-border-radius: 0px 3px 2px 0px;
    -moz-border-radius: 0px 3px 2px 0px;
    border-radius: 0px 3px 2px 0px;
    background-color: #bbb;
    background: -moz-linear-gradient(top, #c9c9c9 0%, #999999);
    background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000));
    -webkit-box-shadow: -4px 0px 3px -2px #ddd;
    -moz-box-shadow: -4px 0px 3px -2px #ddd;
    box-shadow: -4px 0px 3px -2px #ddd;
    cursor: pointer;
}

#text {
	font-family:Helvetica, Arial, sans-serif;
}

/**
 * Main container style
 */
#main {
  min-height: 300px;
  background-color:#FFF;
  border-style:solid;
  border-width:2px;
  border-radius:10px;   
}

/**
 * Main Gemstone Header Logo style
 */
#gems-header {
	padding:25px 0;
	height:85px;
	background-image:url(../images/gems-header/gems-header-bg.png); 
	background-position:center;
	border-style:solid;
  	border-width:2px;
	border-color:#CCC;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}

/**
 * Navigation bar styles
 */
/* starts the navbar menu. The following moves all the list items to the top left */
#navbar {				/* styles for the whole navbar */
	margin-left:15px;
	clear:both;
	height:55px;
	padding:0px;	
}

#navbar ul {			/* styles for the overall unordered list */
	padding:15px 10px;	
	margin:0px;
	text-align:center;
	z-index:100;
}

#navbar li { 			/* styles for the overall list items */
	list-style:none;
	float:left;
	position:relative; 
}

#navbar ul li a{	/* styles for all links */
	color:black;
	text-decoration:none; /* takes out the default underline */
	line-height:120%;
	display:block;
	text-align:left;
	padding:7px 15px;
}


#navbar ul ul {		/* styles for the child elements */
	position:absolute; /* positions child elements under the parent element */
	display:none; /* hides the child list items */
}

#navbar ul li:hover ul{		/* styles for child elements upon hovering over parent element */
	display:block; /* list items will be displayed when you hover over the parent list which is referenced in li:hover*/	
	background:#A80000;
	padding:0px;
	width:160px;	
}

#navbar ul li:hover a {	/* styles for links when hovering over parent element */
	background-color:#A80000; 
	color:#FFF;	/* whenever dropdown is activated, font is white */
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}

#navbar ul li {		/* styles for main navigation itmes */
	font-size:13px;	/* font size for main navigation items */
	text-transform:uppercase;
	font-weight:bold;
}

#navbar ul li ul li{ 	/* styles for dropdown list items */
	width:160px; 	/* fixed width for dropdowns */
	font-size:12px;	/* font size for dropdown items */
	text-transform:capitalize;
	font-weight:normal;
	border-bottom-style:solid;
	border-width:thin;
	border-color:#800000;
}

#navbar ul li a:hover	{ 	/* styles for hovering on link in dropdowns */
	text-decoration:none; 
	color:#FF3;			/* link inside dropdown is pale yellow */
	background:#A80000;
/* 	background:linear-gradient(top, #F00 0%, #6C0909 100%);
	background:-moz-linear-gradient(top, #F00 0%, #6C0909 100%);
	background:-webkit-linear-gradient(top, #F00 0%, #6C0909 100%);
	*/
}

/**
 * Content styles
 */
#content { 
	margin-left:30px;
	float:left; 
	width:600px; 
	text-align:justify;
}
#content h2 { 
	color:#800000;
}
.bg-box {
	background-color: #FFF;
	background-image: url(../images/body_bg_top_small.png);
	background-image: linear-gradient(#CCC, #FFF);
	padding: 0 10px;
	color: #333;
	/*color:#FFF;*/
	border-radius: 5px;
}
#content p, li 				{ font-size:12px; 
							line-height:180%; }
							
							#content a {  
        text-decoration:none; /* this will make sure that link's aren't underlined */
       color:#800000;/* whatever styles you put here will apply to any link in the content section */
}

#content a:hover {  
       color:#F00;/*whatever styles you put here will be activated only when someone hovers over a link in the content section */
}
#content h3 a {
	text-decoration:none;
	color:#000
}

#box1 					{ width:265px; float:left; 
							margin-right:40px; }
#box2 					{ width:265px; float:left; }



	#rightside 				{ margin-right:50px;
							float:right; 
							width:370px; }
							

#rightside p 			{
	font-size: 12px;
	line-height: 180%;
	text-align: justify;
}
#rightside li 			{ font-size:12px; line-height:180%; }
#rightside h2			{ color:#800000; }
#rightside a { text-decoration:none; color:#800000; }
#rightside a:hover {  
       color:#F00;
}
				

.img-right 				{ float:right; 
							padding: 0 0 0 25px; }
.img-left 				{ float:left; 
							padding: 0 0 25px 0; }
.img-center 			{ display:block;
							margin-left:auto;
							margin-right:auto; }
.text-left 				{ text-align:left; margin:20px; }
.text-right 			{ text-align:right; margin:20px; }

.indent {	padding:0px 10px;	}

/**
 * Footer styles
 */
#footer { 
	clear:both;
	background-color:#333; 
	height:120px;
	border-color:#CCC;
	border-style:solid;
	border-width:2px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	font-size:11px;
	text-align:center
} /* impt:??? */					
#footer p { 
	color:#FFF;
	padding:0 0 0 10px;
} 
#footer img {
	padding: 15px 10px 10px 15px;	
}


/**
 * jQuery UI overrides
 */
.ui-widget {
  font-family: inherit;
  font-size: inherit;
}

/**
 * Responsive
 */
		
@media all and (min-width: 0px) {
	#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 480px;
  }

  #header {
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    height: auto;
  }
  
	#navbar ul li {  /**styles for navbar**/
		font-size: .59em
		} /**allows navbar to drop to two lines so text stays of readable size**/ 
			
	#navbar ul li ul li{ 	/* styles for dropdown list items */
		font-size:10px;	/* font size for dropdown items on smaller screen */			
		}

#header #search { display: compact;}
#header #search-link {display: none;}


	#slider-wrapper {
		width: 480px;
		height: 140px; /**keeps margin between picture and h1 consistent**/
		}
		img{ 
		max-width: 100%
		height:auto
		width: auto;
		}
	#footer img {
		padding: 2px 2px 2px 2px;	
}
#footer {
	height:auto;}		
}

@media all and (min-width: 768px) {
  #wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 728px;
  }
  #slider-wrapper {
	  width: 728px;
	height: 200px; /**keeps margin between picture and h1 consistent**/
	  }

  #header {
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    height: auto;
  }
  
    #navbar ul li {  /**styles for navbar**/
		font-size: .53em
	} /**adjusts navbar font size so it stays in one line**/
	#navbar ul li ul li{ 	/* styles for dropdown list items */
		font-size:10.5px;	/* font size for dropdown items on smaller screen */
	}

  #header #search { display: compact; }
  #header #search-link { display: none; }

}

@media all and (max-width: 767px) {  /**helps with searchbar placement on smaller screen, not sure if this should stay**/
	#header {
		width: 480px;
	}
}

@media all and (min-width: 980px) {
  #wrapper {
	margin-left: auto;
    margin-right: auto;
    width: 940px;
  }
  #slider-wrapper {
	  width: 940px;
	height: 260px; /**keeps margin between picture and h1 consistent**/
	  }

  #header {
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    height: auto;
  }
  
   #navbar ul li { /**styles for navbar**/
		font-size: .72em
	} /**adjusts navbar font size so it stays in one line**/
			
	#navbar ul li ul li{ 	/* styles for dropdown list items */
		font-size:11px;	/* font size for dropdown items on smaller screen */	
	}

  #header #search { display: compact; }
  #header #search-link { display: none; }
  }
  
@media all and (min-width: 1134px) {
	 #navbar ul li {  /**styles for navbar**/
		font-size: 13px
	} /**set font size for navbar**/
			
	#navbar ul li ul li{ 	/* styles for dropdown list items */
		font-size:12px;	/* set font size for dropdown items */
	}
	#slider-wrapper {
    width: 1090px;
	height:300px; /**keeps margin between picture and h1 consistent**/
	  }
}

/**breakpoint for columns**/

@media all and (min-width: 980px) {
  #wrapper {
    width: 1094px;
  }
}

@media all and (max-width: 979px) {
	#rightside {
		float: left;
		padding-left: 30px;
		width: auto;
	}
	
	#content {
		width: auto;
		padding-right: 30px;
	}
	
	.bg-box {
		width: 600px;
	}
}

@media all and (max-width: 767px) {
	.bg-box {
		width: auto;
	}
}